品牌设计师和自定义托管登录 - Amazon Cognito
快速设置详细设置API 操作

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

品牌设计师和自定义托管登录

品牌设计器是管理登录网页的视觉设计和编辑工具。它内置在亚马逊 Cognito 主机中。在品牌设计器中，您可以从登录页面的预览开始，然后进入快速设置选项或带有高级选项的详细视图。您可以修改和预览样式参数或添加自定义背景图像和徽标。您可以配置浅色模式和深色模式。

Amazon Cognito 用户池的品牌设计师可视化编辑器预览。

首先，创建一种可以应用于用户池或应用程序客户端的样式。

从品牌设计师入门

  1. 通过 “域名” 选项卡创建域名，或更新现有域名。在品牌版本下，将您的域名设置为使用托管登录。

  2. 删除现有的应用程序客户端样式（如果有）。

    1. 在应用程序客户端菜单中，选择您的应用程序客户端。

    2. 在托管登录方式下，选择分配给您的应用程序客户端的样式。

    3. 选择 “删除样式”。确认您的选择。

  3. 导航到用户池中的托管登录菜单。如果您还没有，请按照提示选择包含托管登录的功能计划。如果您想在不进行更改的情况下查看品牌设计师，也可以选择 “预览此功能”。

  4. 在 “样式” 下，选择 “创建样式”。

  5. 选择要为其分配样式的应用程序客户端，然后选择创建。您也可以创建新的应用程序客户端。

  6. 亚马逊 Cognito 主机推出品牌设计器。

  7. 选择要开始编辑的选项卡，或者选择启动编辑器并进入快速设置。以下选项卡可用：

    预览

    在托管登录页面中查看您当前选择的内容。

    基础

    设置总体主题，配置指向外部身份提供商的链接，并设置表单字段的样式。

    组件

    为页眉、页脚和各个 UI 元素配置样式。

  8. 要选择初始设置，请进入快速设置。选择 “更改设置” 类别，然后选择 “快速设置”。选择 “继续” 后，品牌设计器将启动并提供一组基本选项供您配置。

快速设置

Launch 品牌设计器按钮为您的托管登录配置加载可视化编辑器，您可以在其中从各种主要的自定义选项中进行选择。当您做出选择时，Amazon Cognito 会在预览窗口中呈现您的托管登录更改。要返回详细设置菜单，请选择更改设置类别按钮。

整体外观和感觉应该如何？

为托管登录配置基本主题设置。

显示模式

为托管登录选择浅模式、暗模式或自适应体验。当 Amazon Cognito 呈现托管登录时，自适应设置会遵循用户的浏览器偏好。选择浏览器自适应模式时，可以为浅色和深色模式选择不同的颜色和徽标图像。

Spacing

设置页面中元素之间的默认间距。

边框半径

设置元素外边框的圆角深度。

页面背景应该是什么样子？
背景类型

“显示图像” 复选框指示您是想要背景图像还是要设置纯色背景色。

  1. 要使用图像，请选择 “显示图像”，然后为浅色和深色模式选择背景图像。您还可以为图像未覆盖的背景区域设置深色模式和浅色模式的页面背景颜色。

  2. 要仅使用背景颜色，请取消选择 “显示图像”，然后选择浅色模式和深色模式页面背景颜色。

表格应该是什么样子？

为托管登录的表单元素配置设置。表单项的示例包括登录和代码提示。

水平对齐

设置表单域的水平对齐方式。

表单徽标

设置徽标图片的位置。

徽标图片

选择要包含在浅色和深色模式的表单元素中的徽标图像文件。要上传图片，请选择徽标图片下拉列表，选择添加新资源，然后添加徽标文件。

主要品牌颜色

为浅色和深色模式设置主题颜色。此颜色将作为背景色应用于所有归类为主要元素的元素。

标题应该是什么样子？

选择是否要在托管登录页面中添加标题。标题可以包含徽标图片。

标题徽标

在标题中设置徽标图片的位置。

徽标图片

选择要包含在标题中的徽标位置和徽标图像文件。要上传图片，请选择徽标图片下拉列表，选择添加新资源，然后添加徽标文件。

标头背景颜色

设置标题背景的浅色和深色模式颜色。

详细设置

在详细设置视图中，您可以修改基础和组件中的各个组件。“预览” 选项卡显示当前上下文中包含您的自定义设置的托管登录的预览。

托管登录组件详细配置的 AWS Management Console 屏幕截图。

要进入组件的可视化编辑器，请在组件的磁贴中选择编辑图标。在主题工作室编辑器中，您可以使用更改设置类别按钮在组件之间切换。

基础

应用程序风格

配置托管登录配置的基础知识。此类别包含整体主题、文本间距以及页眉和页脚的设置。

显示模式

为托管登录页面选择浅模式、暗模式或自适应体验。选择浏览器自适应模式时，可以为浅色和深色模式选择不同的颜色和徽标图像。

Spacing

设置页面中元素之间的默认间距。

身份验证行为

为将您的用户连接到外部身份提供商的按钮配置样式（IdPs）。本节包括域搜索输入选项，让托管登录提示用户输入电子邮件地址，并将其与其 SAML 身份提供商标识符进行匹配。

表单行为

配置输入表单的样式：输入的位置、颜色和元素的对齐方式。

组件

按钮

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请求，以获取不超过最大请求大小的参数组。这些请求不会导致将未指定的参数设置为默认值，因此您可以发送部分请求，而不会对现有设置产生任何影响。

有些资源对您可以提交的文件类型有限制。

资产 接受的文件扩展名
FAVICON_ICO ico
FAVICON_SVG svg
电子邮件_图片 png、svg、jpeg
短信_图形 png、svg、jpeg
AUTH_APP_GRAPH png、svg、jpeg
密码_图形 png、svg、jpeg
密码_图形 png、svg、jpeg
PAGE_HEADER_LOGO png、svg、jpeg
页面标题_背景 png、svg、jpeg
PAGE_FOOTER_LOGO png、svg、jpeg
页面_页脚_背景 png、svg、jpeg
页面_背景 png、svg、jpeg
表单背景 png、svg、jpeg
表单徽标 png、svg、jpeg
IDP_BUTTON_ICON 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. 使用设置为的 DescribeManagedLoginBrandingByClientAPI 请求检索品牌风格的ReturnMergedResources设置true。以下是一个示例请求正文。

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

  4. DescribeManagedLoginBrandingByClient使用您的自定义内容修改的输出。

    1. 响应正文被封装在不属于创建和更新操作语法的ManagedLoginBranding元素中。移除 JSON 对象的这个顶层。

    2. 要替换图像，请将该Bytes值替换为每个图像文件的 Base64 编码二进制数据。

    3. 要更新设置，请修改Settings对象的输出并将其包含在下一个请求中。Amazon Cognito 会忽略您的Settings对象中任何不在架构中但您在 API 响应中收到的值。

  5. 在CreateManagedLoginBranding或UpdateManagedLoginBranding请求中使用更新的响应正文。如果此请求的大小超过 2 MB，请将其分成多个请求。除非您另行指定，否则这些操作适用于原始设置保持不变的PATCH模型。