Amazon Cognito
開発者ガイド

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

AWS マネジメントコンソール、または AWS CLI や API を使用して、組み込みアプリの UI エクスペリエンスのカスタマイズ設定を指定します。アプリに表示するカスタムのロゴイメージをアップロードできます。また、多くの CSS のカスタマイズを選択できます。

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

注記

この機能を使用するには、ユーザープールに関連付けられているドメインがある必要があります。

ロゴのイメージファイルの最大サイズは 100 KB です。

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

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

  • CSS クラス名は次のリストからのみ選択できます。

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • プロパティ値には、HTML、@import@supports@page、または @media ステートメント、または Javascript を含めることはできません。

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

ラベル
  • [font-weight] は 100 ~ 900 までの 100 の倍数です。

入力フィールド
  • [width] は幅を含まれるブロックに対するパーセンテージで表したものです。

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

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

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

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

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

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

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

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

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

  • [font-weight] はボタンテキストのフォントウェイトです。bolditalic、または 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] はテキストの整列設定です。leftright または center のいずれかを設定できます。

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

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

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

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

ID プロバイダーの説明
  • [padding-top] は、説明欄の上のパディング量です。

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

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

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

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

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

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

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

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

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

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

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

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

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

パスワードのチェックが有効です
  • [color] は "Password check valid" メッセージのテキスト色です。任意の標準 CSS 色値を使用できます。

ユーザープールのアプリ UI カスタマイズ設定の指定 (AWS マネジメントコンソール)

AWS マネジメントコンソールを使用して、アプリの UI カスタマイズ設定を指定できます。

注記

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

ドメインは [ドメイン名] タブに表示されています。アプリクライアント ID およびコールバック URL は [アプリクライアントの設定] タブに表示されています。

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

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

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

  3. [UI のカスタマイズ] タブを選択します。

  4. [カスタマイズするアプリクライアント] で、以前に [アプリクライアント] タブで作成したアプリクライアントのドロップダウンメニューからカスタマイズするアプリを選択します。

  5. 独自のロゴイメージファイルをアップロードするには、[Choose a file (ファイルを選択する)] を選択するか、[ロゴ (オプション)] ボックスにファイルをドラッグします。

  6. [CSS のカスタマイズ (オプション)] で、さまざまなプロパティをデフォルト値から変更することで、アプリの外観をカスタマイズできます。

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

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

ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を取得するには

ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を設定するには

  • AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <path-to-logo-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API: SetUICustomization