# 手机号授权登录方案说明

## 方案概述

已实现**方案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. **添加授权动画**：让授权过程更加流畅和友好