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

上次更新日期：2021 年 3 月 9 日

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

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

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

1. 在 Amazon Cognito 控制台中，选择管理用户池，然后选择您的用户池。
2. 在左侧导航窗格中，在应用程序集成中，选择域名。
3. 将自己的域前缀添加到 Amazon Cognito 托管域，或添加您自己的自定义域。

1. 在 Amazon Cognito 控制台中，选择管理用户池，然后选择您的用户池。
2. 在左侧导航窗格中，在应用程序集成中，选择应用程序客户端设置。
3. 执行以下操作：
   在启用身份提供商下，选中 Cognito 用户池复选框。
   对于回调 URL，输入将收到授权代码的您的 Web 应用程序的 URL。您的用户登录时，将被重定向至此处。
   对于注销 URL，输入用户退出时您希望将其重定向到的 URL。
   对于允许的 OAuth 流程，选择要启用的任何 OAuth 2.0 身份验证流程。例如，授权代码授予和隐式授予。有关更多信息，请参阅 OAuth 网站上的 OAuth 授权类型。
   对于允许的 OAuth 范围，选择您希望 Amazon Cognito 在用户进行身份验证时添加到令牌中的任何 OAuth 范围。例如，电话、电子邮件和 openid。
4. 选择保存更改。

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

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

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

1. 在 Amazon Cognito 控制台中，选择管理用户池，然后选择您的用户池。
2. 在左侧导航窗格中，选择应用程序集成。
3. 将域 URL 复制到您的剪贴板，然后粘贴到文本编辑器中作为参考。
4. 在左侧导航窗格中，在应用程序集成中，选择应用程序客户端设置。
5. 执行以下操作：
   在应用程序客户端 [name]下，将 ID 复制到剪贴板，然后将其粘贴到文本编辑器以供参考。
   在登录和注销 URL中，复制为回调 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

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

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

1. 在 Amazon Cognito 控制台中，选择管理用户池，然后选择您的用户池。
2. 在左侧导航窗格中，在应用程序集成中，选择应用程序客户端设置。
3. 在托管 UI 中，选择启动托管 UI。托管 Web UI 的登录页面会在新的浏览器选项卡或窗口中打开。