Javascript Cognito托管用户界面

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

有没有任何信息是用Cognito托管的UI创建的

---

Amazon表示，您可以在几分钟内将经过身份验证的登录与Cognito集成在一起，但我已经研究了几周了，还没有弄清楚。您可以在这里找到有关如何实现此功能的更多详细信息-

---

我也为此挣扎；我同意文件有点轻

您提供的链接显示了您的Cognito UI URL的外观：

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

您只需要将id_标记从URL中剥离出来，并将其发送到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

端点以将代码交换为令牌。这个电话看起来像这样：

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

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'

curl-X POST\
https://.auth.us-east-1.amazoncognito.com/oauth2/token \
-H'内容类型：应用程序/x-www-form-urlencoded'\
-d“授权类型=授权”-代码和范围=电子邮件%20openid%20profile&redirect”-uri=https%3A%2F%2Flocalhost%3A33000%2F&客户端\u id=15xxxxxxxxxx810&代码=54826355-b36e-4c8e-897c-d53d37869ee2”

然后，您可以如上所述将这个id标记给予Cognito

UI注释

当用户单击链接时，我的应用程序会在新选项卡中弹出Cognito UI。当重定向返回到我的应用程序时，我使用

postMessage（）

将令牌发送到父窗口，然后关闭新选项卡。我认为这是一种比较常见的模式

我还没有尝试过，但我猜将UI呈现到iframe中是不允许的，因为这是对点击劫持的一种缓解

---

---

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

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

用户在“我的网站”（选项卡1）中导航，并在任何页面中单击“登录/注册”按钮

使用我自己的域（auth.example.com）在cognito托管的UI中打开了一个新选项卡（选项卡2）

然后用户在托管用户界面上进行业务（登录/新帐户/恢复密码等）

Cognito在URL中发送一个散列（带有许多标记）到我的站点回调。（）

我的站点处理令牌： 诀窍是创建一个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();

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

在我的站点（选项卡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();
            }
       }

使用cognitoUser，您就完成了，因为您可以检索凭证或其他数据

---

AWS博客介绍了使用托管UI将Cognito放在S3前面的用例：

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

---

免责声明：我写了那个博客。希望对你有用

你有关于托管UI的任何详细信息的链接吗？@BryceH我一直在尝试修改amazon cognito auth js，以允许托管UI与我的应用程序通信。不幸的是，我仅有的其他信息是亚马逊关于UI的宣传文章“我们有一个新东西，看看它”。请使用更多描述问题的标题。这里的主要问题是所有这些文章所涵盖的是UI的设置，而不是将UI和（比如）结合起来所需的内容从后端托管在EC2上的网站（使用JS或PHP）他们编写了一些示例应用程序（您可以自己托管和运行），但他们没有解释自己，也没有完全发挥功能。我无法让您的授权代码授权示例在python Chalice lambda中使用python“请求”图书馆，而不是卷曲，使职位。我确信用户池已设置为ok等，作为使用授权库（需要应用程序id）的另一个方向的请求不幸的是，你在这里提供的信息似乎是目前在任何地方都能找到的最好的资源：）这是我第一次发现AWS功能上的文档是一只大雁chase@Vorsprung如果您想发布一个包含python代码和任何错误的问题，我很乐意看一看。非常感谢，非常好的文档。但是您是如何在Cognito UI中集成postMessage（）的呢？如果我说的没错，这需要设置一个标识池。你能举个例子吗？1） 我使用cognito ui 2）注册，然后使用cognito ui 3）登录，然后加载存储在用户中的关于用户的属性pool@MikePatrick这太有用了！在实现前端调用后端需要授权的流程时，让前端传递授权代码，然后后端调用/oauth2/token endpoint有意义吗？您知道本地存储域是Amazon的还是应用程序的（联系Cognito的客户端）？谢谢。本地存储是客户所在的域。。。所以你必须配置你自己的域名，不要使用aws域名，谢谢！因为这是针对Cognito托管的UI，所以我不确定Amazon是否在其自己的域下（作为第三方）管理本地存储