패스워드(비밀번호) 재설정 기능 설정하는 방법

회원가입 기능을 구현할 때 빠져서는 안 되는 것이 있죠. 바로 비밀번호 재설정 기능입니다.

실제로 서비스를 운영하면 CS에서 가장 자주 받는 문의 중의 하나가 바로 비밀번호 재설정 요청입니다.

버블에서는 자체적으로 비밀번호 재설정 기능을 제공하고 있어서 이를 이용하면 매우 간편하게 유저가 스스로 비밀번호를 되찾는 시스템을 구축할 수 있습니다. 자 그럼 시작해볼까요?

 

1. 비밀번호 재설정 페이지 만들기

새 페이지를 하나 추가하고 다음 이미지처럼 Input요소와 버튼 요소가 포함된 비밀번호 재설정 안내 페이지를 만들어주세요.

 

2. 비밀번호 재설정 메일 보내기 워크플로우 설정

워크플로우로 이동해 확인 버튼 클릭을 트리거로 한 뒤 'Account - Send password reset email' 액션을 지정해주세요.

Email에는 Input 이메일 요소의 밸류값으로 지정해주세요. 이 메일로 비밀번호 재설정 안내 메일이 전송됩니다.

Subject는 메일의 제목입니다. 원하시는 대로 기재해주세요.

Body는 메일의 본문입니다. 본문의 구조는 '안내 문구 - 재설정 링크'로 구축되는데 여기서 재설정 링크는 자동으로 들어가기 때문에 안내 문구를 알맞게 기재해주세요.

 

3. 메일 전송 확인 팝업 (선택)

페이지에 팝업을 하나 추가하고 메일 전송이 완료됐다는 안내 내용을 적어주세요.

워크플로우에서 'Send password reset email' 다음에 'Element Actions - All element - Show' 액션을 추가하시고 메일 전송 확인 팝업을 선택해주세요. (팝업 닫기 워크플로우도 지정해주시는 센스!)

팝업을 보여주는 것은 필수는 아닙니다.

다만 이렇게 하면 유저가 이메일이 전송됐다는 걸 알 수 있기 때문에 더 좋은 UX를 제공할 수 있게 됩니다.

 

 

4. 재설정 링크 문구 변경 (선택)

메일의 본문에 첨부되는 재설정 링크의 경우 언어 설정을 한국어로 해놓으셨다면 기본적으로 '여기서 재설정'이라고 나옵니다.

만약 이 문구가 마음에 들지 않는다면 바꿀 수 있는데요.

에디터의 Settings 탭으로 이동해주세요.

Language에서 스크롤을 내려 'Core - Reset here'를 찾으신 뒤 원하시는대로 문구를 변경해주세요.

이 역시 필수는 아니지만 좀더 부드러운 문구로 바꾸면 마찬가지로 더 좋은 UX를 제공할 수 있습니다.

 

 

5. 비밀번호 재설정 안내 메일 수신 확인 테스트

만드신 비밀번호 재설정 페이지에서 테스트를 진행해주세요.

미리 테스트 계정을 가입하시고 가입한 계정 이메일을 입력하시면 됩니다.

가입되지 않은 이메일을 입력하실 경우 이메일이 전송되지 않으니 주의해주세요.

모두 제대로 설정하셨다면 다음 그림처럼 메일이 오게 됩니다.

 

 

6. 비밀번호 재설정 페이지

5에서 '비밀번호 재설정' 링크를 클릭하면 버블에서 미리 구축된 reset_pw 페이지로 이동하게 됩니다.

기본적으로 다음 그림과 같이 만들어져 있습니다.

이미지의 상단 주소창을 보시면 파라미터가 ?reset=유니크ID 구조로 되어 있는 것을 볼 수 있는데요.

계정의 고유 ID값을 파라미터로 전송해 이를 트리거로 비밀번호를 재설정하는 시스템입니다.

이런 구조적인 내용을 파악하시면 버블의 기능을 구현하는 이해도를 높일 수 있으니 놓치지 마세요!

 

7. 비밀번호 재설정 워크플로우 설정

에디터에서 'reset_pw' 페이지로 이동해주세요.

이 페이지는 앱을 만들 때 기본적으로 설정되는 페이지인데요.

그래서 페이지를 삭제하거나 페이지명을 변경할 수 없다는 점 유의해주세요.

버튼 클릭을 트리거로 해서 'Accout - Reset password' 액션을 추가해주세요.

다음 그림을 보시면 아시겠지만 반드시 '패스워드', '패스워드 확인' 2개의 인풋이 필요합니다.

여기까지만 하셔도 비밀번호는 자동으로 잘 변경됩니다.

그러나 유저의 UX를 생각하면 비밀번호 변경 성공 안내 팝업을 띄우거나 아래 이미지처럼 홈으로 이동시키는 게 좋겠죠?