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

# その他のアプリケーションオプション
<a name="getting-started-user-pools-application-other-options"></a>

既存のアプリケーション UI を Amazon Cognito の認証と統合できるかもしれません。独自の認証ページが既にあっても、ディレクトリ設定の機能は Amazon Cognito のユーザープールほどではないかもしれません。このタイプのアプリケーションには、さまざまなプログラミング言語の AWS SDKs で Amazon Cognito 統合を使用して、認証コンポーネントを追加または置き換えることができます。以下にいくつか例を示します。

Amazon Cognito コンソールで、この目的のためのユーザープールを作成すると、インタラクティブなサインインページや OpenID Connect (OIDC) サービスをホストする[ユーザープールドメイン](cognito-user-pools-assign-domain.md)が不要になる場合があります。コンソールでユーザープールを作成するプロセスにより、ドメインは自動的に生成されます。このドメインは、ユーザープールの **[ドメイン]** タブで削除できます。その他のオプションには、 AWS SDKs の API リクエストと CLI の自動セットアップオプションを使用して、アプリケーション用の Amazon Cognito AWS Amplify リソースをプログラムで作成することが含まれます。詳細については、「[Amazon Cognito の認証と認可を、ウェブアプリケーションとモバイルアプリケーションに統合する](cognito-integrate-apps.md)」を参照してください。

