React AWS Cognito: 電子メール認証セットアップガイド (前半)

これは 2 部構成のシリーズの最初の部分で、メールベースのユーザー認証に AWS Cognito を使用して React アプリを構築します。パート 1 では必要な AWS 構成のセットアップに焦点を当て、パート 2 では React コードを詳しく見てすべてを結び付けます。

次の AWS サービスと連携します:

• Amazon シンプルメールサービス (SES)
• AWS Cognito

AWS リソースを設定することから始めましょう。

Amazon シンプルメールサービス (SES)

ドメインSES ID

AWS が回避策を提供しているため、テスト目的の場合、SES でのドメイン所有権の確認はオプションです。ただし、運用環境の場合、SES がドメインに代わって電子メールを送信できるようにするには、所有権の確認が不可欠です。

セットアッププロセスは次のとおりです:

1. Amazon Simple Email Service に移動します。
2. アイデンティティを選択します。
3. ID の作成をクリックします。

セットアップでは、「ドメイン」を選択し、例としてdomain.comを使用しました。

• アイデンティティの作成をクリックします。

次に、次のようなページが表示されます。

DNS レコードの公開 セクションに移動し、それらの値を使用してドメイン プロバイダーにレコードを追加します。

ドメイン プロバイダーで DNS レコードが設定されると、次のようにドメインが検証されたことが表示されます。

完了しました。ドメインが認証されました。これにより、SES がお客様に代わってメールを送信できるようになります。 AWS は代替方法を提供しているため、この検証はテストには必要ありませんが、本番環境では不可欠です。

SES ID を電子メールで送信する

認証フローで使用する電子メール アドレスを AWS の「許可リスト」に追加する必要があるため、テストする場合、このステップは重要です。ここでは、メール アドレスを追加して確認します。

次の場所に向かってください:

• Amazon シンプルメールサービス
• アイデンティティ
• アイデンティティの作成

今回は、メールアドレス:

• 確認したいメールアドレスを入力してください。
• アイデンティティの作成をクリックします。

ID が作成されると、検証リンクを含む電子メールが AWS から届きます。必ず受信箱を確認し、そのリンクをクリックしてメールを確認してください。

メールを認証すると、認証済みであることを示すラベルが表示されます。

この時点で、ドメインと電子メールの両方が認証されている必要があります。ドメイン検証はテスト中はオプションですが、運用環境では必須になります。一方、電子メール検証はテストには必要ですが、本番環境には必要ありません。

注: 認証フローの一部として、確認コードがこの電子メール アカウントに送信されます。電子メール アカウントが認証されていない場合、コードは受信されません。

アマゾンコグニート

最後に構成する部分は Cognito です。このサービスではアカウント認証が有効になります。この場合、認証には メール を使用します。仕組みは次のとおりです:

• ユーザーは電子メールとパスワードを使用してアカウントを作成します。
• AWS から送信されたコードを入力して、電子メールを認証します。
• 認証が完了すると、ユーザーは電子メールとパスワードを使用してログインできます。

自分で認証を処理する代わりに、AWS Cognito を活用できます。

次の場所に行きましょう:

注: ほとんどの手順ではデフォルトのオプションを使用するので、カスタムの選択についてのみ説明します。プロジェクトによっては、異なる設定を構成する必要がある場合があります。

• コグニート
• ユーザープールの作成
• ステップ 1: メールを確認します

• ステップ 2: MFA なし を選択します。これはテストには必要ありません。

• ステップ 3: デフォルトのオプションをそのまま使用しました。

• ステップ 4: 確認済みの「送信元メール アドレス」を選択します。

Cognito は、理想的にはドメインから、検証コードを含む電子メールを送信します。そのため、前のセクションでドメインを検証する必要があります。ここでは、AWS が開発に適した 「Cognito でメールを送信する」 オプションを提供していることがわかります。ただし、運用環境では、よりプロフェッショナルで信頼性の高い電子メール送信プロセスのためにドメインが検証されていることを確認する必要があります。

• ステップ 5: プールとクライアント名の追加に加えて、重要な部分は、[アプリ クライアントの詳細設定] を展開し、ALLOW_USER_PASSWORD_AUTH を有効にすることです。この設定により、ユーザーは電子メールとパスワードを使用して認証できるようになります。これは、認証フローに不可欠です。

• ステップ 6: これはレビューのステップであり、ここで編集するものは何もありません。次に進む前に、すべてが良好であることを確認してください。

作成すると、ダッシュボードに次のように表示されます:

それだけです!これで、AWS 上ですべての設定が完了しました。次回の投稿では、React アプリを Cognito に接続し、メールを使用してユーザーを認証する方法を説明します。来週月曜日に公開される投稿を楽しみにしていてください。

以上がReact AWS Cognito: 電子メール認証セットアップガイド (前半)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。