CloudFront + S3 + Cognitoでサインイン画面を作成する

CloudFront + S3 + Cognitoでサインイン画面を作成する

CloudFront + S3でReactのSPAを作成する」でCloudFront + S3の構成は確認しました。今回はさらにCognitoでサインイン画面を付け加えたいと思います。

サインイン画面はAWSのCognitoでユーザプールを作成して実現することができます。

ユーザープールを作成する

CloudFront + S3 + Cognitoでサインイン画面を作成する

「ユーザープールを作成する」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「ステップに従って設定する」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「ユーザー名」でサインインするようにします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

標準属性は「email」にチェックを入れます。「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

パスワードの強度はデフォルトのまま「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

多要素認証(MFA)は無効にします。新規ロール名も作成せず、そのまま「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「検証タイプ」は「コード」にします。「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「アプリクライアント名」に適当な名前を入力します。

「クライアントシークレットを作成」のチェックを外します。

「アプリクライアントの作成」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「次のステップ」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「プールの作成」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「プールID」は後で使用するので、控えておきます。これで、ユーザープールの作成は完了です。

フェデレーティッドアイデンティティで、IDプールを作成する

次にIDプールを作成します。

CloudFront + S3 + Cognitoでサインイン画面を作成する

ここでは、IDプール名は「my_app_name」とします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

認証プロバイダは「Cognito」とし、ユーザープールID、アプリクライアントIDを入力します。※ユーザープール作成時に表示されています

「プールの作成」をクリックします。

CloudFront + S3 + Cognitoでサインイン画面を作成する

「許可」をクリックします。これで、IDプールの作成が完了です。

CloudFront + S3 + Cognitoでサインイン画面を作成する

サンプルコードが表示されますが、今回はJSのサンプルコードを表示します。これをコピーしてサインイン画面で使用します。

サインイン画面を作成する

index.htmlやjsはS3に配置します。が、今回は便宜上Webサーバに配置します。

必要なライブラリ

  • aws-cognito-sdk.js
  • amazon-cognito-identity.js
  • aws-sdk.js

amazon-cognito-identity-jsではaws-cognito-sdk.jsが格納されています。

aws-amplifyをダウンロードし、この中にamazon-cognito-identity.jsが格納されています。

AWSマネジメントコンソールのフェデレーティッドアイデンティティより、AWS SDK のダウンロードします。

この中にawk-sdk.jsが格納されています。

ユーザの作成をする

CloudFront + S3 + Cognitoでサインイン画面を作成する

ユーザープールからユーザの作成はできますが、ステータスが「FORCE_CHANGE_PASSWORD」になってしまいます。

この状態だと、サインアップ画面を作成して、「CONFIRMED」に変更しないといけないので、AWS CLIコマンドよりユーザー作成します。

これで、サインイン画面のみでCognito連携が確認できます。

「An error occurred (NotAuthorizedException) when calling the SignUp operation」エラーが出る場合は、「AWS Cognitoでユーザー作成時に「An error occurred (NotAuthorizedException) when calling the SignUp operation」エラー」を参照ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA