ブランドデザイナーとマネージドログインのカスタマイズ - Amazon Cognito
Quick Setup詳細設定API オペレーション

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

ブランドデザイナーとマネージドログインのカスタマイズ

ブランドデザイナーは、マネージドログインウェブページ用のビジュアルデザインおよび編集ツールです。Amazon Cognito コンソールに組み込まれています。ブランドデザイナーでは、ログインページのプレビューから開始し、クイックセットアップオプションまたは詳細ビューに進み、詳細オプションを使用できます。スタイルパラメータを変更およびプレビューしたり、カスタム背景イメージとロゴを追加したりできます。ライトモードとダークモードを設定できます。

Amazon Cognito ユーザープールのブランドデザイナービジュアルエディタのプレビュー。

まず、ユーザープールまたはアプリケーションクライアントに適用できるスタイルを作成します。

ブランドデザイナーの使用を開始するには

  1. ドメインタブからドメインを作成するか、既存のドメインを更新します。 ブランディングバージョンで、マネージドログインを使用するようにドメインを設定します。

  2. 既存のアプリクライアントスタイルがある場合は削除します。

    1. アプリクライアントメニューで、アプリクライアントを選択します。

    2. 「マネージドログインスタイル」で、アプリクライアントに割り当てられたスタイルを選択します。

    3. スタイルの削除を選択します。[Confirm] (確認) をクリックして、選択内容を確認します。

  3. ユーザープールのマネージドログインメニューに移動します。まだの場合は、プロンプトに従って、マネージドログインを含む機能プランを選択します。ブランドデザイナーを変更せずにチェックアウトする場合は、この機能のプレビューを選択することもできます。

  4. スタイル で、スタイルの作成 を選択します。

  5. スタイルを割り当てるアプリケーションクライアントを選択し、作成を選択します。新しいアプリケーションクライアントを作成することもできます。

  6. Amazon Cognito コンソールでブランドデザイナーを起動します。

  7. 編集を開始するタブを選択するか、起動エディタを選択してクイックセットアップを入力します。以下のタブを使用できます。

    プレビュー

    マネージドログインページで、現在の選択内容がどのように表示されるかを確認します。

    基盤

    全体的なテーマを設定し、外部 ID プロバイダーへのリンクとスタイルフォームフィールドを設定します。

    コンポーネント

    ヘッダー、フッター、および個々の UI 要素のスタイルを設定します。

  8. 初期設定を選択するには、クイックセットアップを入力します。設定変更カテゴリを選択し、高速セットアップを選択します。続行を選択すると、ブランドデザイナーは、設定するための一連の基本オプションで起動します。

Quick Setup

Launch branding designer ボタンは、さまざまな主なカスタマイズオプションから選択できるマネージドログイン設定のビジュアルエディタをロードします。選択を行うと、Amazon Cognito はマネージドログインの変更をプレビューウィンドウでレンダリングします。詳細設定メニューに戻るには、変更設定カテゴリボタンを選択します。

全体的なルックアンドフィールはどのようなものですか？

マネージドログインの基本テーマ設定を行います。

Display mode (表示モード)

マネージドログインのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。アダプティブ設定は、Amazon Cognito がマネージドログインをレンダリングするときに、ユーザーのブラウザ設定に委ねられます。ブラウザ適応モードを選択すると、ライトモードとダークモードにさまざまな色とロゴイメージを選択できます。

[Spacing] (間隔)

ページの要素間のデフォルトの間隔を設定します。

境界半径

要素の外枠の丸め深度を設定します。

ページの背景はどのように表示されますか？
バックグラウンドタイプ

イメージの表示チェックボックスは、背景イメージを設定するか、背景色を設定するかを示します。

  1. イメージを使用するには、イメージを表示 を選択し、明暗モードの背景イメージを選択します。また、イメージでカバーされていない背景エリアに、ダークモードとライトモードのページ背景色を設定することもできます。

  2. 背景に色のみを使用するには、画像を表示 の選択を解除し、ライトモードとダークモードのページ背景色を選択します。

フォームはどのように表示されますか？

マネージドログインのフォーム要素の設定を行います。フォーム項目の例として、ログインプロンプトとコードプロンプトがあります。

水平方向の配置

フォームフィールドの水平方向の配置を設定します。

