Amazon Cognito のホストされたウェブ UI を設定する方法を教えてください。
最終更新日: 2020 年 1 月 23 日
ホストされたウェブ 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 スコープを選択します。例えば、電話、E メール、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=token を response_type=code に置き換えます。
ホストされたウェブ UI を起動する
注 : ホストされたウェブ UI の URL を手動で作成した場合は、代わりにその URL をウェブブラウザに入力します。
- Amazon Cognito コンソールで、[ユーザープールの管理] を選択し、次にユーザープールを選択します。
- 左側のナビゲーションペインで、[アプリ統合] の下にある [アプリクライアントの設定] を選択します。
- Hosted UI の下で、 [Launch Hosted UI] を選択します。ホストされたウェブ UI のサインインページが新しいブラウザタブまたはウィンドウで開きます。