自定义内置登录网页和注册网页 - Amazon Cognito
为应用程序指定自定义徽标为应用程序指定 CSS 自定义项为用户池指定应用程序 UI 自定义设置（Amazon Web Services Management Console）为用户池指定应用程序 UI 自定义设置（Amazon CLI 和 Amazon API）
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

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

自定义内置登录网页和注册网页

您可以使用 Amazon Web Services Management Console、Amazon CLI 或 API 为内置应用程序 UI 体验指定自定义设置。您可以上传要显示在应用程序中的自定义徽标图像。您还可以使用 Cascading 样式表（CSS）来自定义 UI 的外观。

您可以为单个客户端 (具有特定的 clientId) 或为所有客户端 (通过将 clientId 设置为 ALL) 指定应用程序 UI 自定义设置。如果您指定ALL，则将对之前未设置 UI 自定义项的所有客户端使用默认配置。如果您为某个特定客户端指定了 UI 自定义设置，则它无法再回退到 ALL 配置。

设置 UI 定制设置的请求的大小不得超过 135 KB。在极少数情况下，请求标头、您的 CSS 文件和徽标的大小总和可能超过 135 KB。Amazon Cognito 对图像文件进行 Base64 编码。这会将 100KB 大小的图像增加到 130KB，保留 5KB 用于请求标头和 CSS。如果请求太大，则 Amazon Web Services Management Console 或您的 SetUICustomization API 请求会返回 request parameters too large 错误。请将您的徽标图像调整为不超过 100 KB，将 CSS 文件调整为不超过 3 KB。您无法单独设置 CSS 和徽标定制设置。

注意

要自定义 UI，必须为用户群体设置域。

Amazon Cognito 将您的自定义徽标放在 登录端点 的输入字段上方居中。

为自定义托管 UI 徽标选择可缩放至 350 x 178 像素的 PNG、JPG 或 JPEG 文件。徽标文件的大小不得超过 100KB，或者在 Amazon Cognito 编码为 Base64 之后不超过 130KB。要在 API 的 SetUICustomization 中设置 ImageFile，请将文件转换为 Base64 编码的文本字符串，或者在 Amazon CLI 中提供文件路径并让 Amazon Cognito 为您编码。

为应用程序指定 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 属性。

Labels

  • font-weight 是 100 的倍数 (从 100 到 900)。

输入字段

  • width 是以占包含块大小的百分比形式表示的宽度。

  • height 是输入字段的高度，以像素 (px) 为单位。

  • color 是文本颜色。它可以是任何标准 CSS 颜色值。

  • background-color 是输入字段的背景色。它可以是任何标准 CSS 颜色值。

  • border 是标准 CSS 边框值，用于指定您的应用程序窗口边框的宽度、透明度和颜色。宽度可以是从 1px 到 100px 的任何值。透明度可以是完全透明或不透明。颜色可以是任何标准颜色值。

文本描述

  • padding-top 是文本描述上方的填充量。

  • padding-bottom 是文本描述下方的填充量。

  • display 可以是 block 或 inline。

  • font-size 是文本描述的字体大小。

提交按钮

  • 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 是文本颜色。它可以是任何标准 CSS 颜色值。

  • font-size 是字体大小。

注意

自定义 Legal text（法律文本）时，您自定义的是 We won't post to any of your accounts without asking first（如果未先询问，我们不会发布到您的任何账户）的消息，该消息显示在登录页面的社交身份提供商下方。

徽标

  • max-width 是以占包含块大小的百分比形式表示的最大宽度。

  • max-height 是以占包含块大小的百分比形式表示的最大高度。

输入字段聚焦

  • border-color 是输入字段的颜色。它可以是任何标准 CSS 颜色值。

  • outline 是输入字段的边框宽度 (以像素为单位)。

社交按钮

  • height 是按钮的高度，以像素 (px) 为单位。

  • text-align 是文本对齐设置。它可以是 left、right 或 center。

  • width 是按钮文本的宽度，以占包含块大小的百分比形式表示。

  • margin-bottom 是下边距设置。

密码校验有效

  • color 是 "Password check valid" 消息的文本颜色。它可以是任何标准 CSS 颜色值。

为用户池指定应用程序 UI 自定义设置（Amazon Web Services Management Console）

您可以使用 Amazon Web Services Management Console为应用程序指定 UI 自定义设置。

注意

通过利用您的用户池的特定信息构建以下 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 控制台。

  2. 在导航窗格中，选择 User Pools（用户池），然后选择要编辑的用户池。

  3. 选择 App integration（应用程序集成）选项卡。

  4. 要为所有应用程序客户端自定义 UI 设置，请找到 Hosted UI customization（托管 UI 自定义），然后选择 Edit（编辑）。

  5. 要为一个应用程序客户端自定义 UI 设置，请找到应用程序客户端，并选择要修改的应用程序客户端，然后找到托管 UI 自定义并选择编辑。要将应用程序客户端从用户池默认自定义切换为特定于客户端的自定义，请选择 Use client-level settings（使用客户端级别设置）。

  6. 要上载自己的徽标图像文件，请选择 Choose file（选择文件）或 Replace current file（替换当前文件）。

  7. 要自定义托管 UI CSS，请下载 CSS template.css，然后使用您想要自定义的值修改模板。只有模板中包含的密钥才能与托管 UI 一起使用。添加的 CSS 密钥不会反映在您的 UI 中。自定义 CSS 文件后，请选择 Choose file（选择文件）或 Replace current file（替换当前文件）来上载您的自定义 CSS 文件。

为用户池指定应用程序 UI 自定义设置（Amazon CLI 和 Amazon API）

使用以下命令可为您的用户池指定应用程序 UI 自定义项。

使用以下 API 操作，获取用户群体的内置应用程序 UI 的 UI 定制设置。
使用以下 API 操作，设置用户群体的内置应用程序 UI 的 UI 定制设置。

  • Amazon 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>;}"

  • Amazon 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>;}"

  • Amazon API：SetUICustomization