在 Uniapp 中实现手机号一键登录,核心依赖运营商的 “号码认证” 能力(通过移动数据网络验证用户手机号),通常需结合聚合 SDK(如 MobTech、极光等)简化对接。以下是完整流程及实现步骤:
- 准备工作:注册聚合平台账号,配置应用信息(获取 AppKey、包名签名等)。
- 集成 SDK:在 Uniapp 中引入一键登录插件,配置权限。
- 前端操作:初始化 SDK → 预取号(提升速度)→ 显示授权页 → 获取临时 token。
- 后端验证:前端将 token 传给后端 → 后端调用聚合平台接口换手机号 → 完成登录逻辑。
- 结果处理:前端保存登录凭证,跳转首页。
- 选择聚合平台:推荐使用 MobTech、极光等(无需分别对接三大运营商),以MobTech为例。
- 注册配置:
- 进入MobTech 官网注册账号,创建应用,获取
AppKey和AppSecret。
- 配置应用信息:填写 Uniapp 的 Android 包名(
manifest.json中配置)、iOS Bundle ID,上传签名文件(Android 需)。
- 导入插件:在 HBuilderX 中,进入 “插件市场” 搜索 “Mob 一键登录”,导入项目。
- 配置权限:
- 打开
manifest.json → “App 模块配置” → 勾选 “一键登录”,填写 Mob 的AppKey。
- Android 权限:自动添加
READ_PHONE_STATE(读取手机号状态)、ACCESS_NETWORK_STATE(网络状态)等。
- iOS 权限:需在
info.plist中添加NSLocationWhenInUseUsageDescription(可选,部分场景需要)。
在App.vue的onLaunch中初始化,确保应用启动时准备就绪:

在登录页面(如pages/login/login.vue)中,点击 “一键登录” 按钮时触发:

后端需调用聚合平台接口,用前端传来的token换取真实手机号,再完成登录(注册 / 生成用户 token)。以 Node.js 为例:
- 测试环境:需使用自定义基座(HBuilderX → 运行 → 制作自定义基座),真机测试(模拟器可能无法获取移动网络)。
- 网络要求:用户需开启移动数据(WiFi 环境下可能无法验证,部分 SDK 支持 WiFi,但成功率低)。
- 异常处理:
- 用户拒绝授权:引导使用短信验证码登录。
- token 过期 / 无效:重新调用
showLoginPage获取新 token。
- 网络错误:提示用户检查网络。
- 样式自定义:授权页样式(按钮、logo、隐私协议)需符合平台规范,避免审核被拒。
通过以上步骤,即可在 Uniapp 中实现手机号一键登录,核心是利用聚合 SDK 简化运营商对接,前端获取临时 token 后由后端完成手机号验证和登录逻辑。