从浏览器JS对AWS Cognito用户池进行身份验证



我正在构建一个概念验证web应用程序,并希望使用AWS Cognito用户池作为我的用户身份验证机制。我已经配置了一个用户池和一个客户端应用程序。我已经使用托管UI注册了一个测试用户。现在我需要从浏览器验证该用户。

我在AWS文档中发现了两个示例(此处和此处(,展示了如何使用基于浏览器的javascript根据Cognito用户池对用户进行身份验证。我找不到任何一个为我工作。

以下是我的最低代码演示HTML(两个文本框和一个按钮(:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<input id="username" type="text" value="myUser"></input> <br>
<input id="password" type="password" value="myPa55w0rd!"></input> <br>
<button onclick="login()">Log In!</button>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.726.0.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>

这是我的myscript.js(版本1,来自https://aws.amazon.com/blogs/mobile/accessing-your-user-pools-using-the-amazon-cognito-identity-sdk-for-javascript/):

function login() {
AWS.config.region = "us-west-2";
var poolData = {
UserPoolId : 'us-west-2_redacted',
ClientId : 'abcdefghijklmnopqrstuvwxyz'
};
var userPool = new AWS.CognitoIdentityServiceProvider.CognitoUserPool(poolData); <--Error here
var authenticationData = {
Username : document.getElementById("username").value,
Password : document.getElementById("password").value
};
var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.authenticationDetails(authenticationData); 
var userData = {
Username : document.getElementById("username").value,
Pool: userPool
};
var cognitoUser = new AmazonCognito.CognitoIdentityServiceProvider.cognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken();
/* Use the idToken for Logins Map when Federating User Pools with identity pools or when passing through an Authorization Header to an API Gateway Authorizer */
var idToken = result.idToken.jwtToken;
alert("Authentication successful!");
},
onFailure: function(err) {
alert(err);
},
});
}

当我运行这个代码时,我在var userPool = new AWS.CognitoIdentityServiceProvider.CognitoUserPool(poolData);行中得到Uncaught TypeError: AWS.CognitoIdentityServiceProvider.CognitoUserPool is not a constructor。果不其然,我在aws-sdk-2.726.0.js文件中没有看到"CognitoUserPool"。

这是我的第二次尝试,使用https://docs.aws.amazon.com/cognito/latest/developerguide/authentication.html:

function login() {
var authenticationData = {
Username : document.getElementById("username").value,
Password : document.getElementById("password").value
}
var authenticationDetails = new AmazonCognitoIdentity.authenticationDetails(authenticationData); <-- Error here
var poolData = {
UserPoolId : 'us-west-2_redacted',
ClientId : 'abcdefghijklmnopqrstuvwxyz'
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : 'username',
Pool : userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken();
/* Use the idToken for Logins Map when Federating User Pools with identity pools or when passing through an Authorization Header to an API Gateway Authorizer */
var idToken = result.idToken.jwtToken;
},
onFailure: function(err) {
alert(err);
},
});
}

当我运行此代码时,我会得到UncaughtReferenceError: AmazonCognitoIdentity is not defined。果不其然,aws.sdk-2.726.0.js文件中没有出现文本"AmazonCognitoIdentity"。

我一直在追踪这个问题,到目前为止还没有找到解决方案。我非常希望避免使用Amplify框架。这带来了一个新框架的陡峭学习曲线的成本,我宁愿避免,至少目前是这样。此外,我几乎不是一个JS程序员,当然也不是一个节点程序员,所以我也必须爬上学习node.JS的山才能转到Amplify。

是否可以在不使用Amplify的情况下使用简单的客户端Javascript对用户进行身份验证?如果是这样的话,我将非常感谢一个完整的工作示例(或者有人指出我做错了什么。(

对于任何来找我解决这个问题的人,我找到了一个解决方案。我不知道这是否是正确的解决方案。祝你们好运:

function login() {
AWS.config.update({region : "us-west-2"});
const payload = {
AuthFlow: "USER_PASSWORD_AUTH",
ClientId: "abcdefghijklmnopqrstuvwxyz",
AuthParameters : {
USERNAME: document.getElementById('username').value,
PASSWORD: document.getElementById('password').value
}
}
var cognito = new AWS.CognitoIdentityServiceProvider();
cognito.initiateAuth(payload, function(err,data) {
if (err) {
alert("Error: " + err);
}
else {
alert("Success!");
}
})
}

最新更新