비밀번호 없이 링크로 로그인 설정하기 (Bubble+Sendinblue(Brevo))

유저들이 서비스에 가입할때 이메일이나 닉네임과 함께 비밀번호를 설정하는 것이 일반적이었지만, 세상에나. 유저 입장에서 사이트마다 다른 계정 정보를 외우거나 적어둬야하니 부담이된다.

비밀번호 없이 이메일로 링크를 받아서 로그인하는 매직 로그인 링크를 사용하면 사용자 경험과 보안 측면에서 여러가지 장점이 있다. 매직 로그인 링크는 사용자 친화적이면서 보안이 강화된 로그인 방식으로 많은 서비스에서 점점 더 활용되고 있다. 매직 로그인 링크의 장점들을 간단히 요약하면,

 

1. 사용자 경험 향상

비밀번호를 기억할 필요 없이 이메일로 간단히 로그인 가능. 비밀번호 잊어버림 문제 해결, 빠르고 간편한 접근 제공.

 

2. 보안 강화

비밀번호 탈취 및 재사용 위험 제거. 1회성 링크로 피싱 및 브루트 포스 공격(비밀번호를 무한히 생성해서 해킹하려는 시도) 방지.

 

3. 관리 효율성

비밀번호 저장 및 복구 프로세스 관리 부담 감소. 데이터베이스 보안 및 유지보수 비용 절감. 소셜 로그인을 원하지 않거나 번거롭게 여기는 사용자들에게 비밀번호 없는 매직 로그인은 좋은 대안이 됨.

 

4. 모바일 친화적

모바일에서 비밀번호 입력 없이 이메일 앱으로 쉽게 로그인 가능.

 

5. 중복 계정 방지

이메일 소유권만 확인하므로 계정 중복 생성 위험 최소화.

 

 

 

이글은 노코드 솔루션 버블(Bubble)에 Brevo(구 Sendinblue)라는 이메일 Provider를 연동해서, 비밀번호 없이 이메일 인증으로 로그인 링크를 제공하는 방법을 설명한다. Bubble에는 Sendgrid가 기본 email provider로 지정되어있기때문에 Sendgrid에서 키 값을 받아 연결하면 아주 약간 덜 번거롭지만 브레보(Brevo)는 월 300건까지 무료로 자동 이메일을 보낼수 있기떄문에 (Sendgrid는 무료 플랜에서 월 100개까지만 허용) Brevo를 사용해서 연동하기로 한다. 

 

Brevo에 대한 설명과 자동 이메일 템플릿 설정은 이전 글을 참고

2024.04.17 - [explore] - 스티비, 메일침프가 비싸다면? Brevo(구 Sendinblue)로 하루 300개까지 무료로 이메일 보내기

 

1. Bubble에서 매직 링크 생성

Bubble는 자체적으로 매직 링크를 생성하는 기능을 제공한다. 이 링크는 사용자를 특정 페이지로 로그인된 상태로 리다이렉트한다. 먼저 Workflow> 매직 로그인 링크를 설정할 지점에 추가 버튼 클릭> Account > Send Magic Login Link 설정한다.

Button 클릭 이벤트 를 설정하고  Send Magic Login Link  액션 추가.

 

 

Link Expiration (0-24 hrs): 링크 유효 기간 설정(예: 1시간).

Navigate on Login: 매직 링크 클릭 후 이동할 페이지를 선택(예: index, dashboard 등).

Data to Send: 필요시 특정 데이터를 포함하도록 한다. 나의 경우, 로그인하면 이동하게할 페이지에서 로그인한 유저의 정보를 보여주고 싶기때문에 Current User로 설정해두었다. 

Just create link, don’t send email: 이 설정을 체크하면 Bubble이 매직 링크를 만들지만, 이메일은 보내지 않도록 할 수 있다. 지금은 Sendgrid가 아니라 Brevo에서 이메일을 보낼거라 이 부분을 체크해두었다. 

 

