Cognito+Lambda+DynamoDB+S3로 만드는 싱글 페이지 같은 애플리케이션

GitHub URL

샘플

Cognito에서의 로그인에서 각종 AWS 서비스 연계를 시도하고 싶었기 때문에 싱글 페이지 애플리케이션(※)의 샘플을 만들어 보았습니다.
※로그인(과 유저 작성)은 분리되어 있으므로, 싱글이 아니다
비망 기사입니다만, 뭔가의 참고가 되면 기쁘다.

이미지로는 ↓ 같은 느낌.


화면 디자인은 Materialize라는 CSS 프레임 워크를 사용하고 있습니다.
ht tp // 마테리아 아제 css. 코m/

샘플 내용

사용자 작성, 로그인을 Cognito로 실시해, 로그인 후에 APIGateway 경유로 Lambda를 킥해 DynamoDB를 CRUD한다.
사용자 작성시의 인증은 email로 인증 번호를 송부하는 형태로 실시합니다.
왼쪽이 로그인 화면, 오른쪽이 메인 페이지

사용 중인 AWS 서비스

Amazon Cognito:
인증, 사용자 작성 등

AWS Lambda:
DynamoDB에 액세스

Amazon API Gateway:
Lambda WebAPI

Amazon DynamoDB:
사용자 데이터 및 다양한 데이터 저장

Amazon S3:
페이지 게시 용

참고로 한 사이트

Cognito JavaScript 공식 가이드
JavaScript에서 Cognito 코드 인증 흐름을 구현한 요약
Amazon Cognito User Pools를 사용하여 웹 사이트에 사용자 인증 인프라 만들기
cognito를 사용하여 로그인 화면을 만들어 보았습니다!
amazon-cognito-identity-js가 세션 정보를 sessionStorage에 저장할 수 있습니다.
APIGateWay+Lambda+DynamoDB

필요한 라이브러리

· jquery
· AWS 관련
htps : // 기주 b. 코 m / 아 ws / 아 ws - sdk js
htps : // 기주 b. 코 m / 아 ws / 아마 젠 - 코 g와 js
htps : // 기주 b. 코 m / 아 ws / 아마 존 - 코 g와 어울리는 thjs
htps : // 기주 b. 코 m / 아 ws / 아마 젠 - 코 g와 토이 덴치 ty-js
·이 외에도 WebAPI 용 JS (Amazon API Gateway 콘솔에서 가져 오기)

·Materialize(CSS 프레임워크)
ht tp // 마테리아 아제 css. 코m/

사용방법

Materialize 라이브러리를 [_resource/css], [_resource/fonts], [_resource/js]에 넣습니다.

JS 관계 라이브러리를 [_resource/js]에 넣습니다.

config.js에 cognito 관련 설정 설명

APIGateway WebAPI를 작성한 후 API 용 JS 파일 [api-gateway]을 [_resource/js/]에 배치

[index.js] 64 행에서 APIgateway의 API 호출 처리 등을 설명합니다.

AWS 관련으로 막힌 곳

Amazon Cognito
· IAM의 롤로 인증 전 [Unauth]와 인증 완료 [Auth]의 롤이 추가된다. 이번에는 후자에게 APIGateway 권한 추가
· cognito 세션이 남는 문제 (참고 사이트 참조)

Amazon API Gateway
・Cognito와의 제휴는 [API] > [오소라이저]에서 Cognitoo 사용자 풀을 추가 후
API 인증 설정에서 추가한 권한 부여자 선택
· IAM의 역할에 권한을 줄 때 서비스 선택에서 [API Gateway] 대신 [ExecuteAPI]를 선택합니다.

Amazon S3
・정적 웹사이트의 호스팅을 ON으로 하는 & 공개 설정을 실시한다