【React】AWS Amplifyのあれこれ【備忘録】

ReactでAmplifyを使うのですが、苦労して設定しても、英語なので忘れる!
はいということで、こちらにまとめます。ただそれだけ
(日本語訳となんとなくの解説などなど)

開発環境は忘れたヌーン(備忘録なので、適当にReact入れて、試してね)

ちなみに、初期設定は既に終わってる(前にやったけど内容忘れた)ものを使うので、初期設定分はコマンドのみです

amplify update auth

設定の変更を行うためのコマンド

Please note that certain attributes may not be overwritten if you choose to use defaults settings.

You have configured resources that might depend on this Cognito resource.  Updating this Cognito resource could have unintended side effects.
デフォルト設定を使用する場合、特定の属性は上書きされない場合があることに注意してください。

この Cognito リソースに依存する可能性のあるリソースを設定しました。この Cognito リソースを更新すると、予期しない副作用が発生する可能性があります。

はじめの選択肢

Using service: Cognito, provided by: awscloudformation
 What do you want to do? (Use arrow keys)
❯ Apply default configuration without Social Provider (Federation)
  Apply default configuration with Social Provider (Federation)
  Walkthrough all the auth configurations
  Add/Edit signin and signout redirect URIs
  Update OAuth social providers
  Create or update Cognito user pool groups
  Create or update Admin queries API

使用サービス: Cognito、提供元: awscloudformation
何をしますか? (矢印キーを使用)
❯ ソーシャル プロバイダー (フェデレーション) なしでデフォルト設定を適用
ソーシャル プロバイダー (フェデレーション) ありでデフォルト設定を適用
すべての認証設定のウォークスルー
サインインおよびサインアウト リダイレクト URI の追加/編集
OAuth ソーシャル プロバイダーの更新
Cognito ユーザー プール グループの作成または更新
管理クエリ API の作成または更新

一通りの設定は終わっているので、
Walkthrough all the auth configurations
を選択

Walkthrough all the auth configrations

 Select the authentication/authorization services that you want to use: (Use arr
ow keys)
❯ User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Stora
ge features for images or other content, Analytics, and more)
  User Sign-Up & Sign-In only (Best used with a cloud API only)
  I want to learn more.

使用する認証/承認サービスを選択します: (矢印キーを使用)
❯ ユーザー サインアップ、サインイン、AWS IAM コントロールに接続 (画像やその他のコンテンツ、分析などのユーザーごとのストレージ機能を有効にします)
ユーザー サインアップとサインインのみ (クラウド API のみで使用するのが最適です)
詳細を知りたい

  • User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)
    • (ユーザーのサインアップ・サインイン、AWS IAMコントロールと連携(画像やその他のコンテンツのユーザー別ストレージ機能、アナリティクスなどを有効にする))
    • 概要: この選択肢は、ユーザーごとにアクセスコントロールを行うために、CognitoとIAMの統合を使用します。これにより、各ユーザーに対して独自のストレージやアナリティクス機能が提供されます。
    • おすすめ: ユーザーごとにS3のストレージやリソースへのアクセスを制御したい場合、またはアナリティクスデータを活用したい場合は、このオプションを選択します。
  • User Sign-Up & Sign-In only (Best used with a cloud API only)
    • (ユーザーのサインアップ・サインインのみ(クラウドAPIとだけ連携する場合に最適))
    • 概要: ユーザーのサインアップとサインインのみを使用する基本的な認証です。ユーザーに対する特別なアクセスコントロールやIAM統合は含まれていません。
    • おすすめ: シンプルにユーザー認証だけを行いたい、またはバックエンドAPIのアクセスに関しては独自に制御している場合は、このオプションが適しています。IAM統合の必要がないので、設定が簡単で管理が容易です。
  • I want to learn more.
    • (詳細を確認したい)
    • 概要: 詳細な説明を確認するための選択肢です。設定の目的や機能についてさらに知りたい場合に使用します。

User Sign-Up & Sign-In only

Do you want to add User Pool Groups? (Use arrow keys)
Yes
❯ No
I want to learn more.

ユーザー プール グループを追加しますか? (矢印キーを使用)
はい
❯ いいえ
詳細を知りたい。

Do you want to add an admin queries API? (Use arrow keys)
Yes
❯ No
I want to learn more.

管理者クエリ API を追加しますか? (矢印キーを使用)
はい
❯ いいえ
詳細を知りたい。

 Email based user registration/forgot password: (Use arrow keys)
❯ Enabled (Requires per-user email entry at registration)
  Disabled (Uses SMS/TOTP as an alternative)

