でホストされた UI を設定する AWS Amplify Amazon Cognito コンソールでのホストされた UI のセットアップサインインページの表示 Amazon Cognito ユーザープールでホストされた UI について知っておくべきこと

Amazon Cognito でホストされた UI およびフェデレーションエンドポイントの設定と使用

ドメインを持つ Amazon Cognito ユーザープールは、OAuth-2.0 準拠の認証サーバーであり、認証用の ready-to-use ホストユーザーインターフェイス (UI) です。認証サーバーは、認証リクエストをルーティングし、JSONウェブトークン (JWTs) を発行および管理し、ユーザー属性情報を配信します。ホストされた UI は、ユーザープール内の基本的なサインアップ、サインイン、多要素認証、パスワードリセットのアクティビティを行う Web インターフェイスの集まりです。また、アプリに関連付けるサードパーティー ID プロバイダー (IdPs) による認証の中心的なハブでもあります。ユーザーを認証および承認する際、アプリはホストされた UI と承認エンドポイントを呼び出すことができます。ホストされた UI ユーザーエクスペリエンスを、ブランドに合わせて独自のロゴやCSSカスタマイズを行うことができます。ホストされた UI と認証サーバーのコンポーネントについて詳しくは、「ユーザープールフェデレーションエンドポイントとホストされた UI リファレンス」を参照してください。

注記

Amazon Cognito でホストされた UI は、カスタム認証チャレンジの Lambda トリガーを使用したカスタム認証フローをサポートしていません。

トピック

でホストされた UI を設定する AWS Amplify

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

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

次の例は、 AWS Amplify を使用して、アプリ内のソーシャルプロバイダーでホストされた UI を設定する方法を示しています。

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

アプリケーションクライアントの作成

Amazon Cognito コンソールに移動します。プロンプトが表示されたら、 AWS 認証情報を入力します。
[User Pools] (ユーザープール) を選択します。
リストから既存のユーザープールを選択するか、ユーザープールを作成します。
[App integration] (アプリケーションの統合) タブを選択します。
[App clients] (アプリケーションクライアント) で、[Create an app client] (アプリケーションクライアントの作成) を選択します。
[App type] (アプリケーションタイプ) を選択します。[Public client] (パブリッククライアント)、[Confidential client] (機密保持クライアント)、または [Other] (その他)。パブリッククライアントは通常、ユーザーのデバイスから動作し、認証されていないとトークン認証されたを使用しますAPIs。機密クライアントは通常、クライアントシークレットとAPI認証情報で信頼する中央サーバー上のアプリケーションから動作し、認証ヘッダーと AWS Identity and Access Management 認証情報を使用してリクエストに署名します。ユースケースが、パブリッククライアントまたは機密保持クライアントの事前構成されたアプリケーションクライアント設定と異なる場合、その他を選択します。
[App client name] (アプリケーションクライアント名) を入力します。
アプリケーションクライアントで許可したい [Authentication flows] (認証のフロー) を選択します。
認証フローセッション持続期間を設定します。これは、セッショントークンが期限切れになる前にユーザーが各認証チャレンジを完了しなければならない期間です。
(オプション) トークンの有効期限を設定します。
1. アプリケーションクライアントの [Refresh token expiration] (トークンの有効期限を更新) を指定します。デフォルト値は 30 日です。これは、1 時間から 10 年の任意の値に変更できます。
2. アプリケーションクライアントの [Access token expiration] (アクセストークンの有効期限) を指定します。デフォルト値は 1 時間です。これは、5 分から 24 時間の任意の値に変更できます。
3. アプリケーションクライアントの [ID token expiration] (ID トークンの有効期限) を指定します。デフォルト値は 1 時間です。これは、5 分から 24 時間の任意の値に変更できます。
  
  重要
  ホストされた UI を使用してトークンの有効期間を 1 時間未満に設定した場合、ユーザーは、現在 1 時間に固定されているセッション cookie の期間に基づいてトークンを使用できるようになります。
