サインアップおよびサインインでの Amazon Cognito でホストされる UI の使用 - Amazon Cognito

サインアップおよびサインインでの Amazon Cognito でホストされる UI の使用

Amazon Cognito でホストされる UI は、OAuth 2.0 準拠の認証サーバーを提供します。これは、登録および認証などのエンドユーザーフローのデフォルト実装を提供します。ユーザープールの設定を変更するだけで、多要素認証 (MFA) の追加などのユーザーフローをカスタマイズできます。アプリケーションはホストされた UI にリダイレクトされ、これがユーザーフローを処理します。ユーザーエクスペリエンスは、ブランド固有のロゴを提供し、ルックアンドフィールを変更することでカスタマイズできます。Amazon Cognito でホストされる UI では、エンドユーザーがソーシャルプロバイダー (Facebook、LoginWithAmazon、Google、Apple)、および任意の OpenID Connect (OIDC) 準拠のプロバイダーや SAML プロバイダーでサインインする機能も簡単に追加できます。

AWS Amplify でホストされた UI をセットアップする

AWS Amplify を使用してウェブアプリまたはモバイルアプリに認証を追加する場合は、AWS Amplify フレームワークのコマンドラインインターフェイス (CLI) とライブラリを使用して、ホストされた UI を設定できます。アプリに認証を追加するには、AWS Amplify CLI を使用して Auth カテゴリをプロジェクトに追加します。次に、クライアントコードで AWS Amplify ライブラリを使用して、Amazon Cognito ユーザープールでのユーザーの認証を行います。

事前構築済みのホストされた UI を表示する、または Facebook、Google、Amazon、Apple などのソーシャルサインインプロバイダーにリダイレクトする OAuth 2.0 エンドポイント経由でユーザーをフェデレートすることができます。ユーザーがソーシャルプロバイダーで正常に認証されると、AWS Amplify は必要に応じてユーザープールに新しいユーザーを作成し、ユーザーの OIDC トークンをアプリに提供します。

詳細については、アプリプラットフォームの AWS Amplify フレームワークのドキュメントを参照してください。

Amazon Cognito コンソールでの ホストされた UI のセットアップ

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

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

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

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

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

  6. アプリ名を入力します。

  7. 認証フローで必要な場合を除き、[Generate client secret] (クライアントシークレットを生成) オプションはオフにします。クライアントシークレットは、アプリケーションのサーバー側のコンポーネントでクライアントシークレットを保護できる場合に使用します。

  8. (オプション) トークンの有効期限設定を変更します。

  9. [Auth Flows Configuration] (認証フローの設定) オプションを選択します。

  10. [Security configuration] (セキュリティ設定) を選択します。[Enabled] (有効) を選択することが推奨されます。

  11. [Set attribute read and write permissions] (属性の読み込みおよび書き込みアクセス権限を設定する) をクリックします。

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

  13. [App client id] (アプリクライアント ID) をメモしておきます。

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

アプリを設定する

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

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

    注記

    Facebook、Amazon、Google、または Apple などの外部 ID プロバイダ、および OpenID Connect (OIDC) または SAML IdP でサインインするには、まず以下の説明に従ってプロバイダを設定し、[App client settings] (アプリクライアントの設定) ページに戻ってこれらを有効にします。

  3. [Callback URL(s)] (コールバック URL) を入力します。コールバック URL は、ユーザーがサインインに成功したときにリダイレクトされる先を指定します。

  4. [Sign out URL(s)] (サインアウト URL) を入力します。サインアウト URL は、ユーザーがサインアウトしたときにリダイレクトされる先を指定します。

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

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

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

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

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

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

ドメインを設定する

  1. [Choose domain name] (ドメイン名の選択) をクリックします。

  2. [Domain name] (ドメイン名) ページで、ドメインのプレフィックスを入力して利用可能かチェックする、または自分が所有するドメインを入力します。

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

  4. [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 は [App client settings] (アプリクライアントの設定) ページに表示されています。

注記

Amazon Cognito でホストされるサインインウェブページは、カスタム認証フローをサポートしません。