我一直在研究为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