Developers.ioの記事を読んでやってみる「Angular+Cognito」①

対象

• Angular+Cognitoで作るログインページ– ClassmethodサーバーレスAdvent Calendar 2017 #serverless #adventcalendar
• API Gatewayを作るところまで(続きは②で)

目的

• AWS Cognitoを触っていたが、Javascriptがマジでわからず詰まってしまうので、噂の「AWS Amplify」を触ってみる
• AWSの次世代JavaScriptライブラリ「AWS Amplify」の概要とReactアプリに導入する手順 #serverless #adventcalendarの前作業として

やってみる

前提

• 機能を理解するのが目的なので、terraformは使わずにAWSコンソールからポチポチ
• ローカル環境はMac

Cognito User Pool作成

• User Pool作成
• アプリクライアント追加(名前のみであとはデフォルト)
• 作成

ユーザ登録

• ユーザ作成
  • デフォルトのパスワードポリシーは「数字」「英字」「記号」「大文字」を含む8文字以上

ユーザ登録時のエラーっぽいやつ

• 「この新規ユーザーに招待を送信しますか？」にチェックを入れ「SMS」「Eメール」どちらにもチェックしなかったら・・・
• user pool does not have SMS configuration to send messageというエラーが出つつも
• ユーザ自体は作成されている。
• ちなみに正常に登録したユーザはEメールが届いていた
• エラーというかWarning?

API Gateway

• [APIの作成]→[APIの例]→[インポート]
• PetStoreというのが作成される

オーソライザーの作成

• 新しいオーソライザー作成
  • タイプ: Cognito
  • Cognitoユーザプール: 上記で作ったやつ
  • トークンのソース: Authorization
    • リクエストから認証としてCognito User Poolに送信するために選択するヘッダー

認証設定

• [PetStore]→[リソース]→[/petsのGET]
• Cognitoユーザプールオーソライザーが出てこない・・・
• しばらく待って画面をリロードしたら出た(なぜ・・・？)

デプロイ

• deploy(「デプロイ」は英語で書いていくタイプ)
• 動作確認
• [ステージ名]-GETで表示されるURLの呼び出しにアクセスしてみる
• Unauthorizedが表示

感想とかまとめ

• API Gatewayの認証設定で最初Cognitoユーザプールオーソライザーが表示されなかったのなんだったんだ・・・？
• 今回は準備だけだったので、オーソライザーがどのように絡んでくるのか楽しみ
• 時間切れなので、続きは次回やっていく