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

最終更新日: 2020 年 1 月 23 日

ホストされたウェブ UIAmazon Cognito のユーザープールに設定したいのですが、どの設定を有効にすれば良いのかがわかりません。セットアップするにはどうすれば良いですか ?

簡単な説明

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=tokenresponse_type=code に置き換えます。

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

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

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

この記事はお役に立ちましたか?

改善できることはありますか?


さらにサポートが必要な場合