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

# 自定义托管 UI（经典）品牌
<a name="hosted-ui-classic-branding"></a>

您可以使用 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，必须为用户池设置域。

## 在经典品牌中指定自定义徽标
<a name="cognito-user-pools-app-ui-customization-logo"></a>

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 自定义项
<a name="cognito-user-pools-app-ui-customization-css"></a>

您可以为托管应用程序页面自定义 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 管理控制台
<a name="cognito-user-pools-app-ui-customization-console"></a>

您可以使用为您的应用程序指定界面自定义设置。 AWS 管理控制台 

**注意**  
通过利用您的用户池的特定信息构建以下 URL 并将它键入到浏览器中，您可以查看具有自定义项的托管 UI：` https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>` 在控制台中进行的更改出现之前，您可能必须等待长达 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
<a name="cognito-user-pools-app-ui-customization-cli-api"></a>

使用以下命令可为您的用户池指定应用程序 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 <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"`
+ AWS CLI 图像编码为 Base64 二进制文本：`aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <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)