Cognito+Lambda+DynamoDB+S3で作るシングルページっぽいアプリケーション

GihHub URL

https://github.com/katsushi-machida/cognito_lambda_dynamo_sample

サンプル

Cognitoでのログインからの各種AWSサービス連携を試したかったのでシングルページアプリケーション(※)のサンプルを作ってみました。
※ログイン(とユーザー作成)は分離しているので、シングルではない
備忘記事ですが、何かの参考になると嬉しい。

イメージとしては↓のような感じ。
image.jpg

画面デザインはMaterializeというCSSフレームワーク使っています。
http://materializecss.com/
materialize.jpg

サンプルの内容

ユーザー作成、ログインをCognitoで行い、ログイン後にAPIGateway経由でLambdaをキックしてDynamoDBをCRUDする。
ユーザー作成時の認証はemailで認証番号を送付する形で行います。
左がログイン画面、右がメインのページ
screen_image.jpg


使用しているAWSのサービス

  • Amazon Cognito: 認証、ユーザー作成等
  • AWS Lambda: DynamoDBへのアクセス
  • Amazon API Gateway: LambdaのWebAPI化
  • Amazon DynamoDB: ユーザーデータ、各種データの格納
  • Amazon S3: ページ公開用

参考にしたサイト様

Cognito JavaScript公式ガイド
JavaScriptで、Cognitoコード認証フローを実装したまとめ
Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る
cognitoを使ってログイン画面を作ってみた!
amazon-cognito-identity-jsがセッション情報をsessionStorageに保存できるようになった
APIGateWay+Lambda+DynamoDB

必要なライブラリ

・jquery
・AWS関連
https://github.com/aws/aws-sdk-js
https://github.com/aws/amazon-cognito-js
https://github.com/aws/amazon-cognito-auth-js
https://github.com/aws/amazon-cognito-identity-js
・上記に加えて、WebAPI用のJS(Amazon API Gatewayのコンソールから取得する)

・Materialize(CSSフレームワーク)
http://materializecss.com/

使用方法

  • 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にする&公開設定を行う

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.