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

サンプル 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 プロバイダー (IdP) を選択できます。詳細については、「サードパーティー経由のユーザープールへのサインインの追加」を参照してください。

    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. [メッセージ配信を設定] で、Amazon Simple Email Service および Amazon Simple Notification Service との統合を構成して、サインアップ、アカウント確認、MFA、およびアカウントの復旧用に E メールおよび SMS メッセージをユーザーに送信できます。詳細については、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. Node Package Manager (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. GitHub の AWS コード例リポジトリから cognito-developer-guide-react-example プロジェクトフォルダをクローンします。

    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. YOUR_AWS_REGION を AWS リージョン コードに置き換えます。例: us-east-1。

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

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

  6. localhost 以外の IP からサンプルアプリケーションにアクセスする場合は、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 -v と npm -v を実行して、インスタンスが Node.js と npm バージョン 10.2.3 以上でプロビジョニングされていることを確認します。

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