Cognito托管UI

Question

我一直在研究为一个web应用程序设置登录，该应用程序允许客户端查看托管在S3中的数据，我发现AWS Cognito有一个托管的web UI [link]，它为我处理大多数身份验证流程，我面临的问题是，我无法找到如何将web UI的输出集成到我的应用程序中。Cognito中的大多数现有文档只涉及如何在创建自己的UI时使用各种API，这给我的问题留下了令人困惑的答案。

是否有任何信息是使用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。

隐式Grant示例

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

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

您只需将id_token从URL中剥离并将其发送到Cognito，将您的User Pool作为登录映射中的关键字。在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是不被允许的，作为对点击劫持的缓解。Source

我希望这至少对你有所帮助。祝好运!

Answer 2

我没有使用Amplify，而是使用Cognito托管UI实现了此流程：

1. 用户在我的网站中导航(选项卡1)，并在任何页面中单击登录/注册按钮。
2. 将打开一个新选项卡(选项卡2)，该选项卡使用我自己的域进行托管ui (auth.example.com)
3. Then用户在托管UI上开展业务(登录/新帐户/恢复密码等)
4. cognito将URL中的哈希(带有许多令牌)发送到我的站点回调。(https://example.com/login)
5. 我的站点处理令牌:诀窍是创建一个身份验证实例，这个可以解析散列并在LocalStorage上创建用户：

// mysite.com/登录从‘amazon-cognito- Auth -js’导入{CognitoAuth}；//配置Auth实例。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)；//回调，必须声明，但可以为空。auth.userhandler ={ onSuccess: function(result) { }，onFailure: function(err) {} }；//获取包含哈希数据的完整urlvar curUrl = window.location.href；//这里是诀窍，此步骤为用户配置LocalStorage。回调(CurUrl)；window.top.close();

• After用户已在本地存储中设置，回调(选项卡2)已关闭。我的站点上的

• (选项卡1)我将EventListener配置为侦听本地存储中是否有更改。

构造函数(){ (event.key.indexOf('CognitoIdentityServiceProvider') (‘window.addEventListener’，this.userLogged)；}userLogged(事件){ if userLogged !== -1) { var data ={ UserPoolId：'us-east-1_xxxxx'，ClientId：'xxxxx‘}；var userPool = CognitoUserPool(data)；//幕后getCurrentUser在本地存储上查找用户var cognitoUser = userPool.getCurrentUser()；}}

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

Answer 3

使用托管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/

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

免责声明:我是该博客的作者。希望它能对你有用！