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

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

Amazon Cognito では、サインアップとサインインのワークフローを処理するためにアプリに追加できるホスト認証 UI をプロビジョニングできます。Amazon Cognito のホストされた UI は、Facebook、Amazon、Google、Apple を介して、また、OpenID Connect (OIDC) および SAML ID プロバイダーを介して、ユーザープールに直接サインインする機能など、他の機能の基盤となります。

ホストされた UI を設定するには、AWS Amplify、または Amazon Cognito コンソールを使用できます。

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. ユーザープールの管理

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

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

  5. [Add an app client] を選択します。

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

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

  8. [Create app client] を選択します。

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

  10. [プールの詳細に戻る] を選択します。

  11. アプリケーションを設定します。

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

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

      注記

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

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

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

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

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

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

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

      注記

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

    5. [Save changes] を選択します。

  12. ドメインを設定します。

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

    2. 完全なドメインアドレスを書き留めます。

    3. [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>

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

AWS Lambda を使用してユーザープールトークンをデコードし、検証できます。AWS GitHub ウェブサイトの Amazon Cognito JWT トークンのデコードと検証を参照してください。

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

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

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

注記

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