Аутентификация в AWS пуле пользователей Cognito из браузера JS - PullRequest
Новая
       29

Аутентификация в AWS пуле пользователей Cognito из браузера JS

0 голосов
/ 05 августа 2020

Я создаю доказательство концепции веб-приложения и хотел бы использовать AWS пользовательский пул Cognito в качестве механизма аутентификации пользователей. Я настроил пул пользователей и клиентское приложение. Я использовал размещенный пользовательский интерфейс для регистрации тестового пользователя. Теперь мне нужно аутентифицировать этого пользователя из браузера.

Я нашел два примера в документации AWS ( здесь и здесь ), показывающих, как аутентифицировать пользователей против Пулы пользователей Cognito с javascript на основе браузера. Я не могу заставить ни один из них работать на меня.

Вот моя демонстрация минимального кода 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);
        },

    });
}

Когда я запускаю этот код, я получаю Uncaught TypeError: AWS.CognitoIdentityServiceProvider.CognitoUserPool is not a constructor в строке var userPool = new AWS.CognitoIdentityServiceProvider.CognitoUserPool(poolData);. Разумеется, я не вижу 'CognitoUserPool' в файле aws -sdk-2.726.0. js.

Вот моя вторая попытка, используя пример кода на 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.js, чтобы перейти на Amplify.

Можно ли аутентифицировать пользователя с помощью простого Javascript на стороне клиента без использования Amplify? Если так, я был бы очень признателен за полный рабочий пример (или за то, что кто-то укажет, что я делаю неправильно).

1 Ответ

0 голосов
/ 07 августа 2020

Для всех, кто придет за мной с этой проблемой, я нашел решение. Я не знаю, правильное ли это решение правильное . Удачи вам всем: 

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