Reactjs 中的 AWS Cognito 身份验证

Question

我已经使用 Firebase 和 React 构建了应用程序，并且该过程非常无缝。

最近我被要求使用AWS Cognito，由于文档不清楚，设置起来似乎有点痛苦。

首先，如何使用 Cognito 进行用户身份验证？我使用以下应用程序客户端设置设置了一个用户池：

现在，我将授权者添加到我的 API 中，如下所示：

现在我的问题是，如何在我的前端中使用它来登录用户并进行经过身份验证的 API 调用？

似乎有两种不同的工具包可用：

1. https://github.com/aws/aws-sdk-js
2. https://github.com/aws-amplify/amplify-js

对于初学者来说，根本不清楚该使用什么以及如何进行身份验证。理想情况下，我会像 Firebase 一样使用它，只需让我的前端使用电子邮件和密码进行身份验证调用，然后接收某种令牌（仅在成功时），然后可以使用该令牌来制作签名 API来电。

有人可以帮忙提供代码示例吗？

Answer 1

对困惑感到抱歉。

AWS Cognito 用户池充当身份提供商。它支持所有用户管理（注册、登录、密码重置、用户删除等）。Cognito 还支持联合身份（例如，已经拥有 Google/Facebook 帐户的用户可以登录）。在本例中，Cognito 使用 OAuth 与 Google/Facebook 进行对话。

当我学习 Cognito/JWT 令牌时，我创建了一个简单的 JS/HTML 来理解它是如何工作的。既然您要求提供代码，您可以参考它 - https://github.com/ryandam9/Cognito-tokens。

根据您的屏幕截图，您已经配置了一个 Userpool - sls-notes-backend。假设您将强制属性配置为Email。

步骤 0 - 初始化 您在创建用户池时会同时获得userPoolId和appId 。

poolData = {
    UserPoolId: userPoolId,
    ClientId: appId
};

userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

第 1 步 - 使用电子邮件和密码注册用户- 假设您的 UI 已经从用户那里捕获了这些详细信息，并且用户单击了“注册”按钮。

poolData = {
    UserPoolId: userPoolId,
    ClientId: appId
};

userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

如果注册成功（这是有效的电子邮件，并且用户池中尚不存在该电子邮件，则会将确认代码发送到提供的电子邮件。下一步是允许用户输入代码并确认其身份。

第 3 步 - 确认用户

/**
 * Signup a User
 * @param e
 */
function addUser(e) {
    signupMessage.style.display = 'none';
    signupMessage.className = '';

    e.preventDefault();

    let name = document.getElementById('name').value.trim();
    let email = document.getElementById('signup-email').value.trim();
    let password = document.getElementById('signup-password').value.trim();

    if (name.length === 0 || email === 0 || password === 0) {
        return;
    }

    let attributeList = [
        new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute({
            Name: 'given_name', Value: name
        }),
    ];

    userPool.signUp(email, password, attributeList, null, function (err, result) {
        if (err) {
            signupMessage.innerText = err;
            signupMessage.style.display = 'block';
            signupMessage.className = 'alert alert-danger';
            return;
        }

        cognitoUser = result.user;
        console.log('user name is ' + cognitoUser.getUsername());

        // Show a text box to enter Confirmation code
        document.getElementById('signup-btn').style.display = 'none';
        document.getElementById('code-block').style.display = 'block';
        document.getElementById('confirm-user-btn').style.display = 'inline-block';
    });
}

如果用户输入正确的代码，则其身份得到确认。此时，将在该用户的用户池中创建一个条目。看起来是这样的。

步骤 4 - 身份验证（登录） 至此，用户注册已完成。是时候允许他登录了。请忽略下面代码中不必要的代码（获取和打印凭证的代码、解码部分）。如果身份验证成功，Cognito 会向应用程序返回两种类型的令牌 - ID 令牌和访问令牌。这些仅对该会话和该用户有效。更多详细信息请参见此处 - https://ryandam.net/aws/19-cognito-userpools/index.html#0

/**
 * Confirm the user by taking the Confirmation code.
 * @param e
 */
function confirmUser(e) {
    e.preventDefault();
    let verificationCode = document.getElementById('code').value;

    cognitoUser.confirmRegistration(verificationCode, true, function (err, result) {
        if (err) {
            signupMessage.innerText = err;
            signupMessage.style.display = 'block';
            signupMessage.className = 'alert alert-danger';
            return;
        }

        signupMessage.innerText = result;
        signupMessage.style.display = 'block';
        signupMessage.className = 'alert alert-success';
    });
}

第 5 步 - 调用您已创建的 API 端点- 由于您已经使用用户池创建了授权方，并且使用授权作为标头，因此您可以通过将 ID 令牌作为授权标头传递来从 JS 调用端点。发生的情况是，令牌由授权者验证。由于它是有效的，用户可以调用 API。**

我没有 JS 代码，您可以从 CLI/Postman 测试您的 API，如下所示：

注意 AWS Amplify 似乎是 Cognito 和其他服务的包装器。例如，当您调用其 CLI 命令时，Amplify 会为您设置用户池。如果您想了解 Amplify 如何与 Flutter 配合使用，可以参考此代码 - https://github.com/ryandam9/Auth-flutter-aws-amplify。

我仍在学习。我试图尽可能准确。