組み込みのサインインおよびサインアップウェブページのカスタマイズ - Amazon Cognito
アプリケーションのカスタムロゴを指定するアプリケーションの CSS カスタマイズを指定するユーザープールのアプリケーション UI カスタマイズ設定の指定 (AWS Management Console)ユーザープールのアプリケーション UI カスタマイズ設定の指定 (AWS CLI および AWS API)

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

組み込みのサインインおよびサインアップウェブページのカスタマイズ

AWS Management Console、または AWS CLI や API を使用して、組み込みアプリの UI エクスペリエンスのカスタマイズ設定を指定します。アプリに表示するカスタムのロゴイメージをアップロードできます。カスケードスタイルシート (CSS) を使用して UI をカスタマイズすることもできます。

単一のクライアント (clientId) またはすべてのクライアント (clientId を ALL に設定) にアプリ UI のカスタマイズ設定を指定できます。ALL を指定した場合は、以前に UI のカスタマイズが設定されていないすべてのクライアントにデフォルトの設定が使用されます。特定のクライアントに UI のカスタマイズ設定が指定される場合、ALL 設定にフォールバックされなくなります。

UI のカスタマイズを設定するリクエストのサイズは 135 KB を超えてはなりません。まれに、リクエストヘッダー、CSS ファイル、ロゴの合計が 135 KB を超えることがあります。Amazon Cognito はイメージファイルを Base64 にエンコードします。これにより、100 KB のイメージのサイズが 130 KB に増え、リクエストヘッダーと CSS 用に 5 KB が残ります。リクエストが大きすぎる場合、AWS Management Console または SetUICustomization API request parameters too large リクエストはエラーを返します。ロゴイメージを 100 KB 以下、CSS ファイルを 3 KB 以下に調整します。CSS とロゴのカスタマイズを個別に設定することはできません。

注記

UI をカスタマイズするには、ユーザープールのドメインを設定する必要があります。

Amazon Cognito は、ログインエンドポイント の入力フィールドの上の中央にカスタムロゴを配置します。

ホストされているカスタムの UI ロゴには、350 x 178 ピクセルまで拡大できる PNG、JPG、または JPEG ファイルを選択します。ロゴファイルのサイズは 100 KB 以下で、Amazon Cognito が Base64 にエンコードした後は 130 KB 以下にしてください。API で SetUICustomization に ImageFile を設定するには、ファイルを Base64 でエンコードされたテキスト文字列に変換するか、AWS CLI でファイルパスを指定して、Amazon Cognito にエンコードさせます。

アプリケーションの CSS カスタマイズを指定する

ホストされたアプリページの CSS をカスタマイズできます。ただし、以下の制限があります。

  • 以下の CSS クラス名を使用できます。

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • プロパティ値は HTML を含めることができます。ただし、@import,@supports,@page, または@mediaステートメント、または Javascript の値を除きます。

次の CSS プロパティをカスタマイズできます。

Labels

  • [font-weight] は 100 ～ 900 までの 100 の倍数です。

入力フィールド

  • [width] は含まれるブロックの幅に対してパーセンテージで表したものです。

  • [height] は入力フィールドの高さ (ピクセル (px)) です。

  • [color] はテキストの色です。任意の標準 CSS 色値を使用できます。

  • [background-color] は、入力フィールドの背景色です。任意の標準 CSS 色値を使用できます。

  • [border] は、アプリウィンドウの境界の幅、透明度、色を指定する標準 CSS 値です。幅は 1 px から 100 px までの任意の値を使用できます。透明度は solid または none です。色は任意の標準色値を使用できます。

テキストの説明

  • [padding-top] は、説明欄の上のパディング量です。

  • [padding-bottom] は、説明欄の下のパディング量です。

  • [display] には block または inline のいずれかを設定できます。

  • [font-size] はテキストの説明のフォントサイズです。

送信ボタン

  • [font-size] はボタンテキストのフォントサイズです。

  • [font-weight] はボタンテキストのフォントウェイトです。bold、italic、または normal です。

  • [margin] はボタンの上下左右のマージンサイズを示す 4 つの値の文字列です。

  • [font-size] はテキストの説明のフォントサイズです。

  • [width] はボタンテキストのブロックに対する幅 (パーセント) です。

  • [height] はボタンの高さ (ピクセル (px)) です。

  • [color] はボタンの色です。任意の標準 CSS 色値を使用できます。

  • [background-color] は、ボタンの背景色です。任意の標準色値を使用できます。

バナー

  • [padding] はバナーの上下左右のパディングサイズを示す 4 つの値の文字列です。

  • [background-color] は、バナーの背景色です。任意の標準 CSS 色値を使用できます。

送信ボタンのホバー

  • [color] は、ボタンにカーソルを合わせたときのボタンの前景色です。任意の標準 CSS 色値を使用できます。

  • [background-color] は、ボタンにカーソルを合わせたときのボタンの背景色です。任意の標準 CSS 色値を使用できます。

ID プロバイダーボタンのホバー

  • [color] は、ボタンにカーソルを合わせたときのボタンの前景色です。任意の標準 CSS 色値を使用できます。

  • [background-color] は、ボタンにカーソルを合わせたときのボタンの背景色です。任意の標準 CSS 色値を使用できます。

パスワードのチェックが有効ではありません

  • [color] は "Password check not valid" メッセージのテキスト色です。任意の標準 CSS 色値を使用できます。

背景

  • [background-color] は、アプリウィンドウの背景色です。任意の標準 CSS 色値を使用できます。

