React 単一ページアプリケーションの例を設定する - Amazon Cognito
アプリケーションの作成Lightsail デベロッパー環境を作成する

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

React 単一ページアプリケーションの例を設定する

このチュートリアルでは、ユーザーのサインアップ、確認、サインインをテストできる React 単一ページアプリケーションを作成します。React は、ユーザーインターフェイス (UI) に焦点を当てた、ウェブおよびモバイルアプリ用の JavaScriptベースのライブラリです。このサンプルアプリケーションは、Amazon Cognito ユーザープールのいくつかの基本的な機能を示しています。React を使用したウェブアプリケーション開発の経験がある場合は、 からサンプルアプリケーションをダウンロードします GitHub。

次のスクリーンショットは、作成するアプリケーションの初期認証ページです。

React ベースのサンプルウェブアプリケーションのサインアップページのスクリーンショット。

ユーザープールの作成手順では、サンプルアプリケーションで動作するユーザープールを設定します。以下の要件を満たすユーザープールがある場合は、このステップをスキップできます。

  • ユーザーは E メールアドレスでサインインできます。Cognito ユーザープールのサインインオプション： E メール 。

  • ユーザー名は大文字と小文字を区別しません。ユーザー名の要件 : ユーザー名の大文字と小文字を区別するが選択されていません。

  • 多要素認証 (MFA) は必要ありません。MFA 適用： オプション。 MFA

  • ユーザープールは、E メールメッセージを使用して、ユーザープロファイルの確認の属性を検証します。検証する属性: E メールメッセージを送信し、E メールアドレスを確認します。

  • E メールは唯一の必須属性です。必須属性： E メール 。

  • ユーザーはユーザープールにサインアップできます。自己登録 : 自己登録を有効にするが選択されています。

  • 最初のアプリケーションクライアントは、ユーザー名とパスワードによるサインインを許可するパブリッククライアントです。アプリケーションタイプ : パブリッククライアント 、認証フロー : ALLOW_USER_PASSWORD_AUTH。

