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 のサインインページが新しいブラウザタブまたはウィンドウで開きます。