wangys/urbanLifeline

Fork 0

Files

wangys 8073a95f74 微信小程序登录修改

2026-01-09 12:17:21 +08:00

5.4 KiB

Raw Blame History

手机号授权登录方案说明

方案概述

已实现方案B：首次登录时请求手机号授权。用户首次打开小程序时，会显示一个精美的授权弹窗，引导用户授权手机号。

实现流程

1. 用户首次登录

用户打开小程序
调用 wx.login 获取微信登录 code
显示手机号授权弹窗，提供两个选项：
- 授权手机号登录：获取用户手机号，完成正式注册
- 暂不授权，以游客身份使用：跳过手机号授权，以游客身份登录
用户选择授权：
- 点击"授权手机号登录" → 获取手机号加密数据（phoneCode）
- 点击"暂不授权" → 以游客身份登录，无需手机号
将相关数据发送到后端
后端完成注册/登录（正式用户或游客）
保存用户信息到本地缓存

2. 后续登录

直接从本地缓存读取用户信息
无需重复授权

关键代码位置

模板部分 (index.uvue)

手机号授权弹窗: 第 176-202 行
授权按钮: 第 190-196 行，使用 open-type="getPhoneNumber" 触发授权
暂不授权按钮: 第 197-199 行，点击后以游客身份登录

脚本部分 (index.uvue)

showPhoneAuthModal: 第 244 行 - 控制授权弹窗显示
tempWechatCode: 第 246 行 - 保存微信登录 code
autoLogin(): 第 296-327 行 - 修改后的自动登录逻辑
onGetPhoneNumber(): 第 370-466 行 - 处理手机号授权回调
handleSkipAuth(): 第 468-526 行 - 处理跳过授权，游客登录

样式部分 (index.scss)

phone-auth-modal: 第 817-905 行 - 授权弹窗样式
skip-auth-btn: 第 888-905 行 - 暂不授权按钮样式

后端接口要求

identify 接口需要支持以下功能：

// 请求参数
interface IdentifyRequest {
  wechatId: string;  // 微信ID（从code中提取的临时ID）
  phone: string;     // 手机号加密code（phoneCode）或明文手机号
}

// 后端需要：
// 1. 判断 phone 是否为加密code
// 2. 如果是加密code，使用微信API解密获取真实手机号
// 3. 根据 wechatId 和 phone 查询或创建用户
// 4. 返回用户信息和 token

微信手机号解密接口

后端需要调用微信的 getPhoneNumber 接口：

POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

{
  "code": "手机号加密code"
}

参考文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html

小程序配置要求

1. 开通手机号快速验证权限

在微信公众平台（mp.weixin.qq.com）：

登录小程序后台
进入"开发" → "开发管理" → "接口设置"
找到"手机号快速验证组件"
点击"开通"

2. 服务器域名配置

确保后端 API 域名已添加到小程序的合法域名列表中。

错误处理

errno 102 错误

如果用户授权时出现 errno 102 错误，说明小程序未开通"手机号快速验证"功能。代码中已添加友好提示：

if (e.detail.errno === 102) {
  uni.showModal({
    title: '提示',
    content: '该小程序暂未开通手机号快速验证功能，请联系管理员开通后再试。',
    showCancel: false
  })
}

授权失败重试

如果授权失败，会重新显示授权弹窗，用户可以再次尝试。

用户体验优化

1. 精美的授权弹窗

渐变色背景
大图标设计
清晰的授权说明
突出的授权按钮

2. 非侵入式设计

用户可以选择"暂不授权"继续使用（如果实现了游客模式）
已授权用户不会重复看到授权弹窗

3. 本地缓存

授权成功后保存用户信息到本地
下次打开直接使用缓存，无需重复授权

测试要点

1. 首次登录测试

清空小程序缓存
打开小程序
验证是否显示授权弹窗
点击授权按钮
验证是否成功登录

2. 已登录用户测试

授权成功后关闭小程序
重新打开小程序
验证是否自动登录（不显示授权弹窗）

3. 授权失败测试

点击授权按钮后取消
验证错误提示是否友好
验证是否可以再次尝试

4. 未开通权限测试

在未开通手机号快速验证的小程序中测试
验证 errno 102 错误提示

注意事项

隐私政策：使用手机号授权前，需要在小程序中添加隐私政策说明
用户同意：确保用户知道手机号的用途（身份识别、工单通知等）
数据安全：后端需要安全存储用户手机号，遵守相关法律法规
降级方案：如果手机号授权失败，可以考虑提供其他登录方式（如手动输入手机号+验证码）

后续优化建议

添加"暂不授权"功能：允许用户跳过授权，以游客身份使用部分功能
添加重新授权入口：在个人中心添加"绑定手机号"功能，让跳过授权的用户可以后续绑定
优化错误提示：针对不同的授权失败原因，提供更详细的解决方案
添加授权动画：让授权过程更加流畅和友好

5.4 KiB Raw Blame History Unescape Escape