在上一篇文章中，我们处理了 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：电子邮件身份验证设置指南（第二部分）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497253.html
微信扫一扫 
支付宝扫一扫 
