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

标签 javascript amazon-web-services amazon-cognito

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

我在 AWS 文档中找到了两个示例( herehere ),展示了如何使用基于浏览器的 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);
        },
    });
}

当我运行此代码时,出现 Uncaught ReferenceError: AmazonCognitoIdentity is not Defined。果然,文本“AmazonCognitoIdentity”没有出现在 aws.sdk-2.726.0.js 文件中。

我一直在追寻这个问题,但到目前为止还没有找到解决方案。我非常希望避免转向 Amplify 框架。这带来了新框架陡峭的学习曲线的成本,我宁愿避免,至少现在是这样。此外,我勉强算是一个 JS 程序员,当然也不是一个 Node 程序员,所以我还必须爬上学习 Node.js 的山峰才能转向 ​​Amplify。

是否可以使用简单的客户端 Javascript 来验证用户而不使用 Amplify?如果是这样,我将非常感谢一个完整的工作示例(或者有人指出我做错了什么。)

最佳答案

对于那些追随我解决这个问题的人,我找到了解决方案。我不知道这是否是正确的解决方案。祝大家好运:

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!");
        }
    })
}

关于javascript - 从浏览器 JS 向 AWS Cognito 用户池进行身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63266174/

相关文章:

javascript - 防止 div 重叠(bootstrap)

database - 为什么 RDS 突发平衡看起来是随机的,永远不会低于 99%,并且与系统流量无关?

amazon-web-services - 对认知的使用/需要感到困惑

amazon-web-services - 当用户添加到用户池时,Cognito 启动 lambda

javascript - 我想在不使用任何按钮的情况下显示两个数字的加法

javascript - Grunt 为生产构建?

一个页面上的 JavaScript 按钮链接以在另一页上显示隐藏的 div

amazon-web-services - 通过 CloudWatch Events 检测 EC2 实例是否是 CloudFormation 的一部分

amazon-web-services - 捕获 S3 文件下载开始和结束时间以及其他详细信息

vue.js - 从 Nuxt 上传到 AWS S3 存储桶时出现 500 Internal Server Error