Cognitoユーザー認証をAmplifyとReactを使って実装する。blog50歳からのクラウドへの挑戦Cognitoユーザー認証をAmplifyとReactを使って実装する。不特定多数のUserにServiceを提供する場合は、特段のユーザー認証は必要ありませんが、不特定多数のUserからAccessを無制限に受け付けてしまうと、意図しないFileがUploadされたり、意図しない情報漏洩が起きたり、と問題となることが考えられます。Onlyとし、認証された特定多数のUserに対し、FileのUploadや、特定の情報を開示するようにすることが必要になります。Base(DB)を使って管理するのが一般的です。Serviceを24時間提供しようとすると、24時間User管理のDBを稼働させておく必要があります。AWSには、CognitoというUser管理Serviceがあり、これを利用すれば自前でUser管理用のDBを稼働させておく必要がなくなります。SourceのLibraryがあり、Client側の実装を簡単に実現できてしまいます。発展途上の感はありますが、これを使ってユーザー認証を実装してCognitoの使い方を把握していきます。configureを実行すると、Server側も設定してくれます。Serviceを運用する側からすると、裏で何が起こっているのか分からないのは気持ちが悪く、Server側の設定は全て把握しておきたい所です。今回は、Server側の設定は手作業で行います。最終的にはScriptにしてDeployの自動化を目指すことになりますが、今はAWSに必要な設定を理解することに主眼を置きます。今回は、特定のユーザーにのみServiceを公開する、という前提で、Eメールでの認証をせず、管理者が手動で認証する方式にします。Poolを作成していきます。ConsoleからCognitoを開きます。「ユーザープールの管理」をクリックして、ユーザープール作成画面に移ります。「ユーザープールを作成する」をクリックして、ユーザープールを作成する画面、名前タブに移ります。「名前」タブでは、「プール名」を入力して、「ステップに従って設定する」をクリックします。「属性」タブに移ったら、「エンドユーザーをどのようにサインインさせますか」では、「ユーザー名」を選択、「どの標準属性が必要ですか?」では、全ての項目のチェックを外します。「カスタム属性を追加しますか」では、「カスタム属性の追加」をクリックして、カスタム属性を追加しておきます。今回は「group」という属性を追加し、変更可能のチェックを外しました。「次のステップ」をクリックします。「ポリシー」タブでは、「パスワードの強度はどれくらいを要求しますか?」は、希望のパスワード強度を設定します。今回は「特殊文字を要求する」のチェックを外しました。「ユーザーに自己サインアップを許可しますか?」は、「ユーザーに自己サインアップを許可する」のチェックのままにします。「有効期限(日数)」は「7」のままにして、「次のステップ」をクリックします。「MFAそして確認」タブ、「メッセージのカスタマイズ」タブは、Eメールを使わないので内容は変更せず「次のステップ」をクリックしていきます。「次のステップ」をクリックします。「デバイス」タブは変更せず、「次のステップ」をクリックします。「アプリクライアント」タブでは、アプリクライアントの設定を行います。このアプリクライアントの情報をAmplifyで使用して、Cognitoのユーザー認証を行うことになります。「アプリクライアント名」を設定して、「クライアントシークレットを作成」のチェックを外し、あとは変更せず、「アプリクライアントの作成」をクリックします。「このユーザープールへのアクセス権限があるアプリクライアントはどれですか?」では、内容を確認して「次のステップ」をクリックします。「トリガー」タブは変更せず、「次のステップ」をクリックします。「確認」タブで内容を確認して、「プールの作成」をクリックします。「ユーザープールは正常に作成されました。」と表示されるので、その下の「プールID」を確認します。Identityの作成時と、Amplifyの設定で使用します。左側の「アプリクライアント」をクリックして、「アプリクライアントID」を確認します。「詳細を表示」をクリックして詳細も確認します。Identityの作成時と、Amplifyの設定で使用します。「シークレットキーなし」になっていることを確認します。Poolが空であることを確認しておきます。Poolの作成が完了しました。コメントをキャンセルコメントを投稿するにはログインしてください。Hostingをする。Cognitoユーザー認証をAmplifyとReactを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。(その1)Cognitoユーザー認証をAmplifyとReactを使って実装する。