CloudFront + S3 + Cognitoでサインイン画面を作成する
「CloudFront + S3でReactのSPAを作成する」でCloudFront + S3の構成は確認しました。今回はさらにCognitoでサインイン画面を付け加えたいと思います。
サインイン画面はAWSのCognitoでユーザプールを作成して実現することができます。
ユーザープールを作成する
「ユーザープールを作成する」をクリックします。
「ステップに従って設定する」をクリックします。
「ユーザー名」でサインインするようにします。
標準属性は「email」にチェックを入れます。「次のステップ」をクリックします。
パスワードの強度はデフォルトのまま「次のステップ」をクリックします。
多要素認証(MFA)は無効にします。新規ロール名も作成せず、そのまま「次のステップ」をクリックします。
「検証タイプ」は「コード」にします。「次のステップ」をクリックします。
「次のステップ」をクリックします。
「次のステップ」をクリックします。
「アプリクライアント名」に適当な名前を入力します。
「クライアントシークレットを作成」のチェックを外します。
「アプリクライアントの作成」をクリックします。
「次のステップ」をクリックします。
「次のステップ」をクリックします。
「プールの作成」をクリックします。
「プールID」は後で使用するので、控えておきます。これで、ユーザープールの作成は完了です。
フェデレーティッドアイデンティティで、IDプールを作成する
次にIDプールを作成します。
ここでは、IDプール名は「my_app_name」とします。
認証プロバイダは「Cognito」とし、ユーザープールID、アプリクライアントIDを入力します。※ユーザープール作成時に表示されています
「プールの作成」をクリックします。
「許可」をクリックします。これで、IDプールの作成が完了です。
サンプルコードが表示されますが、今回は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が格納されています。
ユーザの作成をする
ユーザープールからユーザの作成はできますが、ステータスが「FORCE_CHANGE_PASSWORD」になってしまいます。
この状態だと、サインアップ画面を作成して、「CONFIRMED」に変更しないといけないので、AWS CLIコマンドよりユーザー作成します。
$ aws cognito-idp sign-up --client-id ＜作成したClientId＞ --username user01 --password 00000000 --user-attributes $ aws cognito-idp admin-confirm-sign-up --user-pool-id ＜作成したPoolId＞ --username user01
これで、サインイン画面のみでCognito連携が確認できます。
「An error occurred (NotAuthorizedException) when calling the SignUp operation」エラーが出る場合は、「AWS Cognitoでユーザー作成時に「An error occurred (NotAuthorizedException) when calling the SignUp operation」エラー」を参照ください。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント