Amazon Cognito 用にホストされたウェブ UI を設定するにはどうすればよいですか?

所要時間2分

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

簡単な説明

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

設定の方法や使用できる設定 (有効にする OAuth 2.0 のフロータイプやスコープなど) がわからない場合は、この記事の手順に従ってください。

解決策

ユーザープールを作成していない場合は作成して、そのユーザープールにアプリクライアントを作成します。次に、以下の手順に従います:

注: これらの手順では、新しい Amazon Cognito コンソールを使用します。

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

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

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

Amazon Cognito コンソールで、[ユーザープール] を選択し、次に自分のユーザープールを選択します。
[アプリ統合]で、[アプリクライアントと分析] セクションからアプリクライアントを選択します。
[ホストされた UI] セクションから [編集] を選択します。
次の操作を行います。
[許可されているコールバック URL] には、認証コードを受け取るウェブアプリケーションの URL を入力します。ユーザーはサインインすると、ここにリダイレクトされます。
[許可されているサインアウト URL (オプション)] に、ユーザーがサインアウトしたときにリダイレクトする URL を入力します。
[ID プロバイダー] では、ドロップダウンリストから [Cognito ユーザープール] を選択します。
[OAuth 2.0 付与タイプ] では、[認証コード付与] または [暗黙的な付与] の OAuth 2.0 認証フローのいずれかを選択します。[認証コード付与] タイプは、機密クライアントやパブリッククライアントが認証コードをアクセストークンと交換する際に使用します。[暗黙的な付与] タイプは、認証コード付与が使用できない特定の理由がある場合にのみ使用します。
[OpenID Connect のスコープ] については、Amazon Cognito でユーザー認証時にトークンに追加する openid スコープとその他の OAuth スコープを選択します。例えば、電話や電子メールです。
[カスタムスコープ] では、このアプリ用に承認するカスタムスコープを選択します。
[変更を保存] を選択します。

詳細については、「Configuring a user pool app client」を参照してください。

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

ホストされたウェブ UI では、カスタムロゴを追加するか、CSS をカスタマイズすることができます。詳細については、「Customizing the built-in sign-in and sign-up webpages」を参照してください。

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

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

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

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

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

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

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