Home
home
버블박스
home
💌

이메일 인증 기능 구현하기

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

목차

1. 제 이메일을 강탈 당했어요…

얼마 전, 버블박스로 이메일 인증 기능에 대해 문의가 들어왔습니다. 오늘은 이메일 인증 기능에 대해 뜯어보겠습니다.
버블에서 궁금한 점을 아래서 남겨주시면, 버블박스가 콘텐츠로 발행합니다.
버블에선 [sign the user up] 액션을 통해 회원가입을 처리합니다. 해당 액션이 작동되면, 유저가 입력한 이메일과 패스워드로 계정이 생성됩니다.
서비스를 처음 만드시는 분이라면 회원가입 기능을 구현할 때, 이메일 인증 기능을 간과하곤 합니다. MVP 같이 유저가 많지 않은 초기 단계의 서비스라면, 인증 기능이 필요하지 않는다고 생각할 수 있습니다. 하지만 많은 유저가 사용하는 서비스라면, 인증 기능은 그만큼 중요해집니다.
이메일 인증 기능은 이메일 소유권을 보장합니다. 버블에서 [sign the user up] 액션을 사용할 때, 원하는 이메일을 마구 잡이로 입력할 수 있습니다. 문제는 “내 이메일”을 다른 사람이 사용할 수도 있습니다. 예를 들어, “bubbleboxerofficial@gmail.com”이란 버블박스 이메일을 다른 사람이 사용해서 회원가입을 할 수 있습니다.
즉, 내 이메일이 다른 사람에게 강탈됩니다. 이러한 불상사(?)를 막기 위해 이메일 인증 기능을 초반에 구현하는 게 좋습니다. 인증 기능을 사용하면, 회원가입에 사용한 이메일이 정말로 내 이메일이 맞는지를 확인하게 만듭니다.

2. 이메일 인증 기능은 어떻게 작동하나요?

버블의 인증 프로세스는 다음과 같습니다.
1.
현재 유저의 이메일로 인증 메일을 전송
2.
인증 메일에 첨부된 링크 클릭
3.
confirmation page로 접속되며, 인증 처리가 완료

3. 인증 기능을 어떻게 만드나요?

이메일 인증 액션을 구현하는 방법은 크게 2가지이며, 차이는 인증 메일을 언제 전송할지에 있습니다. 방법 (1)은 회원가입이 완료되자마자 자동으로 인증 메일을 전송합니다. 방법 (2)는 인증 메일 발송 시점을 정할 수 있습니다.
1.
[Sign the user up] 액션에서 이메일 인증 설정 활성화하기
2.
[Send confirmation email] 액션 사용하기

a. [Sign the user up] 액션에서 이메일 인증 설정 활성화하기

[Sign the user up] 액션을 사용할 때, [Send an email to confirm the email]이 있습니다. 이를 활성화하면, 해당 액션이 완료되고 자동적으로 인증 메일을 보냅니다.
활성화 시, 바로 아래에 [Confirmation page]가 나옵니다. 이는 전송된 인증 메일에 첨부된 링크를 클릭했을 때, 접속되는 페이지입니다. 링크를 통해 페이지에 접속하지 않으면, 인증이 완료되지 않습니다.

b. [Send confirmation email] 액션 사용하기

회원가입 시점이 아니라, 다른 시점에서 인증 메일을 보내길 원할 수 있습니다. 예를 들어, 유저에게 인증 메일을 전송했지만, 미처 확인하지 못해서 인증을 완료하지 못할 수 있습니다. 이런 경우에는 나중에 다시 인증 메일을 보내야 합니다. 이때, [Send confirmation email] 액션을 사용합니다.
설정 방식은 앞선 방법과 동일합니다. [Send confirmation email] 액션을 생성하고, [Confirmation page]에 메일 링크를 통해 접속할 페이지를 선택하면 됩니다.

4. 인증 메일의 내용 커스텀하기

인증 요청 시, 아래와 같은 메일이 전송됩니다. 여기서 링크를 클릭해야 인증이 완료됩니다.
다만, 메일 내용이 구식 번역기를 돌려서 작성한 것 같습니다. 이런 구닥다리 메일을 보면, 유저 경험이 좋지 않습니다.
다행히도 인증 메일 내용을 변경할 수 있습니다. [Settings] > [Langunages]에 들어간 후, [Application texts & messages] 섹션을 확인합니다. 여기서 [Current editing messages and texts for]을 [Korean (ko_kr)]로 변경합니다.
그리고 스크롤을 해서 다음의 입력란을 찾습니다. 여기의 내용을 변경해서 메일 내용을 변경할 수 있습니다.
CORE - Email confirmation body → 이메일 본문 입력
CORE - Email confirmation subject → 이메일 제목 입력
CORE - Confirmation Link → 인증을 확인하는 링크 텍스트 입력
다음 이미지를 보면, 각 입력란이 메일에서 어떻게 적용되는지 나옵니다.

5. 커스텀 메일 사용하기

버블이 제공하는 기본 도메인(appname.bubbleapps.io)를 사용하면, 다음처럼 이메일 발신자가 appname-no-reply@bubbleapps.io가 됩니다. 발신자도 변경할 수 있습니다.
발신자 변경을 위해서 아래 조건이 모두 필요합니다. 해당 설정은 모두 [Settings] > [Domain/email]에서 처리할 수 있습니다. 각 설정 방법은 아래 링크에서 확인 가능합니다.
커스텀 도메인 설정
Sendgrid 연동
모든 설정을 완료하면 아래처럼 나옵니다. 여기서 [Email sent by your app come from] 입력란에 발신 메일을 설정할 수 있습니다.
중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요! + 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
Enterprise