拝啓
JavaScriptでCognitoしたかった！
前提
以下の準備ができている。
手順
作業前に一度以下のコマンドを実行してみる。最初は以下のように票がヘッダーだけで何も表示されない。
>amplify status
Current Environment: dev
┌─────┬───────┬──────┬────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
└─────┴───────┴──────┴────────┘
次にCognitoの認証機能を試したいので以下のコマンドを実行してみる。
Do you want to use the default authentication and security configuration?
よくわかっていません。3種類ありましたが今回は”Default configuration”にしました。
How do you want users to be able to sign in?
サインインするのに必要なIDを何にするかだと思っています。ユーザ名以外にメールなど５種類ほどあったかと。
Do you want to configure advanced settings?
これまたよくわかっていません。無難に”No, I am done.”を選びました。
>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? No, I am done.
✓ Successfully added auth resource samplea04c758d 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
次に最初に実行したコマンドを再度実行すると、”Auth”が追加されています。
>amplify status
Current Environment: dev
┌─────┬────────┬─────┬──────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├─────┼────────┼─────┼──────────┤
│ Auth │ samplea04c758d │ Create │ awscloudformation │
└─────┴────────┴─────┴──────────┘
以下のコマンドを実行してAWS環境に上記の設定が反映されるようになり、Cognito ユーザプールが作成されます。
>amplify push備考
VueJSでは以下のモジュールをインストールしてCognitoによる認証機能を実装できます。
npm install aws-amplify @aws-amplify/ui-vue @aws-amplify/auth @aws-amplify/core