Cognito托管的UI

Question

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

是否有任何使用Cognito托管UI创建的信息？

亚马逊表示,您可以在几分钟内将经过身份验证的登录与Cognito集成,但我已经看了几周而且无法弄明白.

Answer 1

我也为此苦苦挣扎; 我同意文档有点轻松.

您提供的链接会显示您的Cognito UI网址的外观:

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

我们的想法是,您将用户发送到此URI,他们开展业务,然后使用某种令牌或代码将其重定向回给您.您可以点击左侧导航栏中的"域名"来检查您的域名.

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

首先,检查您的App客户端设置.您需要将回调网址列入白名单(Cognito将重定向回其中),并确保至少允许一个OAuth流量.

Cognito App客户端设置

"授权代码授权"将返回授权代码,然后您将其发送到oauth2/token端点以获取access_token,id_token和refresh_token.如果您有后端应用程序并且需要刷新令牌,那么这是一个不错的选择.

"隐式授权"是我在前端应用程序中使用的内容.它会将访问令牌和ID令牌直接返回给我的前端应用程序.

要使用隐式授权,response_type=code请response_type=token在Cognito UI URL中进行更改.

隐含授权示例

因此,如果成功验证后重定向如下所示:

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,如上所述.

UI备注

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

我没有尝试过,但我猜测将UI呈现为iframe是不允许的,因为它可以缓解点击劫持. 资源

我希望这至少有点帮助.祝好运!

Answer 2

我实现了这个流程，没有使用 Amplify，只是使用 Cognito Hosted 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，您就大功告成了，因为您可以检索凭据或其他数据。