その他のアプリケーションオプション - Amazon Cognito
React SPA のサンプルFlutter モバイルアプリケーションのサンプル

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

その他のアプリケーションオプション

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

Amazon Cognito コンソールでこの目的のためにユーザープールを作成する場合、インタラクティブサインインページと OpenID Connect (OIDC) サービスをホストするユーザープールドメインを持つ必要がない場合があります。コンソールでユーザープールを作成するプロセスによって、自動的にドメインが生成されます。このドメインは、ユーザープールのドメインタブから削除できます。その他のオプションには、 AWS SDKs の API リクエストと CLI の自動セットアップオプションを使用して、アプリケーション用の Amazon Cognito AWS Amplify リソースをプログラムで作成することが含まれます。詳細については、「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. 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. を AWS リージョン コードYOUR_AWS_REGIONに置き換えます。例: 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 アプリケーションを設定] に進みます。

Flutter でサンプル Android アプリケーションを設定する

このチュートリアルで、Android Studio でモバイルアプリケーションを作成し、デバイスをエミュレートしてユーザーのサインアップ、確認、サインインをテストできるようになります。このサンプルアプリケーションでは、Flutter で Android 用の基本的な Amazon Cognito ユーザープールモバイルクライアントを作成します。Flutter を使用したモバイルアプリケーション開発の経験がある場合は、GitHub からサンプルアプリケーションをダウンロードします。

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

仮想化 Android サンプルアプリケーションのサインアップページのスクリーンショット。

このアプリケーションをセットアップするには、ユーザープールが次の要件を満たしている必要があります。

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

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

  • 多要素認証 (MFA) は必要ありません。[MFA の強制]: [オプションの MFA]。

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

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

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

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

アプリケーションの作成

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

  1. [Android Studio] と [コマンドラインツール] をインストールします。

  2. Android Studio で、[Flutter プラグイン] をインストールします。

  3. このサンプルアプリケーションの cognito_flutter_mobile_app ディレクトリの内容から新しい Android Studio プロジェクトを作成します。

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

  4. Flutter をインストールします。

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

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

      flutter doctor --android-licenses

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

      flutter doctor

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

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

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

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

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

    1. Android Studio GUI で、[デバイスマネージャー] を使用して新しいデバイスを作成します。

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

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

    1. Android Studio GUI で、仮想デバイスの横にある [ の開始] アイコンを選択します。

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

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

    1. Android Studio GUI で、[ のデプロイ] アイコンを選択します。

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

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

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

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

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