React AWS Cognito：电子邮件身份验证设置指南（第二部分）

在上一篇文章中，我们处理了 AWS 端的所有内容；现在让我们深入研究 React 来设置我们的代码。

AWS 提供了 npm 包@aws-sdk/client-cognito-identity-provider，其中包含以下功能：

• 使用电子邮件和密码创建帐户
• 通过 AWS 发送的代码验证电子邮件
• 使用电子邮件和密码登录

查看演示页面亲自尝试一下，并随时查看 GitHub 存储库中的代码。

报名

第一步是注册

import { SignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signUp = async (email: string, password: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: email,
    Password: password,
    UserAttributes: [
      {
        Name: "email",
        Value: email,
      },
    ],
  };

  const command = new SignUpCommand(params);

  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

请注意 AWS_CLIENT_ID 是如何必需的，并且此帮助函数接受电子邮件和密码。在演示中，这两个值均由用户在表单中输入，然后 UI 调用此方法并传递这些值。

如果出现错误，则会抛出异常，并且 UI 会进行相应处理。

确认

注意：在测试过程中，表单中使用的任何电子邮件都必须首先经过验证。这在生产中是不必要的。

当 SignUpCommand 运行时，AWS 会注册帐户并通过电子邮件发送验证码，因此下一步是检查收件箱并复制代码。

import { ConfirmSignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const confirmSignUp = async (username: string, code: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: username,
    ConfirmationCode: code,
  };

  const command = new ConfirmSignUpCommand(params);
  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

请注意，ConfirmSignUpCommand 需要您的 AWS ClientId、用户名（电子邮件）以及发送到电子邮件的确认代码。

登入

如果ConfirmSignUpCommand成功完成，则帐户应该已准备好登录。

import {
  AuthFlowType,
  SignUpCommand,
} from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signIn = async (username: string, password: string) => {
  const params = {
    AuthFlow: AuthFlowType.USER_PASSWORD_AUTH,
    ClientId: AWS_CLIENT_ID,
    AuthParameters: {
      USERNAME: username,
      PASSWORD: password,
    },
  };
  const command = new InitiateAuthCommand(params);

  let AuthenticationResult;
  try {
    const response = await cognitoClient.send(command);
    AuthenticationResult = response.AuthenticationResult;
  } catch (error) {
    throw error;
  }

  if (!AuthenticationResult) {
    return;
  }

  sessionStorage.setItem("idToken", AuthenticationResult.IdToken || "");
  sessionStorage.setItem("accessToken", AuthenticationResult.AccessToken || "");
  sessionStorage.setItem(
    "refreshToken",
    AuthenticationResult.RefreshToken || ""
  );

  return AuthenticationResult;
};

在 InitiateAuthCommand 中，AWS 需要用户通过表单提供的 ClientId、用户名（电子邮件）和密码。如果邮箱已通过验证，则登录成功。

此外，一些值存储在 sessionStorage 中以供将来使用。

结论

查看演示并探索代码库。

Cognito 设置相对容易，但功能强大。它处理创建、验证和验证帐户等基本操作。虽然可以为此构建自己的服务，但需要付出巨大的努力才能正确实施和维护。

启动项目时，云服务具有减轻这些责任的优势，因此您可以专注于核心业务逻辑，即使它引入了一些依赖性。

以上是React AWS Cognito：电子邮件身份验证设置指南（第二部分）的详细内容。更多信息请关注PHP中文网其他相关文章！