사용자 인증이 가능한 서버리스 웹 어플리케이션 구축 (2) AWS Cognito 구축

1편: AWS Amplify를 활용한 정적 웹 사이트 호스팅

https://cumulus.tistory.com/16

사용자 인증이 가능한 서버리스 웹 어플리케이션 구성도

구성도에서 AWS Cognito의 역할

- 이 프로젝트에서는 회원 가입 및 로그인 페이지의 백엔드로써 AWS Cognito의 User Pool을 사용한다.

1. 사용자가 회원 가입 신청을 하면 AWS Cognito에서 확인 코드가 담긴 이메일을 해당 주소로 보내준다.

2. 사용자가 확인 코드를 확인하여 인증을 완료하면 로그인이 가능해진다.

3. 사용자가 로그인할 때 사용자 이름(또는 이메일)과 비밀번호를 입력한다.

4. 사용자가 로그인하면 JavaScript 함수가 AWS Cognito와 통신하여 SRP(Secure Remote Password) 프로토콜로 인증하고, 다시 JWT(JSON Web Token)를 받는다.

 

구축 과정

2. AWS Cognito를 사용하여 로그인 페이지 백엔드 구축

2.1 사용자 풀 생성

Cognito 메인 콘솔에서 사용자 풀 관리로 들어간다.

오른쪽 상단의 사용자 풀 생성을 클릭한다.

사용자 풀 이름을 작성하고 기본값 검토를 클릭한다.

검토를 마치고 사용자 풀을 생성한다.

사용자 풀이 다음과 같이 생성된다.

2.2 사용자 풀에 앱 추가

회원 가입 및 로그인/로그아웃 같은 기능을 외부 프로그램을  통해 제공하려면,  이에 대한 앱 정보(Apps)를 추가해야 합니다

생성한 사용자 풀에서 앱 클라이언트 탭으로 들어간다.

앱 클라이언트를 추가 한다.

앱 클라이언트 이름을 지정하고 보안키 생성을 체크 해제한다.

설정을 위와 같이 마치고 앱 클라이언트를 생성한다.

앱 클라이언트를 생성하면 다음과 같이 앱 클라이언트 ID가 주어진다.

2.3 웹 사이트 Config 파일 업데이트

웹 구성 파일에서 Config 파일에 userPoolId, userPoolClientId, region 값을 넣어준다.

커밋을 진행하고 CodeCommit의 리포지토리에 업로드한다.

2.4 구현 테스트

작동중인 웹 페이지에 접속하여 'GIDDY UP' 버튼을 클릭한다.

회원가입을 진행할 이메일을 적고 비밀번호를 설정한다.

메일함에서 인증코드를 확인한다.

인증코드를 입력하여 인증을 진행한다.

로그인 페이지에서 로그인을 시도한다.

다음과 같이 화면이 출력되면 로그인에 성공한 것이다.

출처

https://aws.amazon.com/ko/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/