166 lines
5.4 KiB
Markdown
166 lines
5.4 KiB
Markdown
# 手机号授权登录方案说明
|
||
|
||
## 方案概述
|
||
|
||
已实现**方案B：首次登录时请求手机号授权**。用户首次打开小程序时，会显示一个精美的授权弹窗，引导用户授权手机号。
|
||
|
||
## 实现流程
|
||
|
||
### 1. 用户首次登录
|
||
1. 用户打开小程序
|
||
2. 调用 `wx.login` 获取微信登录 code
|
||
3. 显示手机号授权弹窗，提供两个选项：
|
||
- **授权手机号登录**：获取用户手机号，完成正式注册
|
||
- **暂不授权，以游客身份使用**：跳过手机号授权，以游客身份登录
|
||
4. 用户选择授权：
|
||
- 点击"授权手机号登录" → 获取手机号加密数据（phoneCode）
|
||
- 点击"暂不授权" → 以游客身份登录，无需手机号
|
||
5. 将相关数据发送到后端
|
||
6. 后端完成注册/登录（正式用户或游客）
|
||
7. 保存用户信息到本地缓存
|
||
|
||
### 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 接口需要支持以下功能：
|
||
|
||
```typescript
|
||
// 请求参数
|
||
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）：
|
||
1. 登录小程序后台
|
||
2. 进入"开发" → "开发管理" → "接口设置"
|
||
3. 找到"手机号快速验证组件"
|
||
4. 点击"开通"
|
||
|
||
### 2. 服务器域名配置
|
||
|
||
确保后端 API 域名已添加到小程序的合法域名列表中。
|
||
|
||
## 错误处理
|
||
|
||
### errno 102 错误
|
||
如果用户授权时出现 errno 102 错误，说明小程序未开通"手机号快速验证"功能。代码中已添加友好提示：
|
||
|
||
```typescript
|
||
if (e.detail.errno === 102) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '该小程序暂未开通手机号快速验证功能，请联系管理员开通后再试。',
|
||
showCancel: false
|
||
})
|
||
}
|
||
```
|
||
|
||
### 授权失败重试
|
||
如果授权失败，会重新显示授权弹窗，用户可以再次尝试。
|
||
|
||
## 用户体验优化
|
||
|
||
### 1. 精美的授权弹窗
|
||
- 渐变色背景
|
||
- 大图标设计
|
||
- 清晰的授权说明
|
||
- 突出的授权按钮
|
||
|
||
### 2. 非侵入式设计
|
||
- 用户可以选择"暂不授权"继续使用（如果实现了游客模式）
|
||
- 已授权用户不会重复看到授权弹窗
|
||
|
||
### 3. 本地缓存
|
||
- 授权成功后保存用户信息到本地
|
||
- 下次打开直接使用缓存，无需重复授权
|
||
|
||
## 测试要点
|
||
|
||
### 1. 首次登录测试
|
||
- 清空小程序缓存
|
||
- 打开小程序
|
||
- 验证是否显示授权弹窗
|
||
- 点击授权按钮
|
||
- 验证是否成功登录
|
||
|
||
### 2. 已登录用户测试
|
||
- 授权成功后关闭小程序
|
||
- 重新打开小程序
|
||
- 验证是否自动登录（不显示授权弹窗）
|
||
|
||
### 3. 授权失败测试
|
||
- 点击授权按钮后取消
|
||
- 验证错误提示是否友好
|
||
- 验证是否可以再次尝试
|
||
|
||
### 4. 未开通权限测试
|
||
- 在未开通手机号快速验证的小程序中测试
|
||
- 验证 errno 102 错误提示
|
||
|
||
## 相关文件
|
||
|
||
- `urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue` - 主要逻辑
|
||
- `urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss` - 样式文件
|
||
- `urbanLifelineWeb/packages/workcase_wechat/api/guest/index.ts` - guest API（identify接口）
|
||
|
||
## 注意事项
|
||
|
||
1. **隐私政策**：使用手机号授权前，需要在小程序中添加隐私政策说明
|
||
2. **用户同意**：确保用户知道手机号的用途（身份识别、工单通知等）
|
||
3. **数据安全**：后端需要安全存储用户手机号，遵守相关法律法规
|
||
4. **降级方案**：如果手机号授权失败，可以考虑提供其他登录方式（如手动输入手机号+验证码）
|
||
|
||
## 后续优化建议
|
||
|
||
1. **添加"暂不授权"功能**：允许用户跳过授权，以游客身份使用部分功能
|
||
2. **添加重新授权入口**：在个人中心添加"绑定手机号"功能，让跳过授权的用户可以后续绑定
|
||
3. **优化错误提示**：针对不同的授权失败原因，提供更详细的解决方案
|
||
4. **添加授权动画**：让授权过程更加流畅和友好
|