Cognito 托管 UI

Question

我一直在考虑为 Web 应用程序设置登录名，让客户查看托管在 S3 中的数据，发现 AWS Cognito 有一个托管的 Web UI [link] 可以为我处理大部分身份验证流程，我的问题是我面临的是我无法找到如何将 Web UI 的输出集成到我的应用程序中。 Cognito 中的大多数现有文档仅引用了如何使用各种 API 来创建自己的 UI，这让我对我的问题的答案感到困惑。

是否有任何信息是在考虑 Cognito 托管 UI 的情况下创建的？

亚马逊说您可以在几分钟内将经过身份验证的登录与 Cognito 集成，但我已经研究了几个星期，但无法弄清楚。

Answer 1

我也为此苦苦挣扎；我同意文档有点轻。

您提供的链接显示了您的 Cognito UI URL 的样子：

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

想法是您将用户发送到此 URI，他们开展业务，然后使用某种令牌或代码将他们重定向回您。您可以通过点击左侧导航栏中的“域名”来查看您的域名。

应用客户端设置和 OAuth 授权类型

首先，检查您的应用客户端设置。您需要将回调 URL（Cognito 将重定向回的位置）列入白名单，并确保至少允许一个 OAuth 流。

Cognito App client settings

“授权码授予”将返回一个授权码，然后您将其发送到oauth2/token 端点以获取 access_token、id_token 和 refresh_token。如果您有后端应用程序并需要刷新令牌，这是一个不错的选择。

“隐式授权”是我在前端应用程序中使用的。它将直接向我的前端应用返回一个访问令牌和一个 ID 令牌。

要使用隐式授权，请将您的 Cognito UI URL 中的 response_type=code 更改为 response_type=token。

隐式授权示例

因此，如果您的身份验证成功后的重定向如下所示：

https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600

您只需从 URL 中剥离 id_token 并将其发送到 Cognito，并将您的用户池作为登录映射中的键。在 JavaScript 中：

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c',
    Logins: {
        'cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx': idToken
    }
});

idToken 是在重定向时返回给您的 id 令牌。

授权码授予类型

如果您改用授权代码授权类型 (response_type=code)，您的后端将需要调用 /oauth2/token 端点以将代码交换为令牌。该调用看起来像这样：

curl -X POST \
  https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d 'grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2'

然后你可以像上面一样把这个 id 令牌给 Cognito。

用户界面说明

当用户单击链接时，我的应用程序会在新选项卡中弹出 Cognito UI。当重定向返回到我的应用程序时，我使用 postMessage() 将令牌发送到父窗口，然后关闭新选项卡。我认为这是一种比较常见的模式。

我还没有尝试过，但我猜想将 UI 渲染到 iframe 中是不允许的，以缓解点击劫持。 Source

---

我希望这至少有点帮助。祝你好运！

Answer 2

我实现了这个流程，没有使用 Amplify，只使用 Cognito 托管 UI：

1. 用户在我的网站（标签 1）中导航，并且在任何页面中用户单击登录/注册按钮。
2. 使用我自己的域 (auth.example.com) 使用 cognito 托管 UI 打开一个新选项卡（选项卡 2）
3. 然后用户在托管 ui 上开展业务（登录/新帐户/恢复密码等）
4. Cognito 将 URL 中的 HASH（带有许多令牌）发送到我的站点回调。(https://example.com/login)

5. 我的网站处理令牌： 诀窍是创建一个 Auth 实例，这个实例可以解析哈希并在 LocalStorage 上创建用户：

   // mysite.com/login 
   import {CognitoAuth} from 'amazon-cognito-auth-js';
   
   // Configuration for Auth instance.
   var authData = {
       UserPoolId: 'us-east-1_xxxx',
       ClientId: '1vxxxxx',
       RedirectUriSignIn : 'https://example.com/login',
       RedirectUriSignOut : 'https://example.com/logout',
       AppWebDomain : 'example.com',
       TokenScopesArray: ['email']
       };
   var auth = new CognitoAuth(authData);
   
   //Callbacks, you must declare, but can be empty. 
   auth.userhandler = {
       onSuccess: function(result) {
   
       },
       onFailure: function(err) {
       }
   };
   
   //Get the full url with the hash data.
   var curUrl = window.location.href;
   
   
   //here is the trick, this step configure the LocalStorage with the user.
   auth.parseCognitoWebResponse(curUrl);
   window.top.close();
   

6. 在本地存储中设置用户后，回调（选项卡 2）关闭。

7. 在我的站点（选项卡 1）上，我配置了一个 EventListener 来监听本地存储是否发生变化。

         constructor() {
         window.addEventListener('storage', this.userLogged);
         }
   
         userLogged(event) {
   
           if (event.key.indexOf('CognitoIdentityServiceProvider') !== -1) {
   
             var data = {
                         UserPoolId: 'us-east-1_xxxxx',
                         ClientId: 'xxxxx'
                         };
   
            var userPool = new CognitoUserPool(data);
   
            //behind the scene getCurrentUser looks for the user on the local storage. 
            var cognitoUser = userPool.getCurrentUser();
               }
          }
   

8. 使用 cognitoUser 即可完成，因为您可以检索凭据或其他数据。

Answer 3

此 AWS 博客介绍了使用托管 UI 将 Cognito 置于 S3 前面的用例：https://aws.amazon.com/blogs/networking-and-content-delivery/authorizationedge-using-cookies-protect-your-amazon-cloudfront-content-from-being-downloaded-by-unauthenticated-users/

该博客包含您可以从中窃取的示例代码。您可以使用无服务器应用程序存储库轻松部署示例解决方案。

免责声明：我撰写了该博客。希望对你有用！