Cognito托管的UI [英] Cognito hosted UI

问题描述

我一直在研究为Web应用设置登录，让客户端查看S3中托管的数据，发现AWS Cognito有托管的Web UI [link] 为我处理大部分身份验证流程，我面临的问题是我无法找到如何将Web UI的输出集成到我的应用程序中。 Cognito中的大多数现有文档仅仅引用了如何使用各种AP​​I来创建自己的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托管的用户界面创建了什么？

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授权类型

首先，检查您的App客户端设置。您需要将回调网址列入白名单（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 App客户端设置

授权码grant将返回授权代码，然后将其发送到 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.

要使用隐式授权，请更改 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

您只需要从网址上剥离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.

UI备注

当用户点击链接时，我的应用程序会在新标签页中弹出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是不允许的，因为它可以缓解点击-jacking。 来源

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屋！