153 lines
4.2 KiB
Markdown
153 lines
4.2 KiB
Markdown
# 微信验证页面浏览器访问解决方案
|
||
|
||
## 问题描述
|
||
|
||
微信的安全验证页面（如 `https://weixin110.qq.com/security/acct/newreadtemplate?t=extdevsignin/slaveverify&ticket=xxx`）通常只能在微信内置浏览器中打开，在普通浏览器中会报错。
|
||
|
||
## 解决方案
|
||
|
||
本方案通过以下技术手段解决了浏览器访问限制：
|
||
|
||
### 1. User-Agent模拟
|
||
- 使用微信浏览器的User-Agent头部
|
||
- 模拟iPhone微信浏览器环境
|
||
- 绕过微信服务器的浏览器检测
|
||
|
||
### 2. 代理接口
|
||
创建了代理接口 `/api/v1/login/ProxyWechatVerify`，该接口：
|
||
- 接收ticket参数
|
||
- 设置正确的微信浏览器User-Agent
|
||
- 代理请求微信验证页面
|
||
- 返回可在浏览器中正常显示的页面
|
||
|
||
### 3. 验证页面封装
|
||
提供了 `/api/v1/login/GetWechatVerifyPage` 接口，返回包含多种验证方式的HTML页面：
|
||
- **方法一**：直接在iframe中显示验证页面（推荐）
|
||
- **方法二**：新窗口打开验证页面
|
||
- **方法三**：复制链接手动打开
|
||
|
||
## 在Swagger中的集成
|
||
|
||
### 自动检测功能
|
||
- 当调用获取二维码接口后，系统自动开始监控登录状态
|
||
- 检测到需要验证时，自动显示浮动验证按钮
|
||
- 点击按钮即可打开验证弹窗
|
||
|
||
### 使用流程
|
||
1. 在Swagger中调用获取二维码接口
|
||
2. 用户扫描二维码
|
||
3. 如果需要安全验证，右下角会出现"🔐 安全验证"按钮
|
||
4. 点击按钮打开验证弹窗
|
||
5. 在弹窗中完成滑块验证
|
||
6. 验证成功后自动关闭弹窗，继续登录流程
|
||
|
||
## API接口说明
|
||
|
||
### 1. 代理微信验证页面
|
||
```
|
||
GET /api/v1/login/ProxyWechatVerify?ticket={ticket}
|
||
```
|
||
|
||
**参数：**
|
||
- `ticket`: 微信验证票据（从检测扫码状态接口获取）
|
||
|
||
**返回：**
|
||
- 微信验证页面的HTML内容（已处理CORS和路径问题）
|
||
|
||
### 2. 获取微信验证页面
|
||
```
|
||
GET /api/v1/login/GetWechatVerifyPage?ticket={ticket}
|
||
```
|
||
|
||
**参数：**
|
||
- `ticket`: 微信验证票据
|
||
|
||
**返回：**
|
||
- 包含多种验证方式的自定义HTML页面
|
||
|
||
### 3. 检测扫码状态（已增强）
|
||
```
|
||
GET /api/v1/login/CheckLoginStatus?key={key}
|
||
```
|
||
|
||
**返回数据包含：**
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"state": 0, // 0: 等待扫码, 1: 已扫码, 2: 登录成功
|
||
"loginState": "waiting",
|
||
"data62": "...",
|
||
"ticket": "3_890d910a803559e0a6681089cbf70205" // 验证票据
|
||
},
|
||
"text": "等待扫码"
|
||
}
|
||
```
|
||
|
||
## 技术特点
|
||
|
||
### 1. 微信浏览器模拟
|
||
```javascript
|
||
req.Header.Set("User-Agent", "Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.42(0x18002a2f) NetType/WIFI Language/zh_CN")
|
||
```
|
||
|
||
### 2. 自动路径修复
|
||
- 将相对路径转换为绝对路径
|
||
- 处理CORS跨域问题
|
||
- 确保资源正确加载
|
||
|
||
### 3. 实时状态监控
|
||
- 自动轮询检测登录状态
|
||
- 智能识别验证需求
|
||
- 用户友好的交互体验
|
||
|
||
## 使用建议
|
||
|
||
1. **推荐方法一**：直接在iframe中验证，体验最佳
|
||
2. **备用方案**：如果iframe加载失败，使用新窗口方式
|
||
3. **手动方式**：复制链接到新标签页打开（最后选择）
|
||
|
||
## 安全说明
|
||
|
||
- 所有验证过程在用户浏览器中完成
|
||
- 不存储任何用户凭据信息
|
||
- 仅作为微信验证页面的技术代理
|
||
- 验证票据具有时效性，过期需重新获取
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
1. **验证页面无法加载**
|
||
- 检查ticket是否有效
|
||
- 尝试使用不同的验证方法
|
||
- 确保网络连接正常
|
||
|
||
2. **验证后无响应**
|
||
- 检查是否完成了验证操作
|
||
- 等待几秒钟让系统检测状态变化
|
||
- 可手动调用状态检查接口
|
||
|
||
3. **弹窗被浏览器拦截**
|
||
- 允许浏览器弹窗
|
||
- 使用iframe方式验证
|
||
|
||
### 日志调试
|
||
```javascript
|
||
// 在浏览器控制台中查看
|
||
console.log(window.WechatVerifyIntegration);
|
||
|
||
// 手动触发状态检查
|
||
window.WechatVerifyIntegration.checkLoginStatusOnce();
|
||
```
|
||
|
||
## 更新记录
|
||
|
||
- **v1.0** - 初始版本，支持基本的微信验证页面代理
|
||
- **v1.1** - 添加Swagger集成，自动检测和弹窗功能
|
||
- **v1.2** - 优化用户体验，增加多种验证方式
|
||
|
||
---
|
||
|
||
> 本解决方案仅供学习交流使用，请遵守相关法律法规和平台规则。
|
||
|