新しいユーザープールを作成する

  1. Amazon Cognito コンソールに移動します。プロンプトが表示されたら、 AWS 認証情報を入力します。

  2. ユーザープールの作成ボタンを選択します。このオプションを表示するには、左側のナビゲーションペインからユーザープールを選択する必要があります。

  3. ページの右上隅にある [Create a user pool] (ユーザープールを作成する) を選択して、ユーザープール作成のウィザードを開始します。

  4. サインインエクスペリエンスの設定 では、このユーザープールで使用する ID プロバイダー (IdPs) を選択できます。詳細については、「サードパーティー経由のユーザープールへのサインインの追加」を参照してください。

    1. 認証プロバイダー のプロバイダータイプ では、Cognito ユーザープールのみが選択されていることを確認します。

    2. Cognito ユーザープールのサインインオプション では、ユーザー名 を選択します。追加のユーザー名要件 は選択しないでください。

    3. 他のすべてのオプションをデフォルトのままにして、次へ を選択します。

  5. セキュリティ要件の設定 では、パスワードポリシー、多要素認証 (MFA) 要件、およびユーザーアカウントの復旧オプションを選択できます。詳細については、「Amazon Cognito ユーザープールのセキュリティ機能を使用する」を参照してください。

    1. パスワードポリシー の場合、パスワードポリシーモードが Cognito のデフォルト に設定されていることを確認します。

    2. 多要素認証 で、MFA適用 に オプション MFAを選択します。

    3. MFA メソッド では、Authenticator アプリケーションとSMSメッセージ を選択します。

    4. ユーザーアカウントリカバリ の場合、セルフサービスアカウントリカバリを有効にするが選択されていること、およびユーザーアカウントリカバリメッセージの配信方法が E メールのみに設定されていることを確認します。

    5. 他のすべてのオプションをデフォルトのままにして、次へ を選択します。

  6. サインアップエクスペリエンスの設定 では、新しいユーザーとしてサインアップするときに新しいユーザーが ID を検証する方法と、ユーザーサインアップフロー中にどの属性が必要か、またはオプションかを決定できます。詳細については、「ユーザープール内のユーザーを管理する」を参照してください。

    1. 自己登録を有効にするが選択されていることを確認します。この設定により、インターネット上のすべてのユーザーからサインアップするためのユーザープールが開きます。これはサンプルアプリケーションを目的としていますが、本番環境ではこの設定を慎重に適用してください。

    2. Cognito 支援の検証と確認 で、Cognito が確認と確認のためにメッセージを自動的に送信することを許可するチェックボックスが選択されていることを確認します。

    3. 検証する属性が E メールメッセージの送信 に設定されていることを確認します。E メールアドレス を確認します。

    4. 属性の変更の検証 で、デフォルトのオプションが選択されていることを確認します。更新が保留中の場合は元の属性値を保持し、更新が保留中の場合はアクティブな属性値を E メールアドレス に設定します。

    5. 必須属性 で、前の選択に基づく必須属性に E メール が表示されることを確認します。

      重要

      この例では、ユーザープールで phone_number を必須属性として設定しないでください。phone_number が必須属性として表示されている場合は、前の選択肢を確認して更新します。

      • オプション、MFAE メールのみの配信方法によるユーザーアカウントの復旧メッセージ

      • E メールメッセージを送信し、検証する属性の E メールアドレスを確認する

    6. 他のすべてのオプションをデフォルトのままにして、次へ を選択します。

  7. メッセージ配信の設定 では、Amazon Simple Email Service および Amazon Simple Notification Service との統合を設定して、サインアップ、アカウント確認、MFA、およびアカウントの復旧のために E メールとSMSメッセージを送信できます。詳細については、「Amazon Cognito ユーザープールの E メール設定」および「SMS Amazon Cognito ユーザープールのメッセージ設定」を参照してください。

    1. E メールプロバイダー では、Cognito を使用して E メールを送信を選択し、Amazon Cognito が提供するデフォルトの E メール送信者を使用します。E メールボリュームが低い場合、この設定はアプリケーションのテストに十分です。Amazon Simple Email Service (Amazon SES) で E メールアドレスを検証し、Amazon で E SESメールを送信 を選択すると、 を返すことができます。

    2. でSMS、新しいIAMロールの作成 を選択し、IAMロール名 を入力します。これにより、Amazon Cognito にSMSメッセージを送信するアクセス許可を付与するロールが作成されます。

    3. 他のすべてのオプションをデフォルトのままにして、次へ を選択します。

  8. アプリケーションの統合 では、ユーザープールに名前を付け、ホストされた UI を設定し、アプリケーションクライアントを作成できます。詳細については、「ホストされた UI でアプリケーションクライアントを追加する」を参照してください。サンプルアプリケーションは、ホストされた UI を使用しません。

    1. ユーザープール名 に、ユーザープール名 を入力します。

    2. Cognito がホストする UI の使用 は選択しないでください。

    3. 「初期アプリケーションクライアント」で、アプリケーションタイプがパブリッククライアント に設定されていることを確認します。

    4. クライアントシークレット で、クライアントシークレットを生成しないが選択されていることを確認します。

    5. [App client name] (アプリケーションクライアント名) を入力します。

    6. アドバンストアプリケーションクライアント設定 を展開します。認証フロー のリストALLOW_USER_PASSWORD_AUTHに を追加します。

    7. 他のすべてのオプションをデフォルトのままにして、次へ を選択します。

  9. レビュー画面と作成画面で選択を確認し、必要に応じて選択を変更します。ユーザープールの設定に満足したら、ユーザープールの作成を選択して続行します。

  10. ユーザープールページで、新しいユーザープールを選択します。

  11. ユーザープールの概要 で、ユーザープール ID を書き留めます。この文字列は、サンプルアプリケーションを作成するときに指定します。

  12. アプリ統合タブを選択し、アプリクライアントと分析セクションを見つけます。新しいアプリケーションクライアントを選択します。クライアント ID を書き留めます。

