我一直在研究为Web应用设置登录，让客户端查看S3中托管的数据，发现AWS Cognito有一个托管的Web UI [link]，可以为我处理大部分身份验证流程，我面临的问题是我无法找到如何将Web UI的输出集成到我的应用程序中。 Cognito中的大多数现有文档仅仅引用了如何使用各种API来创建自己的UI，这让我对我的问题的答案感到困惑。
是否有任何使用Cognito托管用户界面创建的信息？
亚马逊表示，您可以在几分钟内将经过身份验证的登录与Cognito集成，但我已经看了几周而无法弄清楚。
答案 0 :(得分：56)
我也很努力;我同意文档有点亮。
您提供的链接会显示您的Cognito UI网址的外观：
https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>
我们的想法是，您将用户发送到此URI，他们开展业务，然后使用某种令牌或代码将其重定向回给您。您可以点击＆＃34;域名＆＃34;来检查您的域名。在左侧导航栏中。
应用客户端设置和OAuth授权类型
首先，检查您的App客户端设置。您需要将回调网址列入白名单（Cognito将重定向回其中），并确保至少允许一个OAuth流量。
＆＃34;授权代码授予＆＃34;将返回授权代码，然后将其发送到oauth2/token端点以获取access_token，id_token和refresh_token。如果您有后端应用程序并且需要刷新令牌，那么这是一个不错的选择。
＆＃34;隐性拨款＆＃34;是我在我的前端应用程序中使用的。它会将访问令牌和ID令牌直接返回给我的前端应用程序。
要使用隐式授权，请在Cognito UI网址中将response_type=code更改为response_type=token。
隐式授权示例
因此，如果成功验证后的重定向如下所示：
https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600
您只需要从网址上剥离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。
用户界面注释
当用户点击链接时，我的应用程序会在新标签页中弹出Cognito UI。当重定向返回到我的应用程序时，我使用postMessage()将令牌发送到父窗口，然后关闭新选项卡。我认为这是一种相对常见的模式。
我还没有尝试过，但我猜测将UI呈现为iframe是不允许的，因为它可以减轻点击率。 Source
我希望这至少有点帮助。祝你好运！
答案 1 :(得分：1)
此使用案例将使用托管的UI将Cognito置于S3的前面，该AWS博客对此内容进行了介绍：https://aws.amazon.com/blogs/networking-and-content-delivery/authorizationedge-using-cookies-protect-your-amazon-cloudfront-content-from-being-downloaded-by-unauthenticated-users/
博客包含您可以从中窃取的示例代码。而且，您可以使用无服务器应用程序存储库轻松部署示例解决方案。
免责声明：我写了那个博客。希望对您有用！
答案 2 :(得分：0)
我仅使用Cognito托管UI来实现此流程，而不是使用Amplify：
我的网站处理令牌： 诀窍是创建一个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();
}
}
答案 3 :(得分：0)
要使用托管UI，您需要设置托管UI的域名。您还需要设置重定向URI-一个用于登录后，一个用于退出后。您可以在AWS控制台的Cognito用户池的设置页面中完成这两项操作。
将您设置的URI替换为以下格式： {Domain URL} / login？response_type = code＆client_id = {App Client ID}＆redirect_uri = {Callback URL}
此地址显示登录表单。登录后，用户将通过附加到URI的代码重定向到https://my-website.com，如下所示： https://my-website.com?code=f0ee2961-f349-44c7-92b1-0400c762573b
API reference-解释/ login，/ logout和其他端点的模式。
答案 4 :(得分：-1)
您可以在此处找到有关如何使其工作的更多详细信息 -
http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-ux.html