Cognito 托管 UI [英] Cognito hosted UI

问题描述

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

I have been looking into setting up a login for a web app that lets clients view data hosted in S3 and found that AWS Cognito has a hosted web UI [link] that handles most of the authentication flow for me, the issue I am facing is I cannot find out how to integrate the output of the web UI into my app. Most of the existing documentation in Cognito just references how to use the various APIs in creating your own UI which is leaving me with confusing answers to my issue.

是否有使用 Cognito 托管 UI 创建的信息?

Is there any information that has been created with the Cognito hosted UI in mind?

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

Amazon says that you can integrate authenticated login with Cognito in minutes but I have been looking at this for a few weeks and cant figure it out.

推荐答案

我也遇到了这个问题；我同意文档有点轻.

I also struggled with this; I agree that the documentation is a little light.

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

The link you provided shows what your Cognito UI URL might look like:

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

这个想法是你将你的用户发送到这个 URI，他们做他们的生意，然后他们用某种令牌或代码重定向回你.您可以点击左侧导航栏中的域名"来查看您的域名.

The idea is that you send your user to this URI, they do their business, and then they get redirected back to you with some sort of token(s) or code. You can check your domain by clicking "Domain name" in the left nav bar.

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

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

First, check your App client settings. You'll need to whitelist your Callback URL(s) (where Cognito will redirect back to), and make sure at least one OAuth Flow is allowed.

Cognito 应用客户端设置

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

"Authorization code grant" will return an authorization code, which you then send to the oauth2/token endpoint to get an access_token, id_token, and refresh_token. This is a good choice if you have a back-end application and want refresh tokens.

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

"Implicit grant" is what I'm using in my front-end application. It will return an access token and an id token directly to my front-end app.

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

To use implicit grant, change response_type=code to response_type=token in your Cognito UI URL.

隐式授权示例

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

So if your redirect after successful authentication looks like this:

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

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

You just need to peel the id_token off the URL and send it to Cognito, with your User Pool as the key in the Logins map. In 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 令牌.

Where idToken is the id token that came back to you on the redirect.

授权码授予类型

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

If you use authorization code grant type instead (response_type=code), your back end will need to call the /oauth2/token endpoint to exchange the code for tokens. That call would look something like this:

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

Then you can give this id token to Cognito as above.

用户界面注释

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

My application is popping up the Cognito UI in a new tab when the user clicks a link. When the redirect comes back to my app, I use postMessage() to send the tokens to the parent window, which then closes the new tab. I think this is a relatively common pattern.

我还没有尝试过，但我猜不允许将 UI 渲染到 iframe 中，以缓解点击劫持.来源

I haven't tried it, but I'm guessing rendering the UI into an iframe is disallowed, as a mitigation against click-jacking. Source

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

I hope this is at least somewhat helpful. Good luck!

这篇关于Cognito 托管 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！