エラーメッセージ

  • [margin] は上下左右のマージンサイズを示す 4 つの値の文字列です。

  • [padding] はパディングサイズです。

  • [font-size] はフォントサイズです。

  • [width] はエラーメッセージの幅を含まれるブロックに対するパーセンテージで表したものです。

  • [background] は、エラーメッセージの背景色です。任意の標準 CSS 色値を使用できます。

  • [border] は境界の幅、透明度、色を指定する 3 つの値の文字列です。

  • [color] はエラーメッセージのテキスト色です。任意の標準 CSS 色値を使用できます。

  • [box-sizing] は含める必要があるサイズのプロパティ (幅と高さ) をブラウザに指示するために使用されます。

ID プロバイダーボタン

  • [height] はボタンの高さ (ピクセル (px)) です。

  • [width] はボタンテキストの幅を含まれるブロックに対するパーセンテージで示したものです。

  • [text-align] はテキストの整列設定です。left、right または center のいずれかを設定できます。

  • [margin-bottom] は下側マージンの設定です。

  • [color] はボタンの色です。任意の標準 CSS 色値を使用できます。

  • [background-color] は、ボタンの背景色です。任意の標準 CSS 色値を使用できます。

  • [border-color] は、ボタンの境界の色です。任意の標準 CSS 色値を使用できます。

ID プロバイダーの説明

  • [padding-top] は、説明欄の上のパディング量です。

  • [padding-bottom] は、説明欄の下のパディング量です。

  • [display] には block または inline のいずれかを設定できます。

  • [font-size] は説明のフォントサイズです。

法務関連のテキスト

  • [color] はテキストの色です。任意の標準 CSS 色値を使用できます。

  • [font-size] はフォントサイズです。

注記

リーガルテキストをカスタマイズする際は、サインインページのソーシャル ID プロバイダーに表示されるメッセージ「We won't post to any of your accounts without asking first」(最初に確認せずにアカウントに投稿することはありません) をカスタマイズします。

ロゴ

  • [max-width] は最大幅を含まれるブロックに対するパーセンテージで表したものです。

  • [max-height] は最大高を含まれるブロックに対するパーセンテージで表したものです。

入力フィールドのフォーカス

  • [border-color] は、入力フィールドの色です。任意の標準 CSS 色値を使用できます。

  • [outline] は入力フィールドの境界線の幅 (ピクセル) です。

ソーシャルボタン

  • [height] はボタンの高さ (ピクセル (px)) です。

  • [text-align] はテキストの整列設定です。left、right または center のいずれかを設定できます。

  • [width] はボタンテキストの幅を含まれるブロックに対するパーセンテージで示したものです。

  • [margin-bottom] は下側マージンの設定です。

パスワードのチェックが有効です

  • [color] は "Password check valid" メッセージのテキスト色です。任意の標準 CSS 色値を使用できます。

ユーザープールのアプリケーション UI カスタマイズ設定の指定 (AWS Management Console)

AWS Management Consoleを使用して、アプリの UI カスタマイズ設定を指定できます。

注記

以下の URL を、ユーザープールの指定を含めて作成し、ブラウザに入力することで、カスタマイズが反映されているホストされた UI を表示できます。 https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> 変更がコンソールに反映されるまで最大 1 分待ってからブラウザを最新表示にする必要がある場合があります。

ドメインは、[Domain] (ドメイン) の下の [App integration] (アプリケーション統合) タブに表示されます。アプリケーションクライアント ID およびコールバック URL は [App clients] (アプリケーションクライアント) に表示されています。

アプリ UI のカスタマイズ設定を指定する

  1. Amazon Cognito コンソールにサインインします。

  2. ナビゲーションペインで [User Pools] (ユーザープール) を選択してから、編集するユーザープールを選択します。

  3. [App integration] (アプリケーションの統合) タブを選択します。

  4. すべてのアプリケーションクライアントの UI 設定をカスタマイズするには、[Hosted UI customization] (ホストされた UI のカスタマイズ) を探し、[Edit] (編集) を選択します。

  5. 1 つのアプリケーションクライアントの UI 設定をカスタマイズするには、[App clients] (アプリケーションクライアント) を探し、変更したいアプリケーションクライアントを選択します。[ホストされた UI のカスタマイズ] を探し、[編集] を選択します。アプリケーションクライアントをユーザープールのデフォルトのカスタマイズからクライアント固有のカスタマイズに切り替えるには、[Use client-level settings] (クライアントレベルの設定を使用する) を選択します。

  6. 独自のロゴイメージファイルをアップロードするには、[Choose file] (ファイルを選択) または [Replace current file] (現在のファイルを置き換える) を選択します。

  7. ホストされた UI CSS をカスタマイズするには、CSS template.css をダウンロードし、テンプレートをカスタマイズ値に変更します。ホストされた UI で使用できるのは、テンプレートに含まれるキーのみです。追加された CSS キーは UI に反映されません。CSS ファイルをカスタマイズしたら、[Choose file] (ファイルの選択) または [Replace current file] (現在のファイルを置き換える) を選択し、カスタム CSS ファイルをアップロードします。

ユーザープールのアプリケーション UI カスタマイズ設定の指定 (AWS CLI および AWS API)

次のコマンドを使用して、ユーザープールのアプリ UI カスタマイズ設定を指定します。

ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を取得するには、次の API オペレーションを使用します。
ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を設定するには、次の API オペレーションを使用します。

  • イメージファイルからの AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • Base64 バイナリテキストとしてエンコードされたイメージを含む AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API:SetUICustomization