[인스타그램 클론코딩] 웹 회원가입 구현

[인스타그램 클론코딩] 웹 로그인 구조, [인스타그램 클론코딩] AuthContext 포스트의 내용을 바탕으로 실제 회원가입을 구현해 봅시다.

회원가입은 userName(ID), 이메일, 성, 이름, 패스워드를 입력받고, 이메일로 인증 코드를 전송해 확인하는 방식으로 진행됩니다.

 

인스타그램 클론코딩 웹 회원가입

Auth 컴포넌트는 action 상태에 따라 로그인(logIn), 회원가입(signUp), 인증코드 확인(confirm) 화면을 표시하는 컴포넌트입니다. 이번에는 action 상태가 회원가입과 인증코드 확인일 때 어떻게 작동하는지 알아보겠습니다.

AuthContainer.js

Auth 컴포넌트의 데이터 처리를 담당합니다.

보기 편하게 오류 처리 코드와 회원가입, 인증코드 확인과 관련 없는 코드는 제외했습니다. 전체 코드는 제 github에서 확인할 수 있습니다.

Amplify 초기화 포스트에서 언급했다시피 정말 간단하게 구현할 수 있습니다.

위의 동영상에 나온 것처럼 Sign up 버튼과 Confirm 버튼을 클릭하면 아래 onSubmit 핸들러가 실행됩니다.

사용자 정보 전송

Sign up 버튼을 클릭했을 때 실행되는 명령어는 단 두 개입니다.

Auth.signUp 메소드로 사용자 정보를 Cognito에 전송합니다. 이 정보들은 [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수에 의해 백엔드와 연결된 데이터베이스에 복제될 것입니다.

패스워드와 userName(ID와 동일한 개념)만 따로 입력해 주고, 나머지 속성은 attributes 객체에 담아서 전송해 주면 됩니다.

만약 Cognito에서 이메일로 로그인하도록 설정했다면 username 매개변수에 이메일을 입력해 주어야 합니다.

그리고 Auth.signUp 메소드가 실행되면 이메일 주소로 인증 코드가 전송됩니다.

마지막으로 오류가 없다면 action 상태를 "confirm"으로 변경해 줍니다.

그럼 랜더러가 실행되면서 인증코드 확인 화면을 랜더링합니다.

AuthPresenter.js

 

인증코드 전송

사용자가 인증 코드를 입력하고 Confirm 버튼을 누르면 Cognito에 전송하는 코드입니다. 이때 userName을 함께 보내야 합니다.

인증이 완료되면 [인스타그램 클론코딩] 웹 로그인 구현 포스트에서 설명한 것과 같이 Auth.signIn 메소드를 사용하여 Cognito로 부터 토큰을 받을 수 있습니다.

이메일 인증이 필수적인 것은 아니며, Amplify를 초기화할 때 설정할 수 있습니다.

나머지 코드는 인증이 완료되고 로그인을 하고, AuthContext 컴포넌트부터 다시 랜더링하는 코드입니다.

참조: [인스타그램 클론코딩] 웹 로그인 구조

처음에 Auth.signOut 메소드를 실행한 이유는... 설명하면 길어질 것 같아서 생략하겠습니다.

굳이 안써도 되는 코드이기는 합니다.