ヤマムギ

growing hard days.

*

Amazon Cognito User Poolsのデモをしてみました

   


AWS Summit 2016 Tokyoのアップデートおっかけ会をJAWS-UG大阪でやるという事で、AWS Summit Tokyoでの発表ではなかったですが、AWS Summit CicagoのアップデートのCognito User Poolsのデモをしてみました。

環境作りのメモを残させていただきます。

参考(写経?)にさせていただいたサイト様

ありがとうございます!
感謝感謝でございます。

Developers.IO様
[新機能] Amazon Cognito に待望のユーザー認証基盤「User Pools」が追加されました!

horike37様
Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る

Cognito User Poolsの設定

それでは、参考にさせていただきまくってはおりますが、設定手順などを書き残させていただきます。

Cognito-1

マネージメントコンソールからCognitoに行って、[Manage your User Pools]を選択します。

cognito-2

2016/6/19時点ではバージニア北部リージョンでしか使えないので、それ以外のリージョンを選択している場合は、[Switch to US East(Virginia)]ボタンが表示されるので押します。

Cognito-3

無事、バージニア北部リージョンに切り替わったら[Create a User Pool]を押してUser Poolの作成を開始します。

Cognito-4

Poolの名前を設定します。

Cognito-5

サインアップの際に必須にしたいユーザー属性(複数可)を選びます。
カスタム属性を作成する事も出来ます。

Cognito-6

パスワードポリシーを設定します。
最低文字数、数字、記号、大文字、小文字を含めるかを決めます。

Cognito-7

他要素認証を設定するかを決めます。
属性でEメールのみとしているので電話は設定出来なかった?ようです。
電話での認証もまた試してみますが、Verificationでメールでコードが飛ぶようにだけ、そのままの設定にしておきます。

Cognito-8

アプリの名前を設定します。

Cognito-9

設定内容が表示されるので確認して作成します。

Identity Poolの作成

続いて[Manage Federated Identities]-[Create new Identity pool]を押してIdentity poolを作成します。

Cognito-B-1

  • Identity poolの名前を設定します。
  • (今回はDEMO用のWebクライアントから使うので)「Enabale access to unauthenticated identities」にチェックを入れます。
  • Authentication providersで[Cognito]を選択します。
  • User Pool ID , App Client IDにCognito User Poolsで生成したそれぞれのIDを設定します。

Cognito-B-2

ロールはデフォルトのままで新規作成します。

デモ用Webクライアント

とりあえずDemoなのでindex.htmlに全部まとめてしまいました。

コード全部はGitHubに置いてますのでこちらをご参照ください。
GitHub – CognitoUserPoolsDemoWebClient

準備

amazon-cognito-identity-jsを使わせていただきます。

amazon-cognito-identity-jsのSetupに書いてますが、じゃっかん戸惑いましたので記載します。

あと、Demoなのでライブラリは全部index.htmlと同じディレクトリに置いてます。

  1. aws-sdk.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。ついでにaws-cognito-sdk.jsも。

  2. jqueryを落として置くか、どこかから読み込むかします。

  3. RSA and ECC in JavaScriptからjsbn.jsとjsbn2.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。

  4. Stanford JavaScript Crypto Libraryは[compile new version]を使うとログインのところでエラーとなるのでsjcl.js.zipをダウンロードしてindex.htmlと同じディレクトリに配置しました。

  5. moment.jsをダウンロードしてindex.htmlと同じディレクトリに配置します。

共通のん

  • configにリージョンとIdentity poolのIDを設定しています。
  • poolData にUser Poolで生成したUser poolのIDとクライアントIDを設定しています。

サインアップ

slide-5

slide-6

サインアップするとVerificationの設定のとおり、メールが届きます。

slide-8

この時点ではまだ「Unconfirmed」です。

アクティベーション

slide-7

slide-9

「Confirmed」になりました。

ログイン

slide-10

slide-11

ログイン成功です!!!

@yamamanx

開発ベンダー5年、ユーザ企業システム部門通算9年、ITトレーナー1年目のSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

 - AWS , ,

ad

ad

  関連記事

Amazon Rekognitionでイベント参加者の顔写真を解析して似ている人ランキングをその場で作る

2017/9/21に開催されたAWS Cloud Roadshow 2017 大 …

リザーブドインスタンスはじめました

このブログも2014年9月にはじめたので、もうすぐ3年。 1件~17件とばらつき …

AWS Step Functions まずはパラレルでLambdaを並列実行してみました

複数のlambdaの実行制御をLambdaでやってましたが、その部分をStep …

JAWS DAYS 2018 「Cost-Driven AWS クラウドアーキテクチャデザインとコスト最適化方法 – Cost-Driven AWS Cloud Architecture Design : The Lean Startup on AWS」を聞きました

以下は、思ったことや気になったことをメモしていますので、必ずしも登壇者の発表内容 …

JAWS FESTA 2017 Reverse X re:Birth

JAWS FESTA 2017 中四国 今年はブログタイトル「JAWS FEST …

AWS Summit 2017 Tokyo Day2 開場~基調講演

昨年に引き続き今年もAWS Summit Tokyoへ行ってきました。 朝一の新 …

AWS EC2 Amazon Linuxにmauticをインストールする(Sendgrid, Nginx, MySQL on RDS)

mauticをAmazon LinuxとNginx,MySQL on RDSにイ …

[JapanTaxi] Athena 指向アナリティクス 〜真面目に手を抜き価値を得よ〜(AWS Summit Tokyo 2017)を聞いてきました

Athenaのユースケースとして聞きにいきましたが、最近触ってるRe:dashも …

「X-Tech JAWS 【第2回】~9割のX-Techと1割の優しさで切り拓く未来~」に行ってきました

「X-Tech JAWS 【第2回】~9割のX-Techと1割の優しさで切り拓く …

「JAWS-UG Osaka 第22回勉強会 東西の中の人が語る!!! Microservices × Serverless On AWS」で運営と懇親会LTをしてきました

「JAWS-UG Osaka 第22回勉強会 東西の中の人が語る!!! Micr …