2. Brevo에서 이메일 템플릿 생성

Brevo 대시보드 이동

Brevo 대시보드에서 Campaigns > Templates로 이동. 오른쪽 위에 있는 Create Template을 클릭한다.

 

 

새 이메일 템플릿 생성

기존 디자인 샘플 중 마음에 드는 것을 골라서 이메일 템플릿을 만든다. 드래그 앤 드랍 방식이고 편집기 기능도 친절한 편이다. 이메일 내용에 다음과 같은 로그인 링크를 포함한다. 

<a href="{{params.login_url}}" style="background-color:#4CAF50;color:white;padding:10px 20px;text-decoration:none;">Login Now</a>

 

 

{{params.login_url}}는 Bubble에서 동적으로 전달되는 매직 링크를 위한 자리 표시이다. 

 

나는 가장 심플한 기본 타입을 선택해서 아래 이미지와 같이 템플릿을 만들었다. 위의 링크는 버튼으로 심어두었다. (위의 코드를 넣으면 바로 버튼이 만들어진다)

Brevo에서 이메일 템플릿 만들기

 

 

템플릿 저장 및 활성화

템플릿을 저장한 후 Template ID를 확인한다. Template ID는 템플릿 리스트에서 각 템플릿 타이틀밑에 #다음에 붙어있는 번호다. 이 번호는 Bubble에서 이메일을 보낼때 입력해야한다. 예를들어 아래 이미지의 body 부분의 끝에 템플릿 아이디를 입력한다. 

 

3. Bubble에서 Brevo로 이메일 발송

Brevo 플러그인 설정 및 API 연결

아래 이미지와 같은 플러그인을 bubble에서 설정한다음, Brevo에서 생성한 API 키값을 가져와서, 플러그인 페이지의 하단 박스에 입력한다. API 키값이 제대로 동작하려면 Brevo에서 이메일을 보낼 도메인 등록을 먼저 진행하고 인증해야한다. 

 

Bubble의 Brevo 플러그인

 

플러그인 페이지 하단의 박스 부분에 Brevo에서 발급받은 API키값을 입력한다.

 

Bubble에서 Brevo 템플릿 활용

Bubble 워크플로에서 Send Email 액션 추가.

Body 부분에 Dynamic Data 삽입하고 Brevo의 템플릿 ID를 호출.

Bubble에서 Sendinblue로 이메일 보내기 설정

 

이미 Brevo 템플릿에서 제목, 보내는 사람 이메일, 내용들을 작성해두었기때문에 Bubble의 body에 들어갈 JSON은 아래처럼 간단히 해도 된다. 

{
  "to": [
    {
      "email": "user@example.com"
    }
  ],
  "params": {
    "login_url": "Result of Step 1's Send Magic Login Link"
  },
  "templateId": 10
}

 

4. 이메일 템플릿 테스트

 

Bubble에서 테스트 실행

사용자가 이메일 입력 후 버튼을 클릭하면 매직 링크가 생성되어 Brevo API로 전송.

 

로그인 여부& 로그인 상태로 리다이렉트 되는지 확인하기

이메일에서 "Login Now" 버튼을 클릭 시 Bubble 앱에 로그인 상태로 리다이렉트되는지 확인.

 

링크 유효 기간이 만료되는 경우 적절한 오류 페이지를 표시하는 리다이렉트 설정도 필요한데, 이 부분은 추후 이글에 덧붙여 보기로 한다. 

 

--

도움이 될 참고글.

 

2024.04.17 - [explore] - 스티비, 메일침프가 비싸다면? Brevo(구 Sendinblue)로 하루 300개까지 무료로 이메일 보내기

스티비, 메일침프가 비싸다면? Brevo(구 Sendinblue)로 하루 300개까지 무료로 이메일 보내기

2024.05.04 - [explore] - Brevo(구 Sendinblue)로 bubble.io에 자동 이메일 세팅하기

Brevo(구 Sendinblue)로 bubble.io에 자동 이메일 세팅하기