微信授权登录功能开发联调
This commit is contained in:
冯辉
321
docs/微信授权登录功能说明.md
Normal file
321
docs/微信授权登录功能说明.md
Normal file
@@ -0,0 +1,321 @@
|
||||
# 微信授权登录功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
本次开发实现了微信授权登录功能，当用户点击首页的特定功能时，会检查用户是否已登录，如果未登录则弹出授权弹窗，而不是直接跳转到登录页面。
|
||||
|
||||
## 主要功能点
|
||||
|
||||
### 1. 需要登录验证的功能入口
|
||||
|
||||
以下功能在点击时会进行登录验证：
|
||||
|
||||
- **附近工作** - 点击后跳转到附近工作列表页
|
||||
- **九宫格服务功能** - 包含9个服务项：
|
||||
- 服务指导
|
||||
- 事业单位招录
|
||||
- 简历制作
|
||||
- 劳动政策指引
|
||||
- 技能培训信息
|
||||
- 技能评价指引
|
||||
- 题库和考试
|
||||
- 素质测评
|
||||
- AI智能面试
|
||||
- **职位列表** - 点击任意职位卡片查看详情
|
||||
|
||||
### 2. 登录弹窗功能
|
||||
|
||||
#### 弹窗特性
|
||||
- 使用 `uni-popup` 组件实现弹窗效果
|
||||
- 弹窗居中显示，支持关闭按钮
|
||||
- 不可点击遮罩关闭，确保用户必须做出选择
|
||||
|
||||
#### 弹窗内容
|
||||
- **Logo和标题** - 显示应用logo和欢迎信息
|
||||
- **授权说明** - 列出三个要点：
|
||||
- 保护您的个人信息安全
|
||||
- 为您推荐更合适的岗位
|
||||
- 享受完整的就业服务
|
||||
- **授权按钮**：
|
||||
- 微信小程序：使用 `open-type="getPhoneNumber"` 获取手机号
|
||||
- H5/App：使用微信登录接口
|
||||
- 测试登录按钮（仅H5/App环境显示）
|
||||
- **用户协议** - 显示用户协议和隐私政策链接
|
||||
|
||||
### 3. 登录流程
|
||||
|
||||
#### 微信小程序登录流程
|
||||
1. 用户点击"微信授权登录"按钮
|
||||
2. 触发微信小程序的手机号授权
|
||||
3. 获取到 `code`、`encryptedData`、`iv`
|
||||
4. 调用后端 `/app/wxLogin` 接口
|
||||
5. 后端返回 `token`
|
||||
6. 存储 `token` 并获取用户信息
|
||||
7. 如果用户信息不完整，跳转到完善信息页面
|
||||
8. 关闭弹窗，继续用户之前的操作
|
||||
|
||||
#### H5/App登录流程
|
||||
1. 用户点击"微信授权登录"按钮
|
||||
2. 调用 `uni.login` 获取微信授权 `code`
|
||||
3. 调用后端 `/app/wxLogin` 接口
|
||||
4. 后续流程同上
|
||||
|
||||
#### 测试登录流程（仅开发环境）
|
||||
1. 用户点击"测试账号登录"按钮
|
||||
2. 使用测试账号密码登录
|
||||
3. 后续流程同上
|
||||
|
||||
### 4. 登录状态管理
|
||||
|
||||
#### 状态恢复
|
||||
- 应用启动时自动从本地缓存恢复用户信息
|
||||
- 验证 `token` 是否有效
|
||||
- 如果 `token` 失效，清除缓存但不跳转登录页
|
||||
|
||||
#### 状态检查
|
||||
- 使用 `checkLogin()` 函数统一检查登录状态
|
||||
- 检查 `token` 是否存在
|
||||
- 检查 `hasLogin` 状态
|
||||
- 如果未登录，自动打开授权弹窗
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
ks-app-employment-service/
|
||||
├── components/
|
||||
│ └── WxAuthLogin/
|
||||
│ └── WxAuthLogin.vue # 微信授权登录弹窗组件
|
||||
├── pages/
|
||||
│ └── index/
|
||||
│ └── components/
|
||||
│ └── index-one.vue # 首页组件（已修改）
|
||||
├── stores/
|
||||
│ └── useUserStore.js # 用户状态管理（已修改）
|
||||
├── App.vue # 应用入口（已修改）
|
||||
└── docs/
|
||||
└── 微信授权登录功能说明.md # 本文档
|
||||
```
|
||||
|
||||
## 核心代码说明
|
||||
|
||||
### 1. WxAuthLogin.vue 组件
|
||||
|
||||
这是一个可复用的微信授权登录弹窗组件，提供以下接口：
|
||||
|
||||
**Props**
|
||||
- 无
|
||||
|
||||
**Events**
|
||||
- `success` - 登录成功时触发
|
||||
- `cancel` - 取消登录时触发
|
||||
|
||||
**Methods**
|
||||
- `open()` - 打开弹窗
|
||||
- `close()` - 关闭弹窗
|
||||
|
||||
**使用示例**
|
||||
```vue
|
||||
<template>
|
||||
<WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
|
||||
|
||||
const wxAuthLoginRef = ref(null);
|
||||
|
||||
const handleLoginSuccess = () => {
|
||||
console.log('登录成功');
|
||||
// 执行登录后的操作
|
||||
};
|
||||
|
||||
// 打开登录弹窗
|
||||
const showLogin = () => {
|
||||
wxAuthLoginRef.value?.open();
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2. 登录检查函数
|
||||
|
||||
在 `index-one.vue` 中添加了统一的登录检查函数：
|
||||
|
||||
```javascript
|
||||
// 登录检查函数
|
||||
const checkLogin = () => {
|
||||
const tokenValue = uni.getStorageSync('token') || '';
|
||||
if (!tokenValue || !hasLogin.value) {
|
||||
// 未登录，打开授权弹窗
|
||||
wxAuthLoginRef.value?.open();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
```
|
||||
|
||||
### 3. 点击事件处理
|
||||
|
||||
所有需要登录的功能都使用统一的检查逻辑：
|
||||
|
||||
```javascript
|
||||
// 处理附近工作点击
|
||||
const handleNearbyClick = () => {
|
||||
if (checkLogin()) {
|
||||
navTo('/pages/nearby/nearby');
|
||||
}
|
||||
};
|
||||
|
||||
// 处理服务功能点击
|
||||
const handleServiceClick = (serviceType) => {
|
||||
if (checkLogin()) {
|
||||
navToService(serviceType);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理职位详情点击
|
||||
function nextDetail(job) {
|
||||
if (checkLogin()) {
|
||||
// 记录岗位类型，用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 状态管理优化
|
||||
|
||||
在 `useUserStore.js` 中优化了 `logOut` 函数：
|
||||
|
||||
```javascript
|
||||
const logOut = (redirect = true) => {
|
||||
hasLogin.value = false;
|
||||
token.value = ''
|
||||
resume.value = {}
|
||||
userInfo.value = {}
|
||||
role.value = {}
|
||||
uni.removeStorageSync('userInfo')
|
||||
uni.removeStorageSync('token')
|
||||
|
||||
// 只有在明确需要跳转时才跳转到登录页
|
||||
if (redirect) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login',
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 后端接口要求
|
||||
|
||||
### 1. 微信登录接口
|
||||
|
||||
**接口地址**: `/app/appLogin`
|
||||
**请求方法**: `POST`
|
||||
**请求参数**:
|
||||
|
||||
#### 微信小程序
|
||||
```json
|
||||
{
|
||||
"code": "string", // 微信登录凭证
|
||||
"encryptedData": "string", // 加密数据
|
||||
"iv": "string" // 加密算法初始向量
|
||||
}
|
||||
```
|
||||
|
||||
#### H5/App
|
||||
```json
|
||||
{
|
||||
"code": "string" // 微信登录凭证
|
||||
}
|
||||
```
|
||||
|
||||
**返回数据**:
|
||||
```json
|
||||
{
|
||||
"token": "string", // 用户token
|
||||
"msg": "string", // 返回消息
|
||||
"code": 200 // 状态码
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 获取用户信息接口
|
||||
|
||||
**接口地址**: `/app/user/resume`
|
||||
**请求方法**: `GET`
|
||||
**请求头**: `Authorization: Bearer {token}`
|
||||
|
||||
**返回数据**:
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"data": {
|
||||
"name": "string",
|
||||
"phone": "string",
|
||||
"jobTitle": ["string"],
|
||||
"jobTitleId": "string",
|
||||
// ... 其他用户信息
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **小程序配置**
|
||||
- 需要在微信小程序后台配置服务器域名
|
||||
- 需要申请手机号授权权限
|
||||
|
||||
2. **H5配置**
|
||||
- 需要配置微信公众号的授权回调域名
|
||||
- 需要引入微信JSSDK
|
||||
|
||||
3. **安全性**
|
||||
- Token存储在本地缓存中，注意加密
|
||||
- 敏感操作前需要重新验证token有效性
|
||||
|
||||
4. **用户体验**
|
||||
- 登录弹窗不可通过点击遮罩关闭，确保用户必须做出选择
|
||||
- 提供测试登录按钮方便开发调试
|
||||
- 登录成功后自动刷新数据
|
||||
|
||||
5. **兼容性**
|
||||
- 使用条件编译确保在不同平台上正常运行
|
||||
- 小程序、H5、App使用不同的登录逻辑
|
||||
|
||||
## 测试建议
|
||||
|
||||
### 功能测试
|
||||
1. 未登录状态点击"附近工作"，应弹出登录弹窗
|
||||
2. 未登录状态点击九宫格任意服务，应弹出登录弹窗
|
||||
3. 未登录状态点击职位列表，应弹出登录弹窗
|
||||
4. 登录成功后，能够正常访问所有功能
|
||||
5. 关闭登录弹窗后，不会自动跳转到登录页
|
||||
|
||||
### 登录流程测试
|
||||
1. 微信小程序：测试手机号授权流程
|
||||
2. H5：测试微信网页授权流程
|
||||
3. 测试账号登录功能（开发环境）
|
||||
4. 测试登录失败的错误提示
|
||||
5. 测试用户取消授权的处理
|
||||
|
||||
### 状态管理测试
|
||||
1. 测试应用重启后登录状态的恢复
|
||||
2. 测试token失效后的处理
|
||||
3. 测试退出登录功能
|
||||
4. 测试多次登录的状态切换
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0 (2024-10-20)
|
||||
- 创建微信授权登录弹窗组件
|
||||
- 添加登录状态检查逻辑
|
||||
- 优化用户状态管理
|
||||
- 更新首页各功能的登录验证
|
||||
- 完善登录流程和错误处理
|
||||
|
||||
## 开发者
|
||||
- 开发时间: 2024-10-20
|
||||
- 涉及模块: 登录模块、首页模块、用户状态管理
|
||||
|
||||
Reference in New Issue
Block a user