Flutter でサンプル Android アプリをセットアップする - Amazon Cognito

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

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

新しいユーザープールを作成する
  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 を書き留めます。

アプリケーションの作成

Android アプリの例を作成するには
  1. Android スタジオコマンドラインツールをインストールします

  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 スタジオ 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. ユーザー名とパスワードを使用してサインインします。