如何为 Amazon Cognito 配置托管 Web UI？

简短描述

当您在 Amazon Cognito 中创建用户池，然后为其配置域时，Amazon Cognito 会自动预置托管 Web UI，让您可以向应用程序添加注册和登录页面。

如果您不确定如何设置或者使用哪些设置（例如 OAuth 2.0 流程的类型及要启用的范围），请按照本文中的步骤操作。

解决方法

如果您尚未执行此操作，请创建一个用户池，并在该用户池中创建应用程序客户端。然后，按照以下说明进行操作：

注意： 这些说明使用新的 Amazon Cognito 控制台。

为用户池添加域名

1. 在 Amazon Cognito 控制台中，选择用户池，然后选择您的用户池。
2. 在应用程序集成下，选择域名，然后选择操作。
3. 选择创建 Cognito 域，将您自己的域前缀添加到 Amazon Cognito 托管的域。也可以选择创建自定义域来添加您自己的自定义域。

更改应用程序客户端设置

1. 在 Amazon Cognito 控制台中，选择用户池，然后选择您的用户池。
2. 在应用程序集成下，从应用程序客户端和分析部分中选择您的应用程序客户端。
3. 从托管 UI 部分中，选择编辑。
4. 请执行以下操作：
   对于允许的回调 URL，输入将接收授权码的 Web 应用程序的 URL。您的用户在登录时会被重定向到此处。
   对于允许的注销 URL - 可选，输入用户退出时您希望将其重定向到的 URL。
   对于身份提供商，从下拉列表中选择 Cognito 用户池。
   对于 OAuth 2.0 授权类型，选择授权码授权或隐式授权 OAuth 2.0 身份验证流程。授权码授权类型由机密客户端和公共客户端用于将身份验证码交换为访问令牌。隐式授权类型只有在特定原因导致无法使用授权码授权时才会使用。
   对于 OpenID Connect 范围，请选择 openid 和您希望 Amazon Cognito 在用户进行身份验证时添加到令牌中的任何其他 OAuth 范围。例如，电话和电子邮件。
   对于自定义范围，选择您要为此应用程序授权的任何自定义范围。
5. 选择保存更改。

有关更多信息，请参阅 Configuring a user pool app client。

（可选）自定义托管 Web UI

您可以为托管 Web UI 添加自定义徽标或自定义 CSS。有关更多信息，请参阅 Customizing the built-in sign-in and sign-up webpages。

（可选）为托管 Web UI 构建 URL

如果您想控制托管 Web UI 的登录 URL 中包含的参数，请手动构建 URL。

1. 在 Amazon Cognito 控制台中，选择用户池，然后选择您的用户池。
2. 在应用程序集成下，复制域部分下的域 URL。然后，将 URL 粘贴到文本编辑器中以供参考。
3. 在应用程序客户端和分析下，单击您的客户端名称。
4. 将客户端 ID 复制到剪贴板。然后，将 ID 粘贴到文本编辑器中以供参考。
5. 将其中一个允许的回调 URL 复制到剪贴板。然后，将 URL 粘贴到文本编辑器中以供参考。
6. 通过将刚刚复制的信息一起粘贴到以下格式中，构建托管 Web UI 的 URL：
   domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
   例如：https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com
   -或-
   在应用程序客户端部分中选择查看托管 UI，访问登录端点的默认 URL。然后，如前所述，替换部分 URL。

如果您之前为 OAuth 2.0 授权类型开启了授权码授权，则当您的用户登录时，此 URL 会提示 Amazon Cognito 返回授权码。如果您之前为 OAuth 2.0 授权类型开启了隐式授权，并且您希望 Amazon Cognito 在用户登录时改为返回访问令牌，则在 URL 中将 response_type=code 替换为 response_type=token。

启动托管 Web UI

**注意：**如果您手动为托管 Web UI 构建了 URL，请改为在 Web 浏览器中输入该 URL。

1. 在 Amazon Cognito 控制台中，选择用户池，然后选择您的用户池。
2. 在应用程序集成下，单击应用程序客户端和分析部分的客户端名称。
3. 在托管 UI 下，选择查看托管 UI。托管 Web UI 的登录页面会在新的浏览器选项卡或窗口中打开。

相关信息

用户池入门