[Generate client secret] (クライアントシークレットの生成) を選択して、 Amazon Cognito にクライアントシークレットを生成させます。クライアントシークレットは通常、機密クライアントに関連付けられます。
このアプリケーションクライアントに、[Enable token revocation] (トークンの失効を有効化) するかどうかを選択してください。これにより、トークンサイズが増加します。トークンの取り消しの詳細については、「Revoking Tokens」を参照してください。
このアプリケーションのクライアントに対して、[Prevent error messages that reveal user existence] (ユーザーの存在を知らせるエラーメッセージを表示しない) ようにするか選択します。Amazon Cognito は、ユーザー名またはパスワードのいずれかが間違っているという一般的なメッセージで、存在しないユーザーのサインインリクエストに応答します。
(オプション) このアプリケーションクライアントに、[Attribute read and write permissions] (属性の読み取りと書き込みのアクセス許可) を構成します。アプリケーションクライアントは、ユーザープールの属性スキーマの限定サブセットに対して、読み取りと書き込みの許可が得られます。
[Create] (作成) を選択します。
[Client id] (クライアント ID) を書き留めます。これにより、サインアップリクエストとサインインリクエストでアプリケーションクライアントを識別します。

アプリを設定する

[App integration] (アプリケーションの統合) タブで、[App clients] (アプリケーションクライアント) のアプリケーションクライアントを選択します。現在のホストされた UI 情報を確認してください。
「許可されたURLコールバック (s)」にコールバックを追加しますURL。コールバックURLとは、サインインが成功するとユーザーがにリダイレクトされる場所です。
「許可されたサインアウト (s)」にサインアウトを追加しますURL。 URLサインアウトURLとは、サインアウト後にユーザーがにリダイレクトされる場所です。
ID プロバイダーリストから少なくとも 1 つ追加してください。
OAuth 2.0 付与タイプ で、認証コード付与を選択して認証コードを返し、それをユーザープールトークンと交換します。トークンはエンドユーザーに直接公開されないため、侵害される可能性は低くなります。ただし、ユーザープールトークンの認証コードを交換するために、バックエンドでカスタムアプリケーションが必要です。セキュリティ上の理由から、モバイルアプリケーションには認証コード付与フローをコード交換 (PKCE) の証明キーと一緒に使用することをお勧めします。
OAuth 2.0 付与タイプ で、暗黙的な付与 を選択して、Amazon Cognito からユーザープールのJSONウェブトークン (JWT) を返します。このフローは、トークンの認証コードを交換できるバックエンドがない場合に使用でき、トークンのデバッグにも役立ちます。
[Authorization code] (認証コード) と [Implicit code] (暗黙的コード) 付与の両方を有効にして、必要に応じて各権限を使用することができます。[Authorization code] (認証コード) または [Implicit code] (暗黙コード) の付与も選択されておらず、アプリケーションクライアントにクライアントシークレットがある場合は、クライアント認証情報の付与を有効にできます。アプリケーションがユーザーの代わりではなく自身の代わりとしてアクセストークンをリクエストする必要がある場合にのみ、[Client credentials] (クライアント認証情報) を選択します。
このアプリケーションクライアントに対して認可する [OpenID Connect scopes] (OpenID Connect スコープ) を選択します。
[変更の保存] を選択します。

ドメインを設定する

ユーザープール用の [App integration] (アプリケーションの統合) タブに移動します。
[Domain] (ドメイン) の [Actions] (アクション) を選択し、[Create custom domain] (カスタムドメインの作成) または [Create Cognito domain] (Cognitoドメインの作成) を選択します。ユーザープールドメインを既に構成している場合は、新しいカスタムドメインを作成する前に、[Delete Cognito domain] (Cognito ドメインの削除) または [Delete custom domain] (カスタムドメインの削除) を選択して削除します。
Amazon Cognito ドメインで使用するための使用可能なドメインプレフィックスを入力します。[Custom domain] (カスタムドメイン) のセットアップに関する詳細については、「ホストされた UI で所有するドメインを使用する」を参照してください。
[Create] (作成) を選択します。

サインインページの表示

Amazon Cognito コンソールで、[App integration] (アプリの統合) タブの [App clients and analytics] (アプリクライアントと分析) の下にあるアプリクライアントの設定で、[View Hosted UI] (ホストされた UI を表示) ボタンを選択します。このボタンを選択すると、ホストされた UI のサインインページに移動し、次の基本パラメータが表示されます。

アプリクライアント ID
認証コード付与リクエスト
現在のアプリクライアント用に有効にしたすべてのスコープのリクエスト
現在のアプリケーションクライアントのリストURLの最初のコールバック

[View hosted UI] (ホストされた UI を表示) ボタンは、ホストされた UI の基本機能をテストする場合に便利です。サインインは、追加および変更されたパラメータURLでカスタマイズできます。ほとんどの場合、[View hosted UI] (ホストされた UI を表示) リンクの自動生成されたパラメータは、アプリのニーズに完全には一致しません。このような場合は、ユーザーのサインイン時にアプリURLが呼び出すをカスタマイズする必要があります。サインインパラメータのキーと値の詳細については、「ユーザープールフェデレーションエンドポイントとホストされた UI リファレンス」を参照してください。

