在上一篇文章中，我们处理了 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 相对容易设置但功能强大。它处理创建、验证和验证帐户等基本操作。虽然可以为此构建自己的服务，但需要付出巨大的努力来正确实施和维护。
启动项目时，云服务具有减轻这些责任的优势，因此您可以专注于核心业务逻辑，即使它引入了一些依赖性。
