AWS Amplifyを使用した爆速バックエンド構築[認証/Auth編]
概要
この記事は以下の連続した記事の2本目です。 細かい説明や背景などは以前の記事を参照してください。
この記事では以前作成したReactアプリケーションに認証機能を追加してきます。
認証機能について
Amplifyでは認証機能をCognitoを使用して提供しています。
詳細はCognitoの公式を調べていただきたいですがCognitoでは様々な機能が搭載されています。 今回はその中でもAmplifyの用意したデフォルトの最低限の認証機能を使用していきます。
- IAMによる認可機能
- MFA機能OFF
- パスワードポリシー
- 最低8文字
- 必須文字種なし
- 登録に必要なパラメータ
- Eメールアドレス
- ユーザ名でログイン
- 登録時にメールアドレスの確認
認証機能構築
$ amplify add auth Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? Default configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Username Do you want to configure advanced settings? Yes, I want to make some additional changes. Warning: you will not be able to edit these selections. What attributes are required for signing up? Email Do you want to enable any of the following capabilities? Successfully added auth resource reacttutorial1b2d47db locally Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud $ amplify push ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev ┌──────────┬───────────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼───────────────────────┼───────────┼───────────────────┤ │ Auth │ reacttutorial1b2d47db │ Create │ awscloudformation │ └──────────┴───────────────────────┴───────────┴───────────────────┘ ? Are you sure you want to continue? Yes ⠇ Updating resources in the cloud. This may take a few minutes... ~~ 略 ~~ ✔ All resources are updated in the cloud
上記手順を実行するとCognitoコンソールのユーザプールからユーザプールが作成されていることが確認できます。
細かいパラメータの変更が必要な場合は一つ目の対話で Default configuration
以外を選択することで可能になります。
フロントエンド実装
以下の機能を実装しました。
- 未ログインの場合、ログイン画面を表示
- 必須項目の入力画面を備えたサインアップ画面
- ログイン後にゲーム画面の表示
- ゲーム画面にサインアウトボタン
- ゲーム画面にユーザ情報表示
各種画面は @aws-amplify/ui-react
の物を使用しています。
最終的なコードはここ (GitHubリポジトリ)を参照してください。
公式サイトを参照して実装しています。
動作確認
構築した資材をmasterブランチにマージし、AmplifyコンソールからCI/CDが修了したことを確認して動作確認を行います。
フロントにアクセスし、ログイン画面を確認する。
新規登録へのリンクをクリックし、サインアップ画面を確認。
サインアップし、メールアドレス宛に認証コードが届くことを確認。
Game画面が表示され、自身のユーザ名が表示されていることを確認。
ログアウト/ログインができることを確認。
Cognitoにユーザが追加されていることを確認。
最後に
無事に、認証機能をReactチュートリアルに追加することができました!
ただ、Amplifyは簡単に構築できたのですが、Reactはかなり苦戦してしまいました。。。
次回はAPIを使用したGameの進行状況の保存を試してみたいと思います。