Amazon Cognito
开发人员指南
AWS 文档中描述的 AWS 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅 Amazon AWS 入门

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

您可以使用 AWS 管理控制台、AWS CLI 或 API 为内置应用程序 UI 体验指定自定义设置。您可以上传要显示在应用程序中的自定义徽标图像。您也可以选择很多 CSS 自定义项。

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

注意

要使用此功能,您的用户池必须有一个与之关联的域。

徽标图像文件允许的最大大小为 100 KB。

为应用程序指定 CSS 自定义项

您可以为托管应用程序页面自定义 CSS,但存在以下限制:

  • CSS 类名称只能来自以下列表:

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • 属性值不能包含 HTML、@import@supports@page@media 语句,也不能包含 Javascript。

您可以自定义以下 CSS 属性。

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

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

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

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

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

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

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

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

  • display 可以是 blockinline

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

提交按钮
  • font-size 是按钮文本的字体大小。

  • font-weight 是按钮文本的字体粗细:bolditalicnormal

  • margin 是一个由 4 个值组成的字符串,用于指示按钮的上边距、右边距、下边距和左边距大小。

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

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

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

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

  • background-color 是按钮的背景色。它可以是任何标准颜色值。

横幅
  • padding 是一个由 4 个值组成的字符串,用于指示横幅的上边距、右边距、下边距和左边距大小。

  • background-color 是横幅的背景色。它可以是任何标准 CSS 颜色值。

提交按钮悬停
  • color 是您将鼠标指针悬停在按钮上方时按钮的前景色。它可以是任何标准 CSS 颜色值。

  • background-color 是您将鼠标指针悬停在按钮上方时按钮的背景色。它可以是任何标准 CSS 颜色值。

身份提供商按钮悬停
  • color 是您将鼠标指针悬停在按钮上方时按钮的前景色。它可以是任何标准 CSS 颜色值。

  • background-color 是您将鼠标指针悬停在按钮上方时按钮的背景色。它可以是任何标准 CSS 颜色值。

密码校验无效
  • color"Password check not valid" 消息的文本颜色。它可以是任何标准 CSS 颜色值。

背景
  • background-color 是应用程序窗口的背景色。它可以是任何标准 CSS 颜色值。

错误消息
  • margin 是一个由 4 个值组成的字符串,用于指示上边距、右边距、下边距和左边距大小。

  • padding 是边距大小。

  • font-size 是字体大小。

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

  • background 是错误消息的背景色。它可以是任何标准 CSS 颜色值。

  • border 是一个由 3 个值组成的字符串,用于指定边框的宽度、透明度和颜色。

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

  • box-sizing 用于向浏览器指示应包含的大小属性 (宽度和高度)。

身份提供商按钮
  • height 是按钮的高度,以像素 (px) 为单位。

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

  • text-align 是文本对齐设置。它可以是 leftrightcenter

  • margin-bottom 是下边距设置。

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

  • background-color 是按钮的背景色。它可以是任何标准颜色值。

  • border-color 是按钮边框的颜色。它可以是任何标准颜色值。

身份提供商描述
  • padding-top 是描述上方的填充量。

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

  • display 可以是 blockinline

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

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

  • font-size 是字体大小。

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

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

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

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

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

  • text-align 是文本对齐设置。它可以是 leftrightcenter

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

  • margin-bottom 是下边距设置。

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

为用户池指定应用程序 UI 自定义设置(AWS 管理控制台)

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

注意

通过利用您的用户池的特定信息构建以下 URL 并将它键入到浏览器中,您可以查看具有自定义项的托管 UI: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> 在控制台中进行的更改出现之前,您可能必须等待长达 1 分钟才能刷新浏览器。

您的域显示在 Domain name 选项卡上。您的应用程序客户端 ID 和回调 URL 显示在 App client settings 选项卡上。

指定应用程序 UI 自定义设置

  1. 登录 Amazon Cognito 控制台

  2. 在导航窗格中,选择 Manage your User Pools,然后选择要编辑的用户池。

  3. 选择 UI customization 选项卡。

  4. App client to customize 下,选择要从您之前在 App clients 选项卡中创建的应用程序客户端的下拉菜单自定义的应用程序。

  5. 要上传您自己的徽标图像文件,请选择 Choose a file 或者将文件拖动到 Logo (optional) 框中。

  6. CSS customizations (optional) 下,您可以通过更改各种属性的默认值来自定义应用程序的外观。

为用户池指定应用程序 UI 自定义设置(AWS CLI 和 AWS API)

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

获取用户池的内置应用程序 UI 的 UI 自定义设置

设置用户池的内置应用程序 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 <path-to-logo-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API:SetUICustomization