アプリケーションの作成

このアプリケーションを構築するには、デベロッパー環境を設定する必要があります。デベロッパー環境の要件は次のとおりです。

  1. Node.js がインストールされ、更新されます。

  2. ノードパッケージマネージャー (npm) がインストールされ、少なくともバージョン 10.2.3 に更新されます。

  3. 環境には、ウェブブラウザのTCPポート 5173 からアクセスできます。

React ウェブアプリケーション例を作成するには

  1. デベロッパー環境にサインインし、アプリケーションの親ディレクトリに移動します。

    cd ~/path/to/project/folder/

  2. 新しい React サービスを作成します。

    npm create vite@latest frontend-client -- --template react-ts

  3. の AWS コード例リポジトリからcognito-developer-guide-react-exampleプロジェクトフォルダをクローンします GitHub。

    cd ~/some/other/path
    git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
    cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

  4. プロジェクトの src ディレクトリに移動します。

    cd ~/path/to/project/folder/frontend-client/src

  5. 次の値を編集config.jsonして置き換えます。

    1. を AWS リージョン コードYOUR_AWS_REGIONに置き換えます。例: us-east-1。

    2. を、テスト用に指定したユーザープールの ID YOUR_COGNITO_USER_POOL_IDに置き換えます。例: us-east-1_EXAMPLE。ユーザープールは、前のステップで AWS リージョン 入力した にある必要があります。

    3. を、テスト用に指定したアプリケーションクライアントの ID YOUR_COGNITO_APP_CLIENT_IDに置き換えます。例: 1example23456789。アプリケーションクライアントは、前のステップのユーザープールに存在する必要があります。

  6. 以外の IP からサンプルアプリケーションにアクセスする場合はlocalhost、行を編集package.jsonして "dev": "vite", に変更します"dev": "vite --host 0.0.0.0",。

  7. アプリケーションをインストールします。

    npm install

  8. アプリケーションを起動します。

    npm run dev

  9. http://localhost:5173 または のウェブブラウザでアプリケーションにアクセスしますhttp://[IP address]:5173。

  10. 有効な E メールアドレスで新しいユーザーをサインアップします。

  11. E メールメッセージから確認コードを取得します。アプリケーションに確認コードを入力します。

  12. ユーザー名とパスワードでサインインします。

Amazon Lightsail を使用した React デベロッパー環境の作成

このアプリケーションの使用を開始する簡単な方法は、Amazon Lightsail を使用して仮想クラウドサーバーを作成することです。

Lightsail を使用すると、このサンプルアプリケーションの前提条件が事前設定された小さなサーバーインスタンスをすばやく作成できます。ブラウザベースのクライアントを使用してインスタンスSSHに接続し、パブリックまたはプライベート IP アドレスでウェブサーバーに接続できます。

このサンプルアプリケーションの Lightsail インスタンスを作成するには

  1. Lightsail コンソール に移動します。プロンプトが表示されたら、 AWS 認証情報を入力します。

  2. [インスタンスの作成] を選択します。

  3. プラットフォームを選択する で、Linux/Unix を選択します。

  4. ブループリントを選択する で、Node.js を選択します。

  5. インスタンスを識別する で、開発環境にわかりやすい名前を付けます。

  6. [インスタンスの作成] を選択します。

  7. Lightsail がインスタンスを作成したら、インスタンスを選択し、Connect タブから を使用して Connect SSHを選択します。

  8. SSH セッションがブラウザウィンドウで開きます。node -v と npm -vを実行して、インスタンスが Node.js と 10.2.3 の最小 npm バージョンでプロビジョニングされていることを確認します。

  9. React アプリケーション の設定に進みます。