ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

使用 AWS Amplify Auth.signUp 以邮箱和密码注册用户:将 username 复用为邮箱的实战方案

使用 AWS Amplify Auth.signUp 以邮箱和密码注册用户:将 username 复用为邮箱的实战方案 文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载AWS Amplify 的 Auth 模块支持联合认证federated与用户名/密码两种登录方式。本文基于 TIL 仓库中的 aws/sign-up-user-with-email-and-password.md 笔记讲解一个官方文档语焉不详、但实际开发中极其常见的需求如何直接用邮箱和密码完成用户注册。读完本文你将掌握Auth.signUp的正确调用姿势——把邮箱填入username参数、让 Amplify 自动把它注册为该用户的联系邮箱并能在自己的注册表单中直接落地这套代码。背景Amplify Auth 的两种认证形态AWS Amplify 的 Auth 能力同时提供两种认证路径联合认证Federated通过 Google、Facebook、Apple 等第三方身份提供商完成登录适合免密码的社交登录场景用户名/密码认证Username/Password由应用自己收集用户凭证并提交给 AWS Cognito 用户池适合传统邮箱注册、企业后台账号等场景。对于绝大多数 Web 应用来说邮箱 密码是最主流的注册形态。问题在于Amplify 官方文档并没有把「用邮箱注册」的写法讲透初次接触的开发者很容易在signUp的参数上卡住。这篇 TIL 笔记记录的正是这个关键点signUpAPI 要求传入一个必需的username参数而它完全可以直接塞入用户填写的邮箱地址。核心技巧username 参数就是邮箱从 aws/sign-up-user-with-email-and-password.md 可以看到Auth.signUp的调用签名中最容易让人困惑的正是username。直觉上我们会为「用户名」和「邮箱」分别准备两个字段但 Amplify 的设计允许你只用一个字段import { Auth } from aws-amplify; async function signUp({ email, password }) { try { const user await Auth.signUp({ username: email, password, attributes: {}, }); console.log({ user }); } catch (error) { console.log(error signing up:, error); } }这段代码揭示了两个要点username: email——把用户输入的邮箱字符串直接赋给username参数Amplify 会识别出这是一个邮箱格式的值而不是要求你单独提供显示用用户名attributes: {}——在这里可以附带额外的用户属性如name、phone_number等自定义字段本例无需额外属性因此传入空对象。与注册表单的完整对接笔记中的signUp函数以解构的方式接收{ email, password }这正对应了注册表单的典型形态。当用户填写完注册表单并点击提交后把表单值原样传入即可// 表单提交处理函数示意 async function handleSubmit(formValues) { const { email, password } formValues; await signUp({ email, password }); }关键行为可以概括为email作为username传入password原样透传。也就是说这个函数本质上只做了两件事——把邮箱搬到username的位置把密码交给password字段剩下的认证注册逻辑全部由 Amplify 处理。对于异步错误处理try/catch结构覆盖了常见的失败场景如邮箱已被注册、密码不符合用户池策略、网络异常等错误信息会通过console.log(error signing up:, error)打印方便开发阶段定位问题。生产环境可以将这段逻辑改为向 UI 层返回结构化错误再展示给用户。注册之后邮箱如何被 Amplify 处理这是本篇笔记最有价值的结论。当signUp成功调用后Amplify Auth 会将username解释为邮箱并把该邮箱注册为这个用户的联系邮箱contact email用户在 Cognito 用户池中的登录标识即是这个邮箱后续Auth.signIn登录时也可以直接使用邮箱作为登录凭证该邮箱也会被用于后续的账号验证流程例如邮箱确认码的发送目标地址。这意味着你无需在attributes里重复声明邮箱也不用担心两处邮箱不一致的问题——一个username参数同时承担了「登录标识」和「联系邮箱」两个职责减少了一处容易出错的重复输入。在 TIL 仓库中的定位与相关阅读本仓库README 见 README.md是一个 Today I Learned 式的技术笔记集合AWS 类别下收录了多篇与 AWS 开发相关的实操笔记本文对应条目为 Sign Up User With Email And Password 中的 aws/sign-up-user-with-email-and-password.md。如果你正在搭建完整的 AWS 前端开发环境还可以参考同一目录下的 use-specific-aws-profile-with-cli.md它介绍了如何通过--profile参数或AWS_PROFILE环境变量在多套 AWS 凭证之间切换——当 Amplify 项目需要关联到指定 AWS 账号的 Cognito 用户池时这类 CLI 配置知识同样不可或缺。小结注册用户只需要调用Auth.signUp把表单里的邮箱填入username、密码原样传给password即可Amplify 会自动把该值识别为邮箱并登记为用户的联系邮箱同时它也是后续登录的凭证官方文档对这一点交代不清本文的写法经过 aws/sign-up-user-with-email-and-password.md 笔记验证可直接复制到项目中使用。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐Wasp 邮箱认证实战指南登录注册、邮箱验证、密码重置与自定义扩展Wasp 邮箱认证实战指南登录注册、邮箱验证、密码重置与自定义扩展 Wasp 为全栈 JS/TS 应用提供了开箱即用的邮箱认证Email AuthenticWeb框架后端前端CLI开发工具SkyReels-V2 无限长视频生成从零跑通第一条长视频的新手教程SkyReels V2 无限长视频生成从零跑通第一条长视频的新手教程 SkyReels V2 是一款开源的 无限长度电影级视频生成模型 基于 Diffusi人工智能大模型媒体生成视频计算机视觉多模态Wasp 邮箱认证自定义 UI 实战用 wasp/client/auth 从零构建登录、注册、邮箱验证与密码重置页面Wasp 邮箱认证自定义 UI 实战用 wasp/client/auth 从零构建登录、注册、邮箱验证与密码重置页面 本篇技术指南聚焦 Wasp 全栈框架中邮Web框架后端前端CLI开发工具创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表