React 単一ページアプリケーションの例をセットアップする - Amazon Cognito

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

React 単一ページアプリケーションの例をセットアップする

このチュートリアルでは、ユーザーのサインアップ、確認、サインインをテストできる React 単一ページアプリケーションを作成します。React は、ウェブおよびモバイルアプリ用の JavaScriptベースのライブラリで、ユーザーインターフェイス (UI) に焦点を当てています。このサンプルアプリケーションは、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 メソッド で認証アプリケーションSMS メッセージ を選択します。

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

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

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

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

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

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

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

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

      重要

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

      • オプションの MFAユーザーアカウント復旧メッセージの配信方法E メールのみ

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

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

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

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

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

    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.tsして置き換えます。

    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 がインスタンスを作成したら、そのインスタンスを選択し、接続 タブから SSH を使用して接続 を選択します。

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

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