フォームロゴ

ロゴイメージの位置を設定します。

ロゴイメージ

ライトモードとダークモードのフォーム要素に含めるロゴイメージファイルを選択します。イメージをアップロードするには、ロゴイメージドロップダウンを選択し、新しいアセットを追加を選択し、ロゴファイルを追加します。

プライマリブランドの色

明暗モードのテーマ色を設定します。この色は、プライマリとして分類されたすべての要素に背景色として適用されます。

ヘッダーの表示方法

マネージドログインページにヘッダーを含めるかどうかを選択します。ヘッダーにはロゴイメージを含めることができます。

ヘッダーロゴ

ヘッダーでロゴイメージの位置を設定します。

ロゴイメージ

ヘッダーに含めるロゴ位置とロゴイメージファイルを選択します。イメージをアップロードするには、ロゴイメージドロップダウンを選択し、新しいアセットを追加を選択し、ロゴファイルを追加します。

ヘッダーの背景色

ヘッダーの背景のライトモードとダークモードの色を設定します。

詳細設定

詳細設定ビューでは、 Foundation と Components の個々のコンポーネントを変更できます。プレビュータブには、現在のコンテキストでのマネージドログインのプレビューとカスタマイズが表示されます。

マネージドログインコンポーネントの詳細な設定の AWS Management Console スクリーンショット。

コンポーネントのビジュアルエディタを入力するには、コンポーネントのタイルの編集アイコンを選択します。テーマスタジオエディタから、変更設定カテゴリボタンを使用してコンポーネントを切り替えることができます。

基盤

アプリスタイル

マネージドログイン設定の基本を設定します。このカテゴリには、全体的なテーマ、テキスト間隔、ページヘッダーとフッターの設定があります。

Display mode (表示モード)

マネージドログインページのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。ブラウザ適応モードを選択すると、ライトモードとダークモードにさまざまな色とロゴイメージを選択できます。

[Spacing] (間隔)

ページの要素間のデフォルトの間隔を設定します。

認証動作

ユーザーを外部 ID プロバイダー (IdPs) に接続するボタンのスタイルを設定します。このセクションには、E メールアドレスのマネージドログインプロンプトユーザーにドメイン検索入力を指定し、それらを SAML ID プロバイダー識別子と照合させるオプションが含まれています。

フォームの動作

入力フォームのスタイルを設定します。入力の配置、色、要素の配置。

コンポーネント

ボタン

Amazon Cognito がマネージドログインページでレンダリングするボタンのスタイル。

分割

入力フォームや外部プロバイダーのサインインセレクタなどのマネージドログイン要素間の分割線と境界のスタイル。

ドロップダウン

ドロップダウンメニューのスタイル。

ファビコン

Amazon Cognito がタブとブックマークアイコンに提供するイメージのスタイル。

フォーカスリング

現在選択されている入力を示すハイライトのスタイル。

フォームコンテナ

フォームをバインドする要素のスタイル。

グローバルフッター

Amazon Cognito がマネージドログインページの下部に表示するフッターのスタイル。

グローバルヘッダー

Amazon Cognito がマネージドログインページの上部に表示するヘッダーのスタイル。

表示

エラーメッセージと成功メッセージのスタイル。

オプションコントロール

チェックボックス、複数選択、その他の入力プロンプトのスタイル。

ページ背景

マネージドログインの全体的な背景のスタイル。

入力

フォームフィールド入力プロンプトのスタイル。

リンク

マネージドログインページのハイパーリンクのスタイル。

ページのテキスト

ページ内テキストのスタイル。

フィールドのテキスト

フォーム入力を囲むテキストのスタイル。

マネージドログインブランドのための API および SDK オペレーション

API オペレーション CreateManagedLoginBranding および UpdateManagedLoginBranding を使用して、マネージドログインスタイルにブランドを適用することもできます。これらのオペレーションは、別のアプリケーションクライアントまたはユーザープールのブランドスタイルの同一またはわずかに変更されたバージョンを作成するのに最適です。API オペレーション DescribeManagedLoginBranding を使用して既存のスタイルのマネージドログインブランドをクエリし、必要に応じて出力を変更して別のリソースに適用します。

