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

最終更新日: 2021 年 3 月 9 日

ホストされたウェブ UI を Amazon Cognito のユーザープールに設定したいのですが、どの設定を有効にすれば良いのかがわかりません。設定方法を教えてください。

簡単な説明

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

これを設定する方法や使用する設定 (OAuth 2.0 フローの種類や有効にするスコープなど) が不明な場合は、この記事のステップに従ってください。

解決方法

まだユーザープールの作成をしていない場合は、ユーザープールにアプリクライアントの作成をします。その後、これらの指示通りに実行します。

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

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

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

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

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

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

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

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

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

Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
左側のナビゲーションペインで、[アプリ統合] を選択します。
ドメイン URL をクリップボードにコピーし、参考用にテキストエディタにペーストします。
左側のナビゲーションペインで、[アプリ統合] の下にある [アプリクライアントの設定] を選択します。
以下の操作を実行します。
アプリクライアント [名前] の下で、ID をクリップボードにコピーしてから、参照用テキストエディターに貼り付けます。
[サインイン URL とサインアウト URL] の下で、[コールバック URL] に入力した URL をコピーします。
先ほどこの形式にコピーした情報といっしょに貼り付けて、ホストされたウェブ 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=code」を「response_type=token」に置き換えます。

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

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

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