**Topics**
+ [サンプル React 単一ページアプリケーションを設定する](#getting-started-test-application-react)
+ [Flutter でサンプル Android アプリケーションを設定する](#getting-started-test-application-flutter)

## サンプル React 単一ページアプリケーションを設定する
<a name="getting-started-test-application-react"></a>

このチュートリアルでは、ユーザーのサインアップ、確認、サインインをテストできる React 単一ページアプリケーションを作成します。React は、ウェブアプリケーションおよびモバイルアプリケーション用の JavaScript ベースのライブラリで、ユーザーインターフェイス (UI) に焦点を当てています。このサンプルアプリケーションは、Amazon Cognito ユーザープールのいくつかの基本的機能を示しています。React を使用したウェブアプリケーション開発の経験がある場合は、[GitHub からサンプルアプリケーションをダウンロード](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example)します。

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

![React ベースのサンプルウェブアプリケーションのサインアップページのスクリーンショット。](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/cognito-getting-started-react-app-running.png)


このアプリケーションをセットアップする場合、ユーザープールは以下の要件を満たしている必要があります。
+ ユーザーは E メールアドレスでサインインできます。**[Cognito ユーザープールのサインインオプション]**: **[E メール]**。
+ ユーザー名の大文字と小文字は区別されません。**[ユーザー名の要件]**: **[ユーザー名の大文字と小文字を区別する]** が選択されていません。
+ 多要素認証 (MFA) は必要ありません。**[MFA の強制]**: **[オプションの MFA]**。
+ ユーザープールは、E メールメッセージを使用して、ユーザープロファイルの確認用の属性を検証します。**[検証する属性]**: **[E メールのメッセージを送信、E メールアドレスを検証]**。
+ E メールは唯一の必須の属性です。**[必須の属性]**: **[E メール]**。
+ ユーザーはユーザープールにサインアップできます。**[自己登録]**: **[自己登録を有効化]** が選択されています。
+ 最初のアプリケーションクライアントは、ユーザー名とパスワードによるサインインを許可するパブリッククライアントです。**[アプリケーションタイプ]**: **[パブリッククライアント]**、**[認証フロー]**: `ALLOW_USER_PASSWORD_AUTH`。

### アプリケーションの作成
<a name="getting-started-test-application-react-create-app"></a>

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

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

1. Node Package Manager (npm) がインストールされ、バージョン 10.2.3 以上に更新されています。

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

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

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

   ```
   cd {{~/path/to/project/folder/}}
   ```

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

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

1. GitHub の AWS コード例リポジトリから`cognito-developer-guide-react-example`[プロジェクトフォルダ](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/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/}}
   ```

1. プロジェクトで、`src` ディレクトリに移動します。

   ```
   cd {{~/path/to/project/folder/}}frontend-client/src
   ```

1. `config.json` を編集して、以下の値を置き換えます:

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

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

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

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

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

   ```
   npm install
   ```

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

   ```
   npm run dev
   ```

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

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

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

1. ユーザー名とパスワードを使用してサインインします。

### Amazon Lightsail を使用した React デベロッパー環境の作成
<a name="getting-started-test-application-react-lightsail"></a>

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

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

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

1. [[Lightsail コンソール]](https://lightsail.aws.amazon.com/ls/webapp/) に移動します。プロンプトが表示されたら、 AWS 認証情報を入力します。

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

1. **[プラットフォームを選択]** で、**[Linux/Unix]** を選択します。

1. **[ブループリントの選択]**で、**[Node.js]** を選択します。

1. **[インスタンスを確認]** で、開発環境にわかりやすい名前を付けます。

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

1. Lightsail がインスタンスを作成したら、インスタンスを選択し、**[接続]** タブから **[SSH を使用して接続]** を選択します。

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

1. [[React アプリケーションを設定]](#getting-started-test-application-react) に進みます。

## Flutter でサンプル Android アプリケーションを設定する
<a name="getting-started-test-application-flutter"></a>

このチュートリアルで、Android Studio でモバイルアプリケーションを作成し、デバイスをエミュレートしてユーザーのサインアップ、確認、サインインをテストできるようになります。このサンプルアプリケーションでは、Flutter で Android 用の基本的な Amazon Cognito ユーザープールモバイルクライアントを作成します。Flutter を使用したモバイルアプリケーション開発の経験がある場合は、[GitHub からサンプルアプリケーションをダウンロード](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app)します。

次のスクリーンショットは、仮想 Android デバイスで実行されているアプリケーションを示しています。

![仮想化 Android サンプルアプリケーションのサインアップページのスクリーンショット。](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/cognito-getting-started-android-app-running.png)


このアプリケーションをセットアップするには、ユーザープールが以下の要件を満たしている必要があります。
+ ユーザーは E メールアドレスでサインインできます。**[Cognito ユーザープールのサインインオプション]**: **[E メール]**。
+ ユーザー名の大文字と小文字は区別されません。**[ユーザー名の要件]**: **[ユーザー名の大文字と小文字を区別する]** が選択されていません。
+ 多要素認証 (MFA) は必要ありません。**[MFA の強制]**: **[オプションの MFA]**。
+ ユーザープールは、E メールメッセージを使用して、ユーザープロファイルの確認用の属性を検証します。**[検証する属性]**: **[E メールのメッセージを送信、E メールアドレスを検証]**。
+ E メールは唯一の必須の属性です。**[必須の属性]**: **[E メール]**。
+ ユーザーはユーザープールにサインアップできます。**[自己登録]**: **[自己登録を有効化]** が選択されています。
+ 最初のアプリケーションクライアントは、ユーザー名とパスワードによるサインインを許可するパブリッククライアントです。**[アプリケーションタイプ]**: **[パブリッククライアント]**、**[認証フロー]**: `ALLOW_USER_PASSWORD_AUTH`。

### アプリケーションの作成
<a name="getting-started-test-application-flutter-create-app"></a>

**サンプル Android アプリケーションを作成するには**

1. [[Android Studio]](https://developer.android.com/studio) と [[コマンドラインツール]](https://developer.android.com/tools) をインストールします。

1. Android Studio で、[[Flutter プラグイン]](https://docs.flutter.dev/get-started/editor?tab=androidstudio) をインストールします。

1. [このサンプルアプリケーション](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app)の `cognito_flutter_mobile_app` ディレクトリの内容から新しい Android Studio プロジェクトを作成します。

   1. `assets/config.json` を編集して、`<<YOUR USER POOL ID>>` と `<< YOUR CLIENT ID>>` をユーザープールとアプリケーションクライアントの ID に置き換えます。

1. [Flutter](https://docs.flutter.dev/get-started/install) をインストールします。

   1. PATH 変数に Flutter を追加します。

   1. 次のコマンドを使用してライセンスを受け入れます。

      `flutter doctor --android-licenses`

   1. Flutter 環境を確認し、不足しているコンポーネントをインストールします。

      `flutter doctor`

      1. コンポーネントが不足している場合は、`flutter doctor -v` を実行して問題を解決する方法を学びます。

   1. 新しい Flutter プロジェクトのディレクトリに変更し、依存関係をインストールします。

      1. `flutter pub add amazon_cognito_identity_dart_2` を実行します。

   1. `flutter pub add flutter_secure_storage` を実行します。

1. Android 仮想デバイスを作成します。

   1. Android Studio GUI で、[[デバイスマネージャー]](https://developer.android.com/studio/run/managing-avds) を使用して新しいデバイスを作成します。

   1. CLI で、`flutter emulators --create --name android-device` を実行します。

1. 仮想 Android デバイスを起動します。

   1. Android Studio GUI で、仮想デバイスの横にある [![Play button icon with a blue triangle pointing to the right.](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/cognito-getting-started-android-virtual-device-start.png) の開始] アイコンを選択します。

   1. CLI で、`flutter emulators --launch android-device` を実行します。

1. 仮想デバイスでアプリケーションを起動します。

   1. Android Studio GUI で、[![Green play button icon representing a start or play action.](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/cognito-getting-started-android-app-start.png) のデプロイ] アイコンを選択します。

   1. CLI で、`flutter run` を実行します。

1. Android Studio で、実行中の仮想デバイスに移動します。

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

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

1. ユーザー名とパスワードを使用してサインインします。