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、用户名（电子邮件）以及发送到电子邮件的确认代码。

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：电子邮件身份验证设置指南（第二部分）的详细内容，更多请关注硕下网其它相关文章！

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

报名

确认

登入

结论