企业官网建设流程全解析

如何在React Native中快速构建用户注册登录与找回密码？AWS SDK for React Native 之 Cognito User Pools 实战指南

【免费下载链接】aws-sdk-react-nativeAWS SDK for React Native (developer preview)项目地址: https://gitcode.com/gh_mirrors/aw/aws-sdk-react-native

想在 React Native 应用中快速实现用户注册登录与找回密码功能，AWS SDK for React Native 提供的 Cognito User Pools 示例是一个现成的实战参考。这套 SDK（开发者预览版）让移动端应用无需自建后端，就能通过 Amazon Cognito 完成注册、登录、短信验证码确认和重置密码等全套身份认证流程。本文带你读懂它的实现思路，几分钟跑起一个可运行的注册登录 Demo。

🎯 为什么选 Cognito User Pools 做移动端身份认证？

对于 React Native 跨平台应用，自己搭建一套"用户表 + 注册接口 + 登录接口 + 密码找回"成本不低。Cognito User Pools 直接帮你搞定这些基础能力：

• 注册与确认：用户提交用户名、密码、邮箱、手机号，AWS 自动发送 SMS/邮件验证码
• 安全会话管理：登录成功后自动签发 idToken、accessToken、refreshToken
• 找回密码：内置 forgotPassword 两步流程（请求验证码 → 验证并设置新密码）
• 密码策略：可在项目配置中强制最低长度、大小写、数字、符号要求

本仓库的UserPools/目录就是一个完整示例，覆盖了以上全部能力。📱

📂 先认识一下示例项目结构

打开UserPools/目录，核心文件分工非常清晰：

其中UserPools/mobile-hub-project.yml里定义了示例的密码策略：最小 8 位、必须包含大小写字母、数字和符号，并允许用户名、邮箱、手机号作为别名，MFA 默认关闭。

🚀 快速上手：4 步跑起注册登录 Demo

示例运行方式在UserPools/README.md中有完整说明，核心步骤如下：

第 1 步：导入 Mobile Hub 项目

mobile-hub-project.yml声明了项目要开通"内容分发 + 登录"功能，在 AWS Mobile Hub 控制台导入后，会自动创建 Cognito User Pool 和 Identity Pool。

第 2 步：准备配置文件

在 Mobile Hub 控制台的 Hosting and Streaming 页下载aws-exports.js文件，再进入 Amazon Cognito 控制台找到不带 "web" 后缀的 App client，记下 App client id 和 secret，填入文件并手动补充ios_appId与ios_appSecret两个字段。然后把文件放到UserPools/根目录（与Auth.js同级）。

第 3 步：安装依赖并运行

在UserPools/目录执行npm install，再执行react-native run-ios即可启动应用。

第 4 步：体验完整流程

启动后在界面输入框填入：唯一用户名、密码、邮箱、带国际区号的手机号（如 +12223334444），点击Register User注册，随后会收到短信验证码；点击Enter Confirmation code输入验证码完成注册。最后在上方输入用户名和密码点击Sign-In，成功后会跳转到显示 AWS 凭证的页面 🎉

🔑 读懂 Auth.js：一个文件看懂认证全流程

UserPools/Auth.js通过原生模块Login（require('NativeModules').Login）暴露了 6 个能力，这是整个示例的灵魂文件：

1️⃣ 注册新用户：registerUser（L48-L70）

接收 username、password、email、phone 四个参数，把邮箱和手机号打包成userAttributes数组传给原生层。原生端Login.m中的registerUser:方法（约 L76-L104）会调用AWSCognitoIdentityUserPool的signUp接口完成注册，并把确认状态返回给 JS 层。

2️⃣ 验证码确认：confirmUser（L72-L85）

注册后用户收到 SMS 验证码，调用confirmUser(username, confirmationCode)即完成账户激活。原生实现中会自动计算 secretHash（用 App client secret 对用户名做签名）并设置forceAliasCreation，让邮箱/手机号别名生效。

3️⃣ 登录并换取 AWS 凭证：loginUser（L24-L46）

这是最关键的一步，流程分两段：

1. 调用原生signin方法，拿到 idToken / accessToken / refreshToken 三件套；
2. 把 idToken 作为 Logins 映射交给AWS.CognitoIdentityCredentials，向 Cognito Identity 池换取一组临时 AWS 凭证（AccessKeyId、SecretAccessKey、SessionToken）。

这样你的 React Native 应用就可以直接签名请求 S3、DynamoDB 等 AWS 资源，无需在 App 里硬编码任何长期密钥——这正是移动端开发的最佳实践。🔒

4️⃣ 找回密码：forgotPassword + confirmForgotPassword

Auth.js提供了forgotPassword（L87-L98）发起请求，验证码送达后，由原生端confirmForgotPassword:（UserPools/ios/Login.mL162-L176）调用confirmForgotPassword:password:方法，传入验证码和新密码，一步完成重置。

5️⃣ 会话续期：refreshSession（L113-L121）

令牌有有效期，refreshSession利用 refreshToken 静默刷新会话，避免用户频繁重新登录。

6️⃣ 登录成功后：展示凭证

UserPools/UserData.js在页面加载时调用AWS.config.credentials.refresh()，把 AccessKeyId、SecretKey、SessionToken、Expiration、IdentityId 展示在界面上，方便你验证登录链路是否完全打通。

🧩 原生桥接层是怎么工作的？

React Native 的 JS 代码不能直接调用 AWS 原生 SDK，UserPools/ios/Login.m就是这座桥。它通过RCT_EXPORT_MODULE注册了 7 个导出方法：

initWithOptions —— 用 region、appId、appSecret、userPoolId 初始化 User Pool 客户端 signin —— 密码登录，返回三类令牌 registerUser —— 注册并附带用户属性 confirmUser —— 验证码确认注册 refreshSession —— 刷新会话 forgotPassword —— 发起找回密码 confirmForgotPassword —— 验证码 + 新密码完成重置

JS 入口UserPools/index.ios.js（L36-L43）会在构造时读取aws-exports.js的配置，调用initWithOptions完成初始化，之后Auth.js中的所有操作都是对这些原生方法的 Promise 化封装。每个方法都带 Promise 的 resolve/rejecter，所以在 JS 层用async/await调用非常自然。

💡 实战避坑清单

• 手机号必须带国际区号（如 +12223334444），否则 SMS 发送会失败
• 密码要满足策略：示例要求 8 位以上且含大小写、数字、符号，不满足会被注册接口直接拒绝
• 选对 App client：一定要用名字里不含 "web"的 client id，那是给移动应用准备的
• aws-exports.js 别提交到仓库：里面含 App client secret，示例要求手动放入本地目录，这正是其设计意图
• SDK 状态说明：项目 README 提示这是 2017 年的开发者预览版，新立项建议优先考虑 AWS Amplify 或 AWS JavaScript SDK 的 React Native 支持方案，本文示例的价值在于学习 Cognito 认证链路的完整实现 📌

✅ 小结

通过UserPools/这个示例，你在不到 200 行 JS 代码里就能获得：注册、验证码确认、登录、临时凭证换取、找回密码、会话刷新六大能力。理解Auth.js与Login.m的分工后，把这套"JS 封装 Promise + 原生模块调用 AWS SDK"的模式迁移到自己项目中，React Native 的完整身份认证体系就基本成型了。

【免费下载链接】aws-sdk-react-nativeAWS SDK for React Native (developer preview)项目地址: https://gitcode.com/gh_mirrors/aw/aws-sdk-react-native