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

简短描述

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

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

解决方法

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

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

为用户群体添加域名

1. 在 Amazon Cognito 控制台中，选择 User pools（用户群体），然后选择您的用户群体。
2. 在 App integration（应用程序集成）下，选择 Domain name（域名），然后选择 Actions（操作）。
3. 选择 Create Cognito domain（创建 Cognito 域），将您自己的域前缀添加到 Amazon Cognito 托管域。或者，选择 Create custom domain（创建自定义域），添加您自己的自定义域。

更改应用程序客户端设置

1. 在 Amazon Cognito 控制台中，选择 User pools（用户群体），然后选择您的用户群体。
2. 在 App integration（应用程序集成）下，从 App clients and analytics（应用程序客户端和分析）部分选择您的应用程序客户端。
3. 从 Hosted UI（托管 UI）部分选择 Edit（编辑）。
4. 执行以下操作：
   对于 Allowed callback URLs（允许的回调 URL），输入将接收授权码的 Web 应用程序的 URL。您的用户在登录时会被重定向到此处。
   对于 Allowed sign-out URLs - optional（允许的注销 URL - 可选），输入用户退出时您希望将其重定向到的 URL。
   对于 Identity providers（身份提供商），从下拉列表选择 Cognito user pool（Cognito 用户群体）。
   对于 OAuth 2.0 grant types（OAuth 2.0 授权类型），选择 Authorization Code grant（授权码授权）或 Implicit grant（隐式授权）的 OAuth 2.0 身份验证流程。机密和公共客户端使用授权码授权类型交换访问令牌的身份验证代码。隐式授权类型仅当有特定原因无法使用授权码授权时使用。有关更多信息，请参阅了解 Amazon Cognito 用户群体 OAuth 2.0 授权。
   对于 OpenID Connect scopes（OpenID Connect 范围），选择 openid 和您希望 Amazon Cognito 在用户进行身份验证时添加到令牌中的任何其他 OAuth 范围。例如，phone（电话）和 email（电子邮件）。
   对于 Custom scopes（自定义范围），选择要为此应用程序授权的任何自定义范围。
5. 选择 Save changes（保存更改）。

有关更多信息，请参阅配置用户池应用程序客户端。

（可选）自定义托管的 Web UI

您可以添加自定义徽标或者自定义托管 Web UI 的 CSS。有关更多信息，请参阅自定义内置注册和登录网页。

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

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

1. 在 Amazon Cognito 控制台中，选择 User pools（用户群体），然后选择您的用户群体。
2. 在 App integration（应用程序集成）下，复制 Domain（域）部分下的 Domain（域）URL。然后，将该 URL 粘贴到文本编辑器中以供参考。
3. 在 App clients and analytics（应用程序客户端和分析）下，单击您的客户端名称。
4. 将 Client ID（客户端 ID）复制到剪贴板。然后，将该 ID 粘贴到文本编辑器中以供参考。
5. 将 Allowed callback URLs（允许的回调 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
   -或者-
   在 App client（应用程序客户端）部分中选择 View Hosted UI（查看托管 UI）以访问登录端点的默认 URL。然后，按照前面的详细说明替换部分 URL。

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

启动托管 Web UI

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

1. 在 Amazon Cognito 控制台中，选择 User pools（用户群体），然后选择您的用户群体。
2. 在 App integration（应用程序集成）下，单击 App clients and analytics（应用程序客户端和分析）部分的 Client name（客户端名称）。
3. 在 Hosted UI（托管 UI）下，选择 View Hosted UI（查看托管 UI）。托管 Web UI 的登录页面会在新的浏览器选项卡或窗口中打开。

---

相关信息

用户池入门