如何在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/Auth.jsJS 侧封装的全部认证逻辑注册、确认、登录、找回密码、刷新会话UserPools/RegisterLogin.js注册/登录界面组件Sign-In、Register User 按钮UserPools/UserData.js登录成功后的页面展示拿到的 AWS 临时凭证UserPools/index.ios.jsiOS 应用入口负责初始化 Cognito 客户端UserPools/ios/Login.miOS 原生桥接模块真正调用 AWS 原生 SDK 的地方UserPools/mobile-hub-project.ymlMobile Hub 项目配置含密码策略、区域等UserPools/README.md官方示例运行步骤其中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通过原生模块Loginrequire(NativeModules).Login暴露了 6 个能力这是整个示例的灵魂文件1️⃣ 注册新用户registerUserL48-L70接收 username、password、email、phone 四个参数把邮箱和手机号打包成userAttributes数组传给原生层。原生端Login.m中的registerUser:方法约 L76-L104会调用AWSCognitoIdentityUserPool的signUp接口完成注册并把确认状态返回给 JS 层。2️⃣ 验证码确认confirmUserL72-L85注册后用户收到 SMS 验证码调用confirmUser(username, confirmationCode)即完成账户激活。原生实现中会自动计算 secretHash用 App client secret 对用户名做签名并设置forceAliasCreation让邮箱/手机号别名生效。3️⃣ 登录并换取 AWS 凭证loginUserL24-L46这是最关键的一步流程分两段调用原生signin方法拿到 idToken / accessToken / refreshToken 三件套把 idToken 作为 Logins 映射交给AWS.CognitoIdentityCredentials向 Cognito Identity 池换取一组临时 AWS 凭证AccessKeyId、SecretAccessKey、SessionToken。这样你的 React Native 应用就可以直接签名请求 S3、DynamoDB 等 AWS 资源无需在 App 里硬编码任何长期密钥——这正是移动端开发的最佳实践。4️⃣ 找回密码forgotPassword confirmForgotPasswordAuth.js提供了forgotPasswordL87-L98发起请求验证码送达后由原生端confirmForgotPassword:UserPools/ios/Login.mL162-L176调用confirmForgotPassword:password:方法传入验证码和新密码一步完成重置。5️⃣ 会话续期refreshSessionL113-L121令牌有有效期refreshSession利用 refreshToken 静默刷新会话避免用户频繁重新登录。6️⃣ 登录成功后展示凭证UserPools/UserData.js在页面加载时调用AWS.config.credentials.refresh()把 AccessKeyId、SecretKey、SessionToken、Expiration、IdentityId 展示在界面上方便你验证登录链路是否完全打通。 原生桥接层是怎么工作的React Native 的 JS 代码不能直接调用 AWS 原生 SDKUserPools/ios/Login.m就是这座桥。它通过RCT_EXPORT_MODULE注册了 7 个导出方法initWithOptions —— 用 region、appId、appSecret、userPoolId 初始化 User Pool 客户端 signin —— 密码登录返回三类令牌 registerUser —— 注册并附带用户属性 confirmUser —— 验证码确认注册 refreshSession —— 刷新会话 forgotPassword —— 发起找回密码 confirmForgotPassword —— 验证码 新密码完成重置JS 入口UserPools/index.ios.jsL36-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在React Native中快速构建用户注册登录与找回密码？AWS SDK for React Native 之 Cognito User Pools 实战指南
如何在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/Auth.jsJS 侧封装的全部认证逻辑注册、确认、登录、找回密码、刷新会话UserPools/RegisterLogin.js注册/登录界面组件Sign-In、Register User 按钮UserPools/UserData.js登录成功后的页面展示拿到的 AWS 临时凭证UserPools/index.ios.jsiOS 应用入口负责初始化 Cognito 客户端UserPools/ios/Login.miOS 原生桥接模块真正调用 AWS 原生 SDK 的地方UserPools/mobile-hub-project.ymlMobile Hub 项目配置含密码策略、区域等UserPools/README.md官方示例运行步骤其中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通过原生模块Loginrequire(NativeModules).Login暴露了 6 个能力这是整个示例的灵魂文件1️⃣ 注册新用户registerUserL48-L70接收 username、password、email、phone 四个参数把邮箱和手机号打包成userAttributes数组传给原生层。原生端Login.m中的registerUser:方法约 L76-L104会调用AWSCognitoIdentityUserPool的signUp接口完成注册并把确认状态返回给 JS 层。2️⃣ 验证码确认confirmUserL72-L85注册后用户收到 SMS 验证码调用confirmUser(username, confirmationCode)即完成账户激活。原生实现中会自动计算 secretHash用 App client secret 对用户名做签名并设置forceAliasCreation让邮箱/手机号别名生效。3️⃣ 登录并换取 AWS 凭证loginUserL24-L46这是最关键的一步流程分两段调用原生signin方法拿到 idToken / accessToken / refreshToken 三件套把 idToken 作为 Logins 映射交给AWS.CognitoIdentityCredentials向 Cognito Identity 池换取一组临时 AWS 凭证AccessKeyId、SecretAccessKey、SessionToken。这样你的 React Native 应用就可以直接签名请求 S3、DynamoDB 等 AWS 资源无需在 App 里硬编码任何长期密钥——这正是移动端开发的最佳实践。4️⃣ 找回密码forgotPassword confirmForgotPasswordAuth.js提供了forgotPasswordL87-L98发起请求验证码送达后由原生端confirmForgotPassword:UserPools/ios/Login.mL162-L176调用confirmForgotPassword:password:方法传入验证码和新密码一步完成重置。5️⃣ 会话续期refreshSessionL113-L121令牌有有效期refreshSession利用 refreshToken 静默刷新会话避免用户频繁重新登录。6️⃣ 登录成功后展示凭证UserPools/UserData.js在页面加载时调用AWS.config.credentials.refresh()把 AccessKeyId、SecretKey、SessionToken、Expiration、IdentityId 展示在界面上方便你验证登录链路是否完全打通。 原生桥接层是怎么工作的React Native 的 JS 代码不能直接调用 AWS 原生 SDKUserPools/ios/Login.m就是这座桥。它通过RCT_EXPORT_MODULE注册了 7 个导出方法initWithOptions —— 用 region、appId、appSecret、userPoolId 初始化 User Pool 客户端 signin —— 密码登录返回三类令牌 registerUser —— 注册并附带用户属性 confirmUser —— 验证码确认注册 refreshSession —— 刷新会话 forgotPassword —— 发起找回密码 confirmForgotPassword —— 验证码 新密码完成重置JS 入口UserPools/index.ios.jsL36-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考