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

簡単な説明

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

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

解決方法

まだユーザープールの作成をしていない場合は、ユーザープールにアプリクライアントの作成をします。その後、以下の指示に従ってください。

注: 以下の指示では、新しい Amazon Cognito コンソールを使用します。

ユーザープールにドメイン名を追加する

1. Amazon Cognito コンソールで、[ユーザープール] を選択し、次にユーザープールを選択します。
2. [アプリ統合] で [ドメイン名] を選択し、[アクション] を選択します。
3. ホストされた Amazon Cognito ドメインに独自のドメインプレフィックスを追加するには、[Cognito ドメインの作成] を選択します。または、[カスタムドメインの作成] を選択して独自のカスタムドメインを追加します。

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

1. Amazon Cognito コンソールで、[ユーザープール] を選択し、次にユーザープールを選択します。
2. [アプリ統合] で、[アプリクライアントと分析] セクションからアプリクライアントを選択します。
3. Hosted UI セクションから [編集] を選択します。
4. 以下の操作を実行します。
   [許可されたコールバック URL] に、認証コードを受け取るウェブアプリケーションの URL を入力します。サインインすると、ユーザーはここにリダイレクトされます。
   [許可されたサインアウト URL - オプション] に、サインアウト時にユーザーをリダイレクトする URL を入力します。
   ID プロバイダーでは、ドロップダウンリストから [Cognito ユーザープール] を選択します。
   [OAuth 2.0 付与タイプ] では、OAuth 2.0 認証フローの [承認コード] 付与または [暗黙的] 付与のいずれかを選択します。認証コード付与タイプは、機密および公開クライアントが認証コードをアクセストークンに交換する場合に使用されます。暗黙的付与タイプは、認可コード付与が使用できないという特定の理由がある場合にのみ使用されます。詳細については、「Amazon Cognito ユーザープール OAuth 2.0 の付与とは」を参照してください。
   [OpenID Connect スコープ] では、OpenID と、Amazon Cognito がユーザーの認証時にトークンに追加する他の OAuth スコープを選択します。例: 電話と E メール
   [カスタムスコープ] では、このアプリで承認したいカスタムスコープを選択します。
5. [変更を保存] を選択します。

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

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

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

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

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

1. Amazon Cognito コンソールで、[ユーザープール] を選択し、次にユーザープールを選択します。
2. [アプリ統合] で、[ドメイン] セクションにあるドメイン URL をコピーします。次に、URL をテキストエディタに貼り付けて、参照できるようにします。
3. [アプリクライアントと分析] で、[クライアント名] をクリックします。
4. クライアント ID をクリップボードにコピーします。次に、その ID をテキストエディタに貼り付けて参照できるようにします。
5. 許可されたコールバック URL の 1 つをクリップボードにコピーします。次に、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
   -または-
   ログインエンドポイントのデフォルト URL にアクセスするには、アプリクライアントセクションの [Hosted UI の表示] を選択します。次に、前述の方法で URL の一部を置き換えます。

先に、[OAuth 2.0 付与タイプ] で認証コードの付与を有効にした場合、ユーザーがサインインしたときに Amazon Cognito がこの URL を使って認証コードを返します。先に、[OAuth 2.0 付与タイプ] の [暗黙的付与] を有効にして、ユーザーのサインイン時に、Amazon Cognito がアクセストークンを代わりに返すように設定する場合は、URL の「response_type=code」を「response_type=token」に置き換えます。

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

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

1. Amazon Cognito コンソールで、[ユーザープール] を選択し、次にユーザープールを選択します。
2. [アプリ統合] で、[アプリクライアントと分析] セクションから [クライアント名] をクリックします。
3. Hosted UI の下で、[Hosted UI の表示] を選択します。ホストされたウェブ UI のサインインページが新しいブラウザタブまたはウィンドウで開きます。

関連情報

ユーザープールの開始方法