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

ブランディングエディタによるマネージドログインのカスタマイズ

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

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

テキストとローカリゼーション

ブランディングエディタでテキストを変更またはローカライズすることはできません。代わりに、ユーザーに配信する URL に lang クエリパラメータを追加します。このパラメータにより、マネージドログインページは利用可能な言語の 1 つにローカライズされます。詳細については、「マネージドログインのローカリゼーション」を参照してください。

Quick Setup

[ブランディングエディタを起動] ボタンを選択すると、マネージドログイン設定のビジュアルエディタがロードされ、さまざまな主要カスタマイズオプションから選択できます。選択するに従って、Amazon Cognito はマネージドログインの変更をプレビューウィンドウに反映します。詳細設定メニューに戻るには、[設定カテゴリの変更] ボタンを選択します。

詳細設定

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

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

基盤

アプリスタイル

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

認証動作

ユーザーを外部 ID プロバイダー (IdP) に接続するボタンのスタイルを設定します。このセクションには、マネージドログインでユーザーに 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 でエンコードされたバイナリ形式の画像ファイルの配列です。

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

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 スキーマ形式で管理します。ブランディングスタイルをプログラムで更新する方法は、次のとおりです。