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

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

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

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

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

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

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

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

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

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

  9. [Auth Flows Configuration] オプションを選択します。

  10. [セキュリティ] 設定を選択します。[有効] を選択することをお勧めします。

  11. (オプション) [属性の読み込みおよび書き込みアクセス許可の設定] を選択します。

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

  13. App client id.] (アプリクライアント ID) を書き留めます。

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

アプリの設定

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

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

    注記

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

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

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

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

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

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

  8. 具体的に除外する必要がない限り、すべての [許可された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>

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 AWS Lambda ウェブサイトの「JWTAmazon Cognito トークンのデコードと検証GitHub」を参照してください。

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

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

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

注記

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