ホストされた UI サインインウェブページは、次のURL形式を使用します。この例では、response_type=code パラメーターを使って認証コードの付与をリクエストしています。


https://<your domain>/oauth2/authorize?response_type=code&client_id=<your app client id>&redirect_uri=<your callback url>

ユーザープールのドメイン文字列は、[アプリケーションの統合] タブから取得できます。同じタブで、アプリクライアント IDs、そのコールバック URLs、許可されたスコープ、およびアプリクライアントと分析 のその他の設定を識別できます。

カスタムパラメータを使用して /oauth2/authorize エンドポイントに移動すると、Amazon Cognito は /oauth2/login エンドポイントにリダイレクトするか、identity_provider または idp_identifier パラメータがある場合は、IdP サインインページにそのままリダイレクトします。ホストされた UI をバイパスURLする例については、「」を参照してくださいSAML Amazon Cognito ユーザープールでのセッション開始。

暗黙的な付与に対するホストされた UI リクエストの例

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



            https://mydomain.us-east-1.amazoncognito.com/authorize?response_type=token&client_id=1example23456789&redirect_uri=https://mydomain.example.com

ID トークンとアクセストークンは、リダイレクトに追加されたパラメータとして表示されますURL。

ここでは、暗黙的な許可リクエストからのレスポンス例を示します。



            https://mydomain.example.com/#id_token=eyJraaBcDeF1234567890&access_token=eyJraGhIjKlM1112131415&expires_in=3600&token_type=Bearer

Amazon Cognito ユーザープールでホストされた UI について知っておくべきこと

ホストされた UI と管理者としてのユーザーの確認

ユーザープールのローカルユーザーの場合、ホストされた UI は、検証および確認用のメッセージの自動送信を Cognito に許可するようにユーザープールを設定するときに最も効果的です。この設定を有効にすると、Amazon Cognito は、サインアップしたユーザーに確認コードを含むメッセージを送信します。代わりにユーザーをユーザープール管理者として確認すると、ホストされた UI はサインアップ後にエラーメッセージを表示します。この状態で、Amazon Cognito は新しいユーザーを作成しましたが、検証メッセージを送信できませんでした。引き続きユーザーを管理者として確認することはできますが、エラーが発生すると、ユーザーはサポートデスクに連絡する可能性があります。管理者の確認の詳細については、「ユーザーにアプリケーションへのサインアップを許可するがユーザープール管理者として確認する」を参照してください。

ホストされた UI 設定の変更の表示

ホストされている UI ページに変更がすぐに反映されない場合は、数分間待ってから、ページを更新してください。

ユーザープールトークンのデコード

Amazon Cognito ユーザープールトークンは、RS256アルゴリズムを使用して署名されます。を使用してユーザープールトークンをデコードおよび検証できます。「での Amazon Cognito JWTトークンのデコードおよび検証 AWS Lambda」を参照してください GitHub。

ホストされた UI とTLSバージョン

ホストされた UI には転送中の暗号化が必要です。Amazon Cognito が提供するユーザープールドメインには、1.2 の最小TLSバージョンが必要です。カスタムドメインはをサポートしていますが、TLSバージョン 1.2 は必要ありません。Amazon Cognito はホストされた UI と認証サーバーエンドポイントの設定を管理するため、ユーザープールドメインTLSの要件を変更することはできません。

ホストされた UI とCORSポリシー

Amazon Cognito がホストする UI は、カスタムのクロスオリジンリソース共有 (CORS) オリジンポリシーをサポートしていません。ホストされた UI のCORSポリシーにより、ユーザーはリクエストで認証パラメータを渡すことができなくなります。代わりに、アプリケーションのウェブフロントエンドにCORSポリシーを実装します。Amazon Cognito は、次のOAuthエンドポイントへのリクエストにAccess-Control-Allow-Origin: *レスポンスヘッダーを返します。

ホストされた UI と認証サーバーの Cookie

Amazon Cognito ユーザープールエンドポイントは、ユーザーのブラウザに Cookie を設定します。Cookie は、サイトがサードパーティー Cookie を設定しないブラウザの要件に準拠しています。これらはユーザープールエンドポイントのみを対象とし、以下が含まれます。

各リクエストの XSRF-TOKEN Cookie。
ユーザーがリダイレクトされたときのセッション整合性のための csrf-stateCookie。
成功したサインイン試行を 1 時間保持するcognitoセッション Cookie。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

ユーザープールの更新

ドメインの設定