本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。 # 将品牌应用于托管登录页面 您可能想在身份验证服务和应用程序之间提供一致的用户体验。您可以通过 AWS SDK 中的自定义表单和后端 API 操作或托管登录来实现此目标。托管登录和经典托管 UI 是应用程序中提供用户池身份验证的组件的 Web 前端。要将托管身份验证服务与应用程序 UX 同步，您有两个自定义选项：品牌编辑器和托管 UI 品牌。您可以在 Amazon Cognito 控制台中使用用户池 API 操作来选择自己的首选体验。 **品牌编辑器** [品牌编辑器](managed-login-brandingeditor.md)是[托管登录](cognito-user-pools-managed-login.md)（最新的用户池 UI 体验）的最新自定义选项。品牌编辑器是一个无代码的可视化编辑器，用于管理托管登录页面的资产和样式，同时提供一组 API 操作，支持以编程方式配置大量配置选项。配置了[域](cognito-user-pools-assign-domain.md)和托管登录的用户池会自动呈现品牌设计器版本的登录页面。 **托管 UI（经典）品牌** [托管 UI（经典）品牌体验](hosted-ui-classic-branding.md)有两个选项：修改一个具有固定样式选项的层叠样式表（CSS）文件，以及添加自定义徽标图像。您可以在 Amazon Cognito 控制台中或通过[设置 UICustomization API 操作来设置](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)这些选项。在该服务推出时，Amazon Cognito 只有这个选项。配置了[域](cognito-user-pools-assign-domain.md)和托管 UI 品牌版本的用户池会自动呈现经典版本的登录页面。您的[功能计划](cognito-sign-in-feature-plans.md)也可能仅支持托管 UI。 **注意** 品牌编辑器和经典品牌体验会修改托管身份验证服务的视觉属性。目前，您无法修改托管登录页面上显示的文本，只能将本地化应用于几种语言中的一种。有关本地化的更多信息，请参阅[托管登录本地化](cognito-user-pools-managed-login.md#managed-login-localization)。 ## 选择品牌体验并分配样式 在 Amazon Cognito 控制台中，新用户池默认为**托管登录**品牌体验。您在托管登录可用之前设置的用户池将显示**托管 UI（经典）**品牌。您可以在托管登录和托管 UI 品牌之间切换。当您更改**品牌版本**时，Amazon Cognito 会立即将更改应用于您的用户池域的用户交互式页面。在托管登录和托管 UI 中，您的用户池可以为每个应用程序客户端设置一种样式。 每个应用程序客户端可以有不同的品牌*样式*，但是一个用户池域只能用于托管登录或托管 UI 中的一种。样式是指应用于应用程序客户端的一组自定义设置。每个用户池可以设置一个[自定义域](cognito-user-pools-add-custom-domain.md)和一个[前缀域](cognito-user-pools-assign-domain-prefix.md)。您可以为自定义域和前缀域分配不同的品牌版本。但是，如果您还有自定义域，则前缀域的功能并不完整：`.well-known` OIDC 发现端点*仅* 提供自定义域的路径。在具有此配置的用户池中，前缀域只能用于不需要端点发现（`openid-configuration`）的操作。由于用户池的这些属性，您在每个用户池中只能有效使用一种品牌样式。 您可以在已将域设置为托管登录品牌版本的用户池中，为应用程序客户端分配样式。样式是一组视觉设置，由图像文件、显示选项和 CSS 值组成。当您为应用程序客户端分配样式后，Amazon Cognito 会立即将您的更新推送到用户交互式登录页面。Amazon Cognito 会使用您选择的品牌版本及其所应用的自定义设置来呈现这些用户交互式页面。 ### 更新和删除样式 创建样式时，可将其链接到应用程序客户端。要更改应用程序客户端的样式分配，必须先删除原始样式。目前，您无法在样式之间复制设置，必须通过编程方式来实现这一点。要在样式和应用程序客户端之间复制设置，请[DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html)通过 API 操作获取样式的设置，然后使用[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)或应用这些设置[UpdateManagedLoginBranding](https://docs.aws.amazon.com/)。您无法更改已分配给应用程序客户端的样式，只能删除原始样式并设置新样式。有关通过 API 和 SDK 操作管理样式的更多信息，请参阅[托管登录品牌的 API 和 SDK 操作](managed-login-brandingeditor.md#branding-designer-api)。 **注意** 对于通过编程方式创建或更新品牌样式的请求，请求大小不得超过 2 MB。如果您的请求超过此限制，请将其拆分为多个 `UpdateManagedLoginBranding` 请求，每组参数的大小均不超过最大请求限制。这些部分更新请求不会将未指定的参数重置为默认值，因此您可以安全地发送它们，而不会影响现有的设置。 您可以在 Amazon Cognito 控制台的**托管登录**菜单中删除样式。在**样式**下，选择要删除的样式，然后选择**删除样式**。 简而言之，为域分配品牌的流程包括以下步骤。 1. [创建域并设置品牌版本](cognito-user-pools-assign-domain.md)。 1. 创建品牌样式，并将其分配给应用程序客户端。 **将样式分配给应用程序客户端** 1. 在用户池的**域**菜单中创建域，并将**品牌版本**设置为**托管登录**。 1. 导航至**托管登录**菜单。在**样式**下，选择**创建样式**。 1. 选择要为其分配样式的应用程序客户端，或新建一个[应用程序客户端](user-pool-settings-client-apps.md)。 1. 要开始配置品牌设置，请选择**启动品牌编辑器**。 **Topics** + [选择品牌体验并分配样式](#managed-login-branding-choose) + [品牌编辑器与自定义托管登录](managed-login-brandingeditor.md) + [自定义托管 UI（经典）品牌](hosted-ui-classic-branding.md) # 品牌编辑器与自定义托管登录 品牌编辑器是托管登录网页的可视化设计和编辑工具。该工具已内置到 Amazon Cognito 控制台中。在品牌编辑器中，您首先会看到登录页面的预览，并可选择进入快速设置选项，或包含高级选项的详细视图。您可以修改和预览样式参数或添加自定义背景图像和徽标。您还可以配置浅色模式和深色模式。 ![\[Amazon Cognito 用户池品牌编辑器可视化编辑器的预览图。\]](http://docs.aws.amazon.com/zh_cn/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) 首先，创建一种可以应用于用户池或应用程序客户端的样式。 **开始使用品牌编辑器** 1. 在**域**选项卡中[创建域](cognito-user-pools-assign-domain.md)，或者更新现有域。在**品牌版本**下，将您的域设置为使用**托管登录**。 1. 如有任何现有应用程序客户端样式，则将其删除。 1. 在**应用程序客户端**菜单中，选择您的应用程序客户端。 1. 在**托管登录样式**下，选择分配给您的应用程序客户端的样式。 1. 选择**删除样式**。确认您的选择。 1. 导航到用户池中的**托管登录**菜单。如果您没有此功能，请按照提示选择一个包含托管登录的[功能计划](cognito-sign-in-feature-plans.md)。如果您只想查看品牌编辑器而不进行任何更改，也可以选择**预览此功能**。 1. 在**样式**下，选择**创建样式**。 1. 选择要为其分配样式的应用程序客户端，然后选择**创建**。您还可以新建应用程序客户端。 1. Amazon Cognito 控制台将启动品牌编辑器。 1. 选择要开始编辑的选项卡，或者选择**启动编辑器**并进入[快速设置](#branding-designer-quick-setup)。可以看到以下选项卡： **预览** 查看您当前的选择在托管登录页面中的实际效果。 **基础** 设置整体主题，配置指向外部身份提供者的链接，并设置表单字段的样式。 **组件** 配置页眉、页脚及各个 UI 元素的样式。 1. 要选择初始设置，请进入快速设置。选择**更改设置类别**，然后选择**快速设置**。选择**继续**后，品牌编辑器将启动，其中包含一组可配置的基本选项。 ## 文本和本地化 您无法在品牌编辑器中修改或本地化文本。请改为在分发给用户的 URL 中添加 `lang` 查询参数。此参数会使您的托管登录页面本地化为多种可用语言之一。有关更多信息，请参阅 [托管登录本地化](cognito-user-pools-managed-login.md#managed-login-localization)。 ## 快速设置 **启动品牌编辑器**按钮会加载一个可视化编辑器，用于配置您的托管登录页面，您可在其中选择多种主要自定义选项。在您进行选择时，Amazon Cognito 会在预览窗口中呈现托管登录页面的更改。要返回详细设置菜单，请选择**更改设置类别**按钮。 **整体外观和风格应该如何？** 为托管登录页面配置基本主题设置。 **显示模式** 为托管登录选择浅色模式、深色模式或自适应体验。自适应设置会在 Amazon Cognito 呈现托管登录页面时，遵循用户的浏览器偏好。当您选择浏览器自适应模式时，可以为浅色模式和深色模式选择不同的颜色和徽标图像。 **Spacing** 设置页面中元素之间的默认间距。 **边框圆角** 设置元素外边框的圆角程度。 **页面背景应呈现什么效果？** **背景类型** **显示图像**复选框用于指定您是希望使用背景图像，还是设置纯色背景。 1. 要使用图像，请选择**显示图像**，然后为浅色模式和深色模式分别选择背景图像。您还可以为图像未覆盖的背景区域分别设置深色模式和浅色模式的**页面背景颜色**。 1. 要使用纯色背景，请取消选择**显示图像**，然后选择浅色模式和深色模式的**页面背景颜色**。 **表单应呈现什么效果？** 为托管登录的表单元素配置设置。表单项的示例包括登录和验证码提示。 **水平对齐** 设置表单字段的水平对齐方式。 **表单徽标** 设置徽标图像的位置。 **徽标图像** 选择要包含在浅色和深色模式的表单元素中的徽标图像文件。要上传图像，请选择**徽标图像**下拉列表，选择**添加新资产**，然后添加徽标文件。 **主要品牌颜色** 为浅色模式和深色模式设置主题颜色。此颜色将作为背景色应用于所有归类为主要元素的元素。 **页眉应呈现什么效果？** 选择是否要在托管登录页面中添加页眉。页眉可以包含徽标图像。 **页眉徽标** 设置徽标图像在页眉中的位置。 **徽标图像** 选择徽标位置，以及要添加在页眉中的徽标图像文件。要上传图像，请选择**徽标图像**下拉列表，选择**添加新资产**，然后添加徽标文件。 **页眉背景颜色** 为页眉的背景设置浅色模式和深色模式颜色。 ## 详细设置 在详细设置视图中，您可以修改**基础**和**组件**中的各个组件。**预览**选项卡会根据当前上下文和您的自定义设置，显示托管登录页面的预览效果。 ![\[托管登录组件详细配置的 AWS 管理控制台 屏幕截图。\]](http://docs.aws.amazon.com/zh_cn/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) 要进入组件的可视化编辑器，请在组件对应的磁贴中选择编辑图标。在主题 Studio 编辑器中，您可以使用**更改设置类别**按钮在组件之间切换。 ### 基础 **应用程序样式** 配置托管登录的基本设置。此类别包含整体主题、文本间距以及页眉和页脚的设置。 **显示模式** 为托管登录页面选择浅色模式、深色模式或自适应体验。当您选择浏览器自适应模式时，可以为浅色模式和深色模式选择不同的颜色和徽标图像。 **Spacing** 设置页面中元素之间的默认间距。 **身份验证行为** 为将您的用户连接到外部身份提供商的按钮配置样式（IdPs）。本节包含**域搜索输入**选项，启用后，托管登录会提示用户输入电子邮件地址，并将其与对应的 [SAML 身份提供者标识符](cognito-user-pools-managing-saml-idp-naming.md)进行匹配。 **表单行为** 配置输入表单的样式：输入的位置、颜色和元素的对齐方式。 ### 组件 **按钮** Amazon Cognito 在托管登录页面上呈现的按钮样式。 **分隔线** 托管登录元素之间分隔线和边界的样式，例如输入表单与外部提供商登录选择器之间的分隔。 **下拉菜单** 下拉菜单的样式。 **网页图标** Amazon Cognito 为选项卡和书签图标提供的图像的样式。 **焦点环** 当前选中输入框的高亮样式。 **表单容器** 包围表单的元素的样式。 **全局页脚** Amazon Cognito 在托管登录页面底部显示的页脚样式。 **全局页眉** Amazon Cognito 在托管登录页面顶部显示的页眉样式。 **指示** 错误和成功消息的样式。 **选项控件** 复选框、多选框和其他输入提示的样式。 **页面背景** 托管登录页面整体背景的样式。 **输入** 表单字段输入提示的样式。 **Link** 托管登录页面中超链接的样式。 **页面文本** 页内文本的样式。 **字段文本** 表单输入框周围文本的样式。 ## 托管登录品牌的 API 和 SDK 操作 您还可以使用 API 操作[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)和将品牌应用于托管登录风格[UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)。这些操作非常适合为另一个应用程序客户端或用户池创建完全相同或稍作修改版的品牌样式。使用 API 操作查询现有样式的托管登录品牌 [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html)，然后根据需要修改输出并将其应用于其他资源。 `UpdateManagedLoginBranding` 操作不会更改您的样式应用到的应用程序客户端。它仅会更新分配给应用程序客户端的现有样式。要完全替换应用程序客户端的样式，请删除现有样式，[DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)然后使用指定新样式`CreateManagedLoginBranding`。在 Amazon Cognito 控制台中，情况也是如此：必须先删除现有样式，然后创建新样式。 在 API 或 SDK 请求中设置托管登录品牌时，需要将您的设置嵌入到一个 JSON 文件中，并将该文件转换为 `Document` 数据类型。下面提供了关于可添加的图像以及如何生成编程式请求以配置品牌样式的指导。 ### 图像资产 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)并[UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)包括一个`Assets`参数。该参数是一个采用 base64 编码二进制格式的图像文件数组。 **注意** 对于通过编程方式创建或更新品牌样式的请求，请求大小不得超过 2 MB。您请求中的资产可能会使请求超过此限制。如果是这种情况，请将其拆分为多个 `UpdateManagedLoginBranding` 请求，每组参数的大小均不超过最大请求限制。这些部分更新请求不会将未指定的参数重置为默认值，因此您可以安全地发送它们，而不会影响现有的设置。 有些资产对您可提交的文件类型有限制。 **** | 资产 | 接受的文件扩展名 | | --- | --- | | FAVICON\$1ICO | ico | | FAVICON\$1SVG | svg | | EMAIL\$1GRAPHIC | png、svg、jpeg | | SMS\$1GRAPHIC | png、svg、jpeg | | AUTH\$1APP\$1GRAPHIC | png、svg、jpeg | | PASSWORD\$1GRAPHIC | png、svg、jpeg | | PASSKEY\$1GRAPHIC | png、svg、jpeg | | PAGE\$1HEADER\$1LOGO | png、svg、jpeg | | PAGE\$1HEADER\$1BACKGROUND | png、svg、jpeg | | PAGE\$1FOOTER\$1LOGO | png、svg、jpeg | | PAGE\$1FOOTER\$1BACKGROUND | png、svg、jpeg | | PAGE\$1BACKGROUND | png、svg、jpeg | | FORM\$1BACKGROUND | png、svg、jpeg | | FORM\$1LOGO | png、svg、jpeg | | IDP\$1BUTTON\$1ICON | 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 Schema 格式](https://json-schema.org/docs)的文件。以下是以编程方式更新品牌样式的步骤。 **在用户池 API 中更新品牌** 1. 在 Amazon Cognito 控制台中，从用户池的**托管登录**菜单中创建默认的托管登录品牌样式。将其分配给应用程序客户端。 1. 记录您为其创建样式的应用程序客户端的 ID，例如 `1example23456789`。 1. 使用设置为的 [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html)API 请求检索品牌风格的`ReturnMergedResources`设置`true`。以下是一个示例 请求正文。 ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. 使用您的自定义设置修改 `DescribeManagedLoginBrandingByClient` 的输出。 1. 响应正文包裹在一个 `ManagedLoginBranding` 元素中，该元素不属于创建和更新操作的语法部分。需要移除这个 JSON 对象的顶层结构。 1. 要替换图像，请将 `Bytes` 值替换为每个图像文件的 Base64 编码二进制数据。 1. 要更新设置，请修改 `Settings` 对象的输出，并将其包含在下一次请求中。Amazon Cognito 会忽略 `Settings` 对象中任何未包含在 API 响应所返回的架构中的值。 1. 在[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)或[UpdateManagedLoginBranding](https://docs.aws.amazon.com/)请求中使用更新的响应正文。如果请求大小超过 2 MB，请将其拆分为多个请求。这些操作采用 `PATCH` 模式，除非您另行指定，否则原始设置将保持不变。 # 自定义托管 UI（经典）品牌 您可以使用 AWS 管理控制台、 AWS CLI 或 API 为托管 UI 指定经典自定义设置。您可以上传要显示在应用程序中的自定义徽标图像。您还可以将层叠样式表（CSS）选项应用于 UI 的外观。 您可以自定义 UI 默认设置，并通过特定设置覆盖各个[应用程序客户端](cognito-terms.md#term-appclient)的设置。Amazon Cognito 会将默认配置应用于所有没有客户端级设置的应用程序客户端。 在 Amazon Cognito 控制台和 API 请求中，用于设置 UI 自定义的请求大小不得超过 135 KB。在极少数情况下，请求标头、您的 CSS 文件和徽标的大小总和可能超过 135 KB。Amazon Cognito 对图像文件进行 Base64 编码。这会将 100KB 大小的图像增加到 130KB，保留 5KB 用于请求标头和 CSS。如果请求太大， AWS 管理控制台 或您的 `SetUICustomization` API 请求将返回`request parameters too large`错误。请将您的徽标图像调整为不超过 100 KB，将 CSS 文件调整为不超过 3 KB。您无法单独设置 CSS 和徽标定制设置。 **注意** 要自定义 UI，必须为用户池设置域。 ## 在经典品牌中指定自定义徽标 Amazon Cognito 将您的自定义徽标放在 [登录端点](login-endpoint.md) 的输入字段上方居中。 为自定义托管 UI 徽标选择可缩放至 350 x 178 像素的 PNG、JPG 或 JPEG 文件。徽标文件的大小不得超过 100KB，或者在 Amazon Cognito 编码为 Base64 之后不超过 130KB。要在 API `ImageFile` [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)中设置，请将您的文件转换为 Base64 编码的文本字符串，或者在中提供文件路径并让 Amazon Cognito 为您对其进行编码。 AWS CLI ## 在经典品牌中指定 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 属性。 **标签** + **font-weight** 是 100 的倍数 (从 100 到 900)。 + **color** 是文本颜色。必须是[合法的 CSS 颜色值](https://www.w3schools.com/cssref/css_colors_legal.php)。 **输入字段** + **width** 是以占包含块大小的百分比形式表示的宽度。 + **height** 是输入字段的高度，以像素 (px) 为单位。 + **color** 是文本颜色。它可以是任何标准 CSS 颜色值。 + **background-color** 是输入字段的背景色。它可以是任何标准 CSS 颜色值。 + **border** 是标准 CSS 边框值，用于指定您的应用程序窗口边框的宽度、透明度和颜色。宽度可以是从 1px 到 100px 的任何值。透明度可以是完全透明或不透明。颜色可以是任何标准颜色值。 **文本描述** + **padding-top** 是文本描述上方的填充量。 + **padding-bottom** 是文本描述下方的填充量。 + **display** 可以是 `block` 或 `inline`。 + **font-size** 是文本描述的字体大小。 + **color** 是文本颜色。必须是[合法的 CSS 颜色值](https://www.w3schools.com/cssref/css_colors_legal.php)。 **提交按钮** + **font-size** 是按钮文本的字体大小。 + **font-weight** 是按钮文本的字体粗细：`bold`、`italic` 或 `normal`。 + **页边距**是一个由四个值组成的字符串，用于指示按钮的上边距、右边距、下边距和左边距大小。 + **font-size** 是文本描述的字体大小。 + **width** 是按钮文本的宽度，以占包含块大小的百分比形式表示。 + **height** 是按钮的高度，以像素 (px) 为单位。 + **color** 是按钮文本颜色。它可以是任何标准 CSS 颜色值。 + **background-color** 是按钮的背景色。它可以是任何标准颜色值。 **横幅** + **填充**是一个由四个值组成的字符串，用于指示横幅的上边距、右边距、下边距和左边距大小。 + **background-color** 是横幅的背景色。它可以是任何标准 CSS 颜色值。 **提交按钮悬停** + **color** 是您将鼠标指针悬停在按钮上方时按钮的前景色。它可以是任何标准 CSS 颜色值。 + **background-color** 是您将鼠标指针悬停在按钮上方时按钮的背景色。它可以是任何标准 CSS 颜色值。 **身份提供商按钮悬停** + **color** 是您将鼠标指针悬停在按钮上方时按钮的前景色。它可以是任何标准 CSS 颜色值。 + **background-color** 是您将鼠标指针悬停在按钮上方时按钮的背景色。它可以是任何标准 CSS 颜色值。 **密码校验无效** + **color** 是 `"Password check not valid"` 消息的文本颜色。它可以是任何标准 CSS 颜色值。 **背景** + **background-color** 是应用程序窗口的背景色。它可以是任何标准 CSS 颜色值。 **错误消息** + **页边距**是一个由四个值组成的字符串，用于指示上边距、右边距、下边距和左边距大小。 + **padding** 是边距大小。 + **font-size** 是字体大小。 + **width** 是错误消息的宽度，以占包含块大小的百分比形式表示。 + **background** 是错误消息的背景色。它可以是任何标准 CSS 颜色值。 + **边框**是一个由三个值组成的字符串，用于指定边框的宽度、透明度和颜色。 + **color** 是错误消息文本颜色。它可以是任何标准 CSS 颜色值。 + **box-sizing** 用于向浏览器指示应包含的大小属性 (宽度和高度)。 **身份提供商按钮** + **height** 是按钮的高度，以像素 (px) 为单位。 + **width** 是按钮文本的宽度，以占包含块大小的百分比形式表示。 + **text-align** 是文本对齐设置。它可以是 `left`、`right` 或 `center`。 + **margin-bottom** 是下边距设置。 + **color** 是按钮文本颜色。它可以是任何标准 CSS 颜色值。 + **background-color** 是按钮的背景色。它可以是任何标准 CSS 颜色值。 + **border-color** 是按钮边框的颜色。它可以是任何标准 CSS 颜色值。 **身份提供商描述** + **padding-top** 是描述上方的填充量。 + **padding-bottom** 是描述下方的填充量。 + **display** 可以是 `block` 或 `inline`。 + **font-size** 是描述的字体大小。 + **color** 是 IdP 区域标题的文本颜色，例如**使用您的企业账号登录**。必须是[合法的 CSS 颜色值](https://www.w3schools.com/cssref/css_colors_legal.php)。 **法律文本** + **color** 是文本颜色。它可以是任何标准 CSS 颜色值。 + **font-size** 是字体大小。 自定义 **Legal text**（法律文本）时，您自定义的是 **We won't post to any of your accounts without asking first**（如果未先询问，我们不会发布到您的任何账户）的消息，该消息显示在登录页面的社交身份提供商下方。 **Logo** + **max-width** 是以占包含块大小的百分比形式表示的最大宽度。 + **max-height** 是以占包含块大小的百分比形式表示的最大高度。 + **background-color** 是包含透明区域的日志背景颜色。必须是[合法的 CSS 颜色值](https://www.w3schools.com/cssref/css_colors_legal.php)。 **输入字段聚焦** + **border-color** 是输入字段的颜色。它可以是任何标准 CSS 颜色值。 + **outline** 是输入字段的边框宽度 (以像素为单位)。 **社交按钮** + **height** 是按钮的高度，以像素 (px) 为单位。 + **text-align** 是文本对齐设置。它可以是 `left`、`right` 或 `center`。 + **width** 是按钮文本的宽度，以占包含块大小的百分比形式表示。 + **margin-bottom** 是下边距设置。 **密码校验有效** + **color** 是 `"Password check valid"` 消息的文本颜色。它可以是任何标准 CSS 颜色值。 ## 使用经典品牌自定义托管用户界面 AWS 管理控制台 您可以使用为您的应用程序指定界面自定义设置。 AWS 管理控制台 **注意** 通过利用您的用户池的特定信息构建以下 URL 并将它键入到浏览器中，您可以查看具有自定义项的托管 UI：` https:///login?response_type=code&client_id=&redirect_uri=` 在控制台中进行的更改出现之前，您可能必须等待长达 1 分钟才能刷新浏览器。 您的域显示在 **App integration**（应用程序集成）选项卡中，该选项卡位于 **Domain**（域）下方。您的应用程序客户端 ID 和回调 URL 在 **App clients**（应用程序客户端）下显示。 **指定应用程序 UI 自定义设置** 1. 登录 [Amazon Cognito 控制台](https://console.aws.amazon.com/cognito/home)。 1. 在导航窗格中，选择 **User Pools**（用户池），然后选择要编辑的用户池。 1. 在**域**选项卡中[创建域](cognito-user-pools-assign-domain.md)，或者更新现有域。在**品牌版本**下，将您的域设置为使用**托管 UI（经典）**。 1. 选择**托管登录**菜单。 1. 要为所有应用程序客户端自定义 UI 设置，请找到**托管 UI 设置**下的**样式**，然后选择**编辑**。 1. 要为某个应用程序客户端自定义 UI 设置，请转到**应用程序客户端**菜单，选择要修改的应用程序客户端，然后找到**托管 UI（经典）样式**并选择**覆盖**。选择**编辑**。 1. 要上载自己的徽标图像文件，请选择 **Choose file**（选择文件）或 **Replace current file**（替换当前文件）。 1. 要自定义托管 UI CSS，请下载 **CSS template.css**，然后使用您想要自定义的值修改模板。只有模板中包含的密钥才能与托管 UI 一起使用。添加的 CSS 密钥不会反映在您的 UI 中。自定义 CSS 文件后，请选择 **Choose file**（选择文件）或 **Replace current file**（替换当前文件）来上载您的自定义 CSS 文件。 ## 使用用户池 API 中的经典品牌自定义托管用户界面，并使用 AWS CLI 使用以下命令可为您的用户池指定应用程序 UI 自定义项。 **使用以下 API 操作，获取用户池的内置应用程序 UI 的 UI 定制设置。** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **使用以下 API 操作，设置用户池的内置应用程序 UI 的 UI 定制设置。** + AWS CLI 来自图像文件：`aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI 图像编码为 Base64 二进制文本：`aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)