Amazon Cognito のホストされたウェブ UI を設定する方法を教えてください。

Amazon Cognito でユーザープールを作成してドメインを設定すると、Amazon Cognito はホストされたウェブ UI を自動的にプロビジョニングして、サインアップページとサインインページをアプリに追加できます。

設定方法や使用するための設定 (OAuth 2.0 フローの種類や有効にするスコープなど) がわからない場合は、この記事の手順に従ってください。

まだユーザープールの作成をしていない場合は、ユーザープールにアプリクライアントの作成をします 。次に、以下の手順に従います。

ユーザープールにドメイン名を追加します。

1. Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
2. 左側のナビゲーションペインで、[アプリ統合] の下にある [ドメイン名] を選択します。
3. ホストされた Amazon Cognito ドメインに独自のドメイン プレフィックスを追加するか、独自のカスタムドメインを追加します。

アプリクライアントの設定を変更

1. Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
2. 左側のナビゲーションペインで、[アプリ統合] の下にある [アプリクライアントの設定] を選択します。
3. 以下の操作を実行します。
   有効な ID プロバイダーの下で、Cognito ユーザープールのチェックボックスをオンにします。
   [コールバック URL] に、認証コードを受け取るウェブアプリケーションの URL を入力します。サインインすると、ユーザーはここにリダイレクトされます。
   [サインアウト URL] に、サインアウト時にユーザーをリダイレクトする URL を入力します。
   [許可された OAuth フロー] で、有効にする OAuth 2.0 認証フローを選択します。例えば、認証コードの付与や暗黙的な付与などです。詳細については、OAuth ウェブサイトの 「OAuth Grant Types」をご参照ください。
   [許可された OAuth スコープ] で、ユーザー認証時に Amazon Cognito がトークンに追加する OAuth スコープを選択します。例えば、電話、E メール、openid などです。
4. [変更の保存] を選択します。

詳細については、「ユーザープールでアプリクライアントの設定」を参照してください。

(オプション) ホストされたウェブ UI のカスタマイズ

カスタムロゴを追加したり、ホストされているウェブ UI に CSS をカスタマイズしたりできます。詳細については、「組み込みのサインインおよびサインアップウェブページのカスタマイズ」をご参照ください。

(オプション) ホストされたウェブ UI の URL を作成

ホストされたウェブ UI のログイン URL に含めるパラメータを制御する場合は、URL を手動で作成します。

1. Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
2. 左側のナビゲーションペインで、[アプリ統合] を選択します。
3. ドメイン URL をクリップボードにコピーしてから、参照用としてテキスト エディターに貼り付けます。
4. 左側のナビゲーションペインで、[アプリ統合] の下にある [アプリクライアントの設定] を選択します。
5. 以下の操作を実行します。
   アプリクライアント [名前] の下で、ID をクリップボードにコピーしてから、参照用テキスト エディターに貼り付けます。
   [サインイン URL とサインアウト URL] の下で、[コールバック URL] に入力した URL をコピーします。
6. 先ほどこの形式にコピーした情報といっしょに貼り付けて、ホストされたウェブ UI の URL を作成します。
   domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
   例:
   例: https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

以前に、[許可された OAuth フロー] で 認証コードの付与 を有効にした場合、ユーザーがサインインしたときにAmazon Cognito がこの URL を使って認証コードを返します。以前に、[許可された OAuth フロー] で暗黙的な付与を有効にしていて、ユーザーがサインインしたときに Amazon Cognito が代わりにアクセストークンを返すようにしたい場合は、URL の response_type=token を response_type=code に置き換えます。

ホストされたウェブ UI を起動する

注 : ホストされたウェブ UI の URL を手動で作成した場合は、代わりにその URL をウェブブラウザに入力します。

1. Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
2. 左側のナビゲーションペインで、[アプリ統合] の下にある [アプリクライアントの設定] を選択します。
3. Hosted UI の下で、 [Launch Hosted UI] を選択します。ホストされたウェブ UI のサインインページが新しいブラウザタブまたはウィンドウで開きます。