メールベースのユーザー登録/パスワードを忘れた場合: (矢印キーを使用)
❯ 有効 (登録時にユーザーごとにメールの入力が必要)
無効 (代わりに SMS/TOTP を使用)

 Email based user registration/forgot password: Enabled (Requires per-user email
 entry at registration)
 Specify an email verification subject: Your verification code
 Specify an email verification message: Your verification code is {####}
 Do you want to override the default password policy for this User Pool? Yes
 Enter the minimum password length for this User Pool: 256

メールベースのユーザー登録/パスワードを忘れた場合: 有効 (登録時にユーザーごとのメール入力が必要)
メール確認の件名を指定: 確認コード
メール確認のメッセージを指定: 確認コードは {####} です
このユーザー プールのデフォルトのパスワード ポリシーを上書きしますか? はい
このユーザー プールの最小パスワード長を入力: 256

※基本的に、登録時のままなので、連打でOK

 Select the password character requirements for your userpool: (Press <space> to
 select, <a> to toggle all, <i> to invert selection)
❯ Requires Lowercase
  Requires Uppercase
  Requires Numbers
  Requires Symbols

ユーザープールのパスワード文字要件を選択します: (選択するには スペースを押し、すべてを切り替えるには [a] を押し、選択を反転するには [i] を押します)
❯ 小文字が必要です
大文字が必要です
数字が必要です
記号が必要です

※完了はエンター

 Specify the app's refresh token expiration period (in days): 30

アプリのリフレッシュ トークンの有効期限を指定します (日数): 30

 Do you want to specify the user attributes this app can read and write? (Y/n)

このアプリが読み取りおよび書き込みできるユーザー属性を指定しますか? (Y/n)

 Do you want to enable any of the following capabilities? (Press <space> to sele
ct, <a> to toggle all, <i> to invert selection)
❯◉ Add Google reCaptcha Challenge
 ◯ Email Verification Link with Redirect
 ◯ Add User to Group
 ◯ Email Domain Filtering (denylist)
 ◯ Email Domain Filtering (allowlist)
 ◯ Custom Auth Challenge Flow (basic scaffolding - not for production)
 ◯ Override ID Token Claims

以下の機能のいずれかを有効にしますか? (選択するにはスペース、すべてを切り替えるには [a]、選択を反転するには [i] を押します)
❯ Google reCaptcha チャレンジを追加
リダイレクト付きのメール検証リンク
グループにユーザーを追加
メール ドメイン フィルタリング (拒否リスト)
メール ドメイン フィルタリング (許可リスト)
カスタム認証チャレンジ フロー (基本的なスキャフォールディング – 本番環境向けではありません)
ID トークン クレームをオーバーライド

 Do you want to use an OAuth flow? Yes
 What domain name prefix do you want to use? mfapp2b040d30-2b040d30
 Which redirect signin URIs do you want to edit? (Press <space> to select, <a> t
o toggle all, <i> to invert selection)
❯◯ https://192.168.0.101:3000/signin/

OAuth フローを使用しますか? はい
どのドメイン名プレフィックスを使用しますか? mfapp2b040d30-2b040d30
どのリダイレクト サインイン URI を編集しますか? (選択するにはスペース、すべてを切り替えるには [a]、選択を反転するには [i] を押します)
❯◯ https://192.168.0.101:3000/signin/

Which redirect signin URIs do you want to edit? https://192.168.0.101:3000/sign
in/
? Update https://192.168.0.101:3000/signin/ https://192.168.0.101:3000/signin/
※必ず、繰り返すこと

Do you want to add redirect signin URIs? (Y/n)

リダイレクトサインインURLを追加しますか?

Which redirect signout URIs do you want to edit? https://192.168.0.101:3000/sig
nout/
? Update https://192.168.0.101:3000/signout/ https://192.168.0.101:3000/signout/
Do you want to add redirect signout URIs? No
流れは同じなので、割愛

Select the OAuth flows enabled for this project. (Use arrow keys)
❯ Authorization code grant
Implicit grant

このプロジェクトで有効になっている OAuth フローを選択します。(矢印キーを使用)
❯ 認証コード付与
暗黙的付与

 Select the OAuth scopes enabled for this project. (Press <space> to select, <a>
 to toggle all, <i> to invert selection)
❯◉ Phone
 ◉ Email
 ◉ OpenID
 ◯ Profile
 ◉ aws.cognito.signin.user.admin

このプロジェクトで有効になっている OAuth スコープを選択します。
❯◉ 電話
◉ メール
◉ OpenID
◯ プロファイル
◉ aws.cognito.signin.user.admin

 Select the identity providers you want to configure for your user pool: Google

 You've opted to allow users to authenticate via Google.  If you haven't already
, you'll need to go to https://developers.google.com/identity and create an App
ID.

 Enter your Google Web Client ID for your OAuth flow:

ユーザー プールに設定する ID プロバイダーを選択します: Google

ユーザーが Google 経由で認証できるように選択しました。まだ行っていない場合は、https://developers.google.com/identity にアクセスして App ID を作成する必要があります。

OAuth フローの Google Web クライアント ID を入力します:

Enter your Google Web Client Secret for your OAuth flow:

OAuth フローの Google Web クライアント シークレットを入力します。

Warning! Your existing IdentityPool:identitypoolName will be deleted upon the next “amplify push”!
? Do you want to configure Lambda Triggers for Cognito? No
Successfully updated the Cognito trigger locally
Successfully updated the Cognito trigger locally
Successfully updated the Cognito trigger locally
✅ Successfully updated auth resource *************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

⚠️ You have enabled SMS based auth workflow. Verify your SNS account mode in the SNS console: https://console.aws.amazon.com/sns/v3/home#/mobile/text-messaging
If your account is in “Sandbox” mode, you can only send SMS messages to verified recipient phone numbers.

✅ Successfully updated resource update 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

とりあえず、これで設定は終わったので、Pushして反映しましょう

コメントを残す

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