ステップ 2. アプリケーションを追加して、ホストされたウェブの UI を有効にする - Amazon Cognito

ステップ 2. アプリケーションを追加して、ホストされたウェブの UI を有効にする

ユーザープールを作成すると、アプリを作成して、組み込みウェブページを使用し、ユーザーのサインアップとサインインを行うことができます。

ユーザープールでアプリを作成するには

  1. Amazon Cognito コンソールに移動します。AWS 認証情報を求められる場合があります。

  2. [Manage User Pools] (ユーザープールの管理) をクリックします。

  3. リストから既存のユーザープールを選択、またはユーザープールを作成します。

  4. ページの左側にあるナビゲーションバーで、[General settings] (全般設定) の [App clients] (アプリクライアント) を選択します。

  5. [Add an app client] (アプリクライアントの追加) をクリックします。

  6. アプリに名前を付けます。

  7. この「開始方法」演習では、[クライアントシークレットを生成する] オプションは使用しません。クライアント側の JavaScript を使用して URL で送信することは安全ではないためです。クライアントシークレットは、アプリケーションのサーバー側のコンポーネントでクライアントシークレットを保護できる場合に使用します。

  8. [Create app client] (アプリクライアントの作成) をクリックします。

  9. [アプリクライアント ID] を書き留めます。

  10. [Return to pool details] (プールの詳細に戻る) を選択します。

  11. コンソールページの左側にあるナビゲーションバーで、[App client settings] (アプリクライアントの設定) をクリックします。

  12. [Cognito User Pool] (Cognito ユーザープール) を [Enabled Identity Providers] (有効な ID プロバイダ) の 1 つとして選択します。

    注記

    Facebook、Amazon、Google、Apple に加え、OpenID Connect (OIDC) や SAML IdP など、外部の ID プロバイダー (IdP) を使用してサインインするには、まず以下の説明に従ってプロバイダーを設定してから、[アプリクライアントの設定] ページに戻って、プロバイダーを有効にします。

  13. ユーザーが認証された後で呼び出す Amazon Cognito 認証サーバーのコールバック URL を入力します。ウェブアプリについては、URL は、https://www.example.com のように https:// で始まる必要があります。

    iOS または Android アプリの場合は、myapp:// などのコールバック URL を使用できます。

  14. サインアウト URL を入力します。

  15. [Authorization code grant] を選択して、ユーザープールトークンと交換される認証コードを返します。トークンはエンドユーザーに直接公開されないため、侵害される可能性は低くなります。ただし、ユーザープールトークンの認証コードを交換するために、バックエンドでカスタムアプリケーションが必要です。セキュリティ上の理由から、モバイルアプリ用の認証コード付与フローとコード交換用証明キー (PKCE) を併用することをお勧めします。

  16. [Allowed OAuth Flows] (許可されている OAuth フロー) で [Implicit grant] を選択し、Amazon Cognito からユーザープールの JSON Web トークン (JWT) が返されるようにします。このフローは、トークンの認証コードを交換できるバックエンドがない場合に使用でき、トークンのデバッグにも役立ちます。

    注記

    [Authorization code grant] と [Implicit code grant] の両方を有効にして、必要に応じて各権限を使用することができます。

  17. 具体的に除外する必要がない限り、すべての [Allowed OAuth scopes] (許可されている OAuth スコープ) のチェックボックスをオンにします。

    注記

    [Client credentials] は、アプリがユーザーの代わりではなく、それ自体のためにアクセストークンをリクエストする必要がある場合にのみ選択します。

  18. [Save changes] (変更を保存) をクリックします。

  19. [ドメイン名] ページで、利用可能なドメインプレフィックスを入力します。

  20. 完全なドメインアドレスをメモしておきます。

  21. [Save changes] (変更を保存) をクリックします。

サインインページを表示する

ホストされた UI サインインウェブページは、以下の URL を使用して表示できます。response_type をメモしておきます。この場合は、認証コード付与の response_type=code です。

https://your_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url

ホストされた UI サインインウェブページは、response_type=token になっている暗黙的なコード付与のための以下の URL を使用して表示できます。サインインが正常に行われると、Amazon Cognito がユーザープールトークンをウェブブラウザのアドレスバーに返します。

https://your_domain/login?response_type=token&client_id=your_app_client_id&redirect_uri=your_callback_url

JSON ウェブトークン (JWT) ID トークンは、レスポンスの #idtoken= パラメータの後にあります。

ここでは、暗黙的な付与リクエストからのレスポンスの例を示します。ID トークン文字列はこれ以上に長くなります。

https://www.example.com/#id_token=123456789tokens123456789&expires_in=3600&token_type=Bearer

ユーザープールトークンの復号化と検証には AWS Lambda を使用できます。AWS GitHub ウェブサイトの「Decode and verify Amazon Cognito JWT tokens」を参照してください。

Amazon Cognito ユーザープールトークンは、RS256 アルゴリズムを使用して署名されます。

コンソールで行った変更が表示される前に、ブラウザを更新するため 1 分待たなければならない場合があります。

ドメインは [Domain name] (ドメイン名) ページに表示されています。アプリクライアント ID およびコールバック URL は [全般設定] ページに表示されています。

次のステップ

ステップ 3. ユーザープールにソーシャルサインインを追加する (オプション)