UpdateManagedLoginBranding オペレーションでは、スタイルが適用されるアプリケーションクライアントは変更されません。アプリクライアントに割り当てられた既存のスタイルのみを更新します。アプリクライアントのスタイルを完全に置き換えるには、DeleteManagedLoginBranding で既存のスタイルを削除し、 で新しいスタイルを割り当てますCreateManagedLoginBranding。Amazon Cognito コンソールでも同じです。既存のスタイルを削除して新しいスタイルを作成する必要があります。

API または SDK リクエストでマネージドログインブランドを設定するには、設定をDocumentデータ型に変換された JSON ファイルに埋め込む必要があります。以下は、ブランドスタイルを設定するプログラムによるリクエストを生成するために追加できるイメージと、イメージのガイダンスです。

イメージアセット

CreateManagedLoginBranding と UpdateManagedLoginBranding には Assetsパラメータが含まれます。このパラメータは、base64 でエンコードされたバイナリ形式のイメージファイルの配列です。

注記

ブランドスタイルを作成または更新するプログラムによるリクエストは、リクエストサイズが 2 MB 以下である必要があります。リクエスト内のアセットがこの制限を超える可能性があります。このような場合は、最大リクエストサイズを超えないパラメータのグループに対するUpdateManagedLoginBrandingリクエストを複数のリクエストに分割します。これらのリクエストでは、指定されていないパラメータがデフォルトに設定されないため、既存の設定に影響を与えることなく、部分的なリクエストを送信できます。

一部のアセットには、送信できるファイルタイプに制限があります。

アセット 使用できるファイル拡張子
FAV™_ICO ico
FAV™_SVG サービス
EMAIL_GRAPHIC png、svg、jpeg
SMS_GRAPHIC png、svg、jpeg
AUTH_APP_GRAPHIC png、svg、jpeg
パスワード_グラフィック png、svg、jpeg
PASSKEY_GRAPHIC png、svg、jpeg
PAGE_HEADER_LOGO png、svg、jpeg
PAGE_HEADER_BACKGROUND png、svg、jpeg
PAGE_FOOTER_LOGO png、svg、jpeg
PAGE_FOOTER_BACKGROUND png、svg、jpeg
PAGE_BACKGROUND png、svg、jpeg
FORM_BACKGROUND png、svg、jpeg
FORM_LOGO png、svg、jpeg
IDP_BUTTON_™ ico、svg

SVG タイプのファイルは、次の属性と要素をサポートします。

Attributes
accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan
Elements
svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence

マネージドログインブランドオペレーション用のツール

Amazon Cognito は、マネージドログインブランド設定オブジェクトの JSON スキーマ形式でファイルを管理します。以下は、ブランドスタイルをプログラムで更新する方法です。

ユーザープール API でブランドを更新するには

  1. Amazon Cognito コンソールで、ユーザープールのマネージドログインメニューからデフォルトのマネージドログインブランドスタイルを作成します。アプリクライアントに割り当てます。

  2. スタイルを作成したアプリクライアントの ID を記録します。例: 1example23456789。

  3. を ReturnMergedResourcesに設定して DescribeManagedLoginBrandingByClient API リクエストを使用して、ブランドスタイルの設定を取得しますtrue。リクエスト本文の例を次に示します。

    {
   "ClientId": "1example23456789",
   "ReturnMergedResources": true,
   "UserPoolId": "us-east-1_EXAMPLE"
}

  4. カスタマイズDescribeManagedLoginBrandingByClientを使用して の出力を変更します。

    1. レスポンス本文は、作成および更新オペレーションの構文の一部ではないManagedLoginBranding要素でラップされます。JSON オブジェクトのこの最上位レベルを削除します。

    2. イメージを置き換えるには、 Bytes値を各イメージファイルの Base64-encodedされたバイナリデータに置き換えます。

    3. 設定を更新するには、 Settings オブジェクトの出力を変更し、次のリクエストに含めます。Amazon Cognito は、API レスポンスで受け取るスキーマにないSettingsオブジェクトの値を無視します。

  5. CreateManagedLoginBranding または UpdateManagedLoginBranding リクエストで、更新されたレスポンス本文を使用します。このリクエストのサイズが 2 MB を超える場合は、複数のリクエストに分割します。これらのオペレーションは、特に指定しない限り、元の設定が変更されないPATCHモデルで機能します。