アプリクライアントを追加してホストされた UI を設定する - Amazon Cognito

アプリクライアントを追加してホストされた UI を設定する

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

ユーザープールでアプリを作成するには
  1. Amazon Cognito コンソールに移動します。プロンプトが表示されたら、AWS 認証情報を入力します。

  2. [User Pools] (ユーザープール) を選択します。

  3. リストから既存のユーザープールを選択するか、ユーザープールを作成します。新しいユーザープールを作成すると、ウィザード中にアプリケーションクライアントを設定し、ホストされた UI を構成するように求められます。

  4. [App integration] (アプリケーションの統合) タブをユーザープールに設定します。

  5. [ドメイン] の横で、[アクション] を選択し、[カスタムドメインの作成] または [Amazon Cognito ドメインの作成] のどちらかを選択します。ユーザープールドメインを既に設定している場合は、新しいカスタムドメインを作成する前に、[Amazon Cognitoドメインの削除] または [カスタムドメインの削除] を選択します。

  6. Amazon Cognito ドメインで使用するための使用可能なドメインプレフィックスを入力します。[カスタムドメイン] のセットアップに関する詳細については、「ホストされた UI への独自のドメインの使用」を参照してください。

  7. [Create] (作成) を選択します。

  8. 同じユーザープールの [App integration] (アプリケーションの統合) タブに移動し、[App clients] (アプリケーションクライアント) を検索します。[Create app client] (アプリケーションクライアントの作成) を選択します。

  9. [Application type] (アプリケーション) を選択します。選択した内容に基づいて、いくつかの推奨設定が提供されます。ホストされた UI を使用するアプリケーションは、[Public client] (パブリッククライアント) です。

  10. [App client name] (アプリケーションクライアント名) を入力します。

  11. この演習では、[Don't generate client secret] (クライアントシークレットを生成しない) を選択します。クライアントシークレットは、一元化されたアプリケーションからユーザーを認証する機密アプリケーションによって使用されます。この演習では、ホストされた UI サインインページをユーザーに提示し、クライアントシークレットは必要ありません。

  12. アプリケーションで許可する [Authentication flows] (認証のフロー) を選択します。USER_SRP_AUTH が選択されていることを確認します。

  13. 必要に応じて、[token expiration] (トークン有効期限)、[Advanced security configuration] (高度なセキュリティ設定)、および[Attribute read and write permissions] (属性の読み取りと書き込みのアクセス許可) をカスタマイズします。詳細については、「アプリケーションクライアントのセッティングの構成」を参照してください。

  14. アプリケーションクライアントの [Add a callback URL] (コールバック URL を追加する) 。これは、ホストされた UI 認証の後に指示される場所です。Allowed sign-out URL (許可されたサインアウト URL) は、アプリケーションでサインアウトを実装できるようになるまで追加する必要はありません。

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

  15. アプリケーションクライアントの [ID providers] (ID プロバイダー) を選択します。少なくとも、[Amazon Cognito ユーザープール] をプロバイダーとして有効にします。

    注記

    Facebook、Amazon、Google、Apple に加え、OpenID Connect (OIDC) や SAML IdP など、外部の ID プロバイダー (IdP) を使用してサインインするには、まず、サードパーティー経由でのユーザープールへのサインインの追加で示されるように構成してから、[App client settings] (アプリクライアントの設定) ページに戻って有効にします。

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

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

    注記

    [Authorization code grant (認証コードの付与)] と [Implicit code grant (暗黙的コードの付与)] の両方を有効にして、必要に応じて各権限を使用することができます。

    アプリがユーザーの代わりではなく自身の代わりとしてアクセストークンをリクエストする必要がある場合にのみ、[クライアント認証情報] を選択します。

  17. 特に除外する必要がない限り、すべての [OpenID Connect scopes] (OpenID Connect スコープ) を選択します。

  18. 設定した [Custom scopes] (カスタムスコープ) を選択します。カスタムスコープは、通常、機密クライアントで使用されます。

  19. [Create] (作成) を選択します。

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

[App client page] (アプリクライアントページ) から、[View hosted UI] (ホストされた UI の表示) を選択して、アプリクライアント ID、スコープ、許可、およびコールバック URL パラメータがあらかじめ入力されたサインインページに新しいブラウザタブを開きます。

ホストされた 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

response_type=token である暗黙のコード付与の次の URL を使用して、ホストされた UI サインインウェブページを表示できます。サインインが正常に行われると、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

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

ドメインは [ドメイン名] ページに表示されています。アプリクライアント ID およびコールバック URL は [全般設定] ページに表示されています。コンソールで行った変更がすぐに表示されない場合は、数分待ってから、ブラウザを更新します。

次のステップ

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