自定义内置应用程序 UI 以便注册用户和让用户登录 - Amazon Cognito
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅中国的 Amazon Web Services 服务入门。

自定义内置应用程序 UI 以便注册用户和让用户登录

Original console
注意

只有在您编辑现有用户池时才会显示 UI customization（UI 自定义）选项卡。

在 UI customization (UI 自定义) 选项卡上，您可以将自己的自定义项添加到默认应用程序 UI。有关每个自定义字段的详细信息，请参阅自定义内置登录网页和注册网页。

注意

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

您的域显示在 Domain name（域名）选项卡上。您的应用程序客户端 ID 和回调 URL 将显示在 General settings（常规设置）选项卡上。

自定义内置应用程序 UI

  1. 在 App client to customize（用于自定义的应用程序客户端）下，在下拉菜单中选择之前创建的应用程序客户端。

  2. 要将徽标添加到默认应用程序 UI，请选择 Choose a file（选择文件）或者将文件拖动到 Logo（徽标）框上。

  3. 在 CSS customizations (optional)（CSS 自定义项（可选））下，您可以通过更改 UI 的 CSS 属性的默认值来自定义应用程序的外观。

  4. 选择 Save changes（保存更改）。

New console

在 App integration（应用程序集成）选项卡上，借助 Hosted UI customization（托管 UI 自定义），您可以将自己的自定义项添加到默认应用程序 UI。

您还可以为应用程序客户端自定义托管 UI。从 App integration（应用程序集成）选项卡上选择应用程序客户端，并找到 Hosted UI customization（托管 UI 自定义）。选择 Use client-level settings（使用客户端级别设置）以便仅进入该应用程序客户端的 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 将显示在 General settings（常规设置）选项卡上。

您还可以为启用了托管 UI 的应用程序客户端启动托管 UI。在 App integration（应用程序集成）选项卡上选择应用程序客户端，并找到 Hosted UI settings（托管 UI 设置）。选择 View hosted UI（查看托管 UI）。

自定义内置应用程序 UI

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

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

  3. 选择 Save changes（保存更改）。