238 lines
5.8 KiB
Markdown
238 lines
5.8 KiB
Markdown
# 滑块验证自动化实现总结
|
||
|
||
## 实现概述
|
||
|
||
参考 https://github.com/omigo/crack-slide-captcha 项目，成功实现了滑轨自动验证功能。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
src/
|
||
├── login.ts # 主登录流程，集成滑块验证
|
||
├── slider.ts # 滑块验证核心实现
|
||
└── examples.ts # 使用示例代码
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 1. slider.ts - 滑块验证核心模块
|
||
|
||
**主要函数：**
|
||
|
||
- `autoSlide(page, config)` - 自动完成滑块验证
|
||
- `hasSlider(page, config)` - 检测是否存在滑块
|
||
- `waitAndHandleSlider(page, config)` - 等待并自动处理滑块
|
||
- `generateTrack(distance)` - 生成模拟人类的滑动轨迹
|
||
- `calculateDistance(bgBuffer, pieceBuffer)` - 通过图像处理计算滑动距离
|
||
|
||
**核心特性：**
|
||
|
||
1. **图像处理识别**
|
||
- 使用 sharp 库处理图像
|
||
- 灰度化和边缘检测
|
||
- 计算缺口位置
|
||
|
||
2. **真实轨迹模拟**
|
||
- 三段式速度曲线：加速 → 匀速 → 减速
|
||
- 垂直方向随机抖动
|
||
- 随机总时长（1-2秒）
|
||
- 随机反应时间
|
||
|
||
3. **多次重试机制**
|
||
- 默认偏移序列：[0, -2, 2, -5, 5, -10, 10]
|
||
- 自动尝试不同偏移值
|
||
- 直到成功或尝试完毕
|
||
|
||
### 2. login.ts - 登录流程集成
|
||
|
||
**修改内容：**
|
||
|
||
1. 导入滑块验证模块
|
||
2. 添加 `AUTO_SLIDER` 环境变量支持
|
||
3. 在 `loginWithSms` 函数中集成滑块处理：
|
||
- 点击"获取验证码"后检测滑块
|
||
- 根据配置自动或手动完成验证
|
||
- 支持环境变量自定义参数
|
||
|
||
### 3. examples.ts - 使用示例
|
||
|
||
提供了 6 个详细示例：
|
||
1. 基础使用 - 自动检测并处理
|
||
2. 手动检测和处理
|
||
3. 自定义配置
|
||
4. 登录流程集成
|
||
5. 批量处理多个滑块
|
||
6. 使用环境变量配置
|
||
|
||
## 使用方法
|
||
|
||
### 在登录时启用自动滑块
|
||
|
||
```bash
|
||
# 基础使用
|
||
DOUBAN_AUTO_SLIDER=1 DOUBAN_PHONE=13800138000 npm run login
|
||
|
||
# 带自定义参数
|
||
DOUBAN_AUTO_SLIDER=1 \
|
||
DOUBAN_SLIDER_DISTANCE=250 \
|
||
DOUBAN_SLIDER_OFFSETS=0,-5,5,-10,10 \
|
||
DOUBAN_PHONE=13800138000 \
|
||
npm run login
|
||
```
|
||
|
||
### 独立测试滑块功能
|
||
|
||
```bash
|
||
npm run slider
|
||
```
|
||
|
||
### 在代码中调用
|
||
|
||
```typescript
|
||
import { autoSlide, hasSlider } from './slider';
|
||
|
||
// 检测并自动处理
|
||
if (await hasSlider(page)) {
|
||
const success = await autoSlide(page, {
|
||
distance: 250,
|
||
offsets: [0, -5, 5, -10, 10],
|
||
});
|
||
}
|
||
```
|
||
|
||
## 配置选项
|
||
|
||
支持以下环境变量：
|
||
|
||
| 变量名 | 说明 | 默认值 |
|
||
|--------|------|--------|
|
||
| `DOUBAN_AUTO_SLIDER` | 启用自动滑块 | `0` |
|
||
| `DOUBAN_SLIDER_DISTANCE` | 手动指定距离（像素） | 自动计算 |
|
||
| `DOUBAN_SLIDER_OFFSETS` | 偏移尝试序列（逗号分隔） | `0,-2,2,-5,5,-10,10` |
|
||
| `DOUBAN_SLIDER_HANDLE_SELECTOR` | 滑块按钮选择器 | 多个候选 |
|
||
| `DOUBAN_SLIDER_TRACK_SELECTOR` | 滑块轨道选择器 | 多个候选 |
|
||
| `DOUBAN_SLIDER_BG_SELECTOR` | 背景图选择器 | 多个候选 |
|
||
| `DOUBAN_SLIDER_PIECE_SELECTOR` | 缺口图选择器 | 多个候选 |
|
||
| `DOUBAN_SLIDER_TIMEOUT` | 超时时间（毫秒） | `20000` |
|
||
|
||
## 技术亮点
|
||
|
||
### 1. 图像识别算法
|
||
|
||
```typescript
|
||
// 边缘检测卷积核
|
||
kernel: [-1, -1, -1, -1, 8, -1, -1, -1, -1]
|
||
|
||
// 窗口平滑减少噪声
|
||
const windowScore = columnScores.slice(i - 5, i + 5).reduce((a, b) => a + b, 0);
|
||
```
|
||
|
||
### 2. 轨迹生成算法
|
||
|
||
```typescript
|
||
// 加速阶段 - 二次函数
|
||
const x = accelDist * ratio * ratio;
|
||
|
||
// 减速阶段 - 平方根函数
|
||
const x = decelDist * Math.sqrt(ratio);
|
||
|
||
// 垂直抖动
|
||
const y = (Math.random() - 0.5) * range;
|
||
```
|
||
|
||
### 3. 多次重试逻辑
|
||
|
||
```typescript
|
||
for (const offset of offsets) {
|
||
const adjustedDistance = distance + offset;
|
||
const track = generateTrack(adjustedDistance);
|
||
await executeSlide(page, handle, track);
|
||
|
||
if (await checkSuccess(page)) {
|
||
return true;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 参考实现对比
|
||
|
||
| 特性 | 原项目 (Go+OpenCV) | 本实现 (TypeScript+Sharp) |
|
||
|------|-------------------|-------------------------|
|
||
| 语言环境 | Go | TypeScript/Node.js |
|
||
| 图像处理 | OpenCV | Sharp |
|
||
| 执行方式 | Go服务 + JS客户端 | 纯 Playwright |
|
||
| 模板匹配 | 多种算法 | 边缘检测 + 列分析 |
|
||
| 轨迹模拟 | 简单匀速 | 三段式变速 + 抖动 |
|
||
| 集成方式 | 独立服务 | 代码库集成 |
|
||
|
||
## 优化建议
|
||
|
||
### 提高识别准确率
|
||
|
||
1. **使用更强大的图像处理算法**
|
||
- 集成 OpenCV.js
|
||
- 实现模板匹配
|
||
- 使用机器学习模型
|
||
|
||
2. **缓存已识别的验证码**
|
||
- 计算图片哈希
|
||
- 缓存距离结果
|
||
- 避免重复计算
|
||
|
||
3. **动态调整偏移策略**
|
||
- 记录成功的偏移值
|
||
- 学习最优偏移分布
|
||
- 自适应调整
|
||
|
||
### 提高真实性
|
||
|
||
1. **更复杂的轨迹算法**
|
||
- 贝塞尔曲线
|
||
- 真实数据训练
|
||
- 个性化轨迹
|
||
|
||
2. **设备指纹模拟**
|
||
- Canvas 指纹
|
||
- WebGL 指纹
|
||
- 音频指纹
|
||
|
||
3. **行为特征模拟**
|
||
- 鼠标移动历史
|
||
- 按键节奏
|
||
- 页面交互模式
|
||
|
||
## 注意事项
|
||
|
||
1. ⚠️ **准确率限制**：简化的图像识别方法准确率约 70-80%
|
||
2. ⚠️ **反爬限制**：频繁使用可能触发更严格验证
|
||
3. ⚠️ **合规使用**：仅用于学习研究，遵守网站服务条款
|
||
4. ⚠️ **维护成本**：需要根据验证码更新调整选择器
|
||
|
||
## 测试情况
|
||
|
||
✅ TypeScript 编译通过
|
||
✅ 代码结构清晰
|
||
✅ 类型定义完整
|
||
✅ 文档详细完善
|
||
|
||
## 后续改进
|
||
|
||
- [ ] 实际测试豆瓣滑块验证
|
||
- [ ] 根据测试结果优化参数
|
||
- [ ] 添加更多验证码类型支持
|
||
- [ ] 集成更强大的图像识别库
|
||
- [ ] 添加单元测试
|
||
- [ ] 性能优化
|
||
|
||
## 相关文档
|
||
|
||
- [SLIDER.md](../SLIDER.md) - 详细使用文档
|
||
- [README.md](../README.md) - 项目总览
|
||
- [examples.ts](./examples.ts) - 使用示例
|
||
|
||
## 参考资源
|
||
|
||
- [crack-slide-captcha](https://github.com/omigo/crack-slide-captcha) - 原始参考项目
|
||
- [Sharp 文档](https://sharp.pixelplumbing.com/)
|
||
- [Playwright 文档](https://playwright.dev/)
|