douban-login/slider.md

# 滑块验证自动化说明

## 功能概述

本项目实现了滑块验证码的自动识别和破解功能，参考了 [crack-slide-captcha](https://github.com/omigo/crack-slide-captcha) 项目的思路。

## 核心原理

### 1. 计算滑动距离

- 使用 `sharp` 库进行图像处理
- 将背景图转换为灰度图
- 通过边缘检测找到缺口位置
- 计算滑块需要移动的距离

### 2. 模拟人类滑动行为

为了避免被识别为机器人，实现了以下特性：

#### 真实的速度曲线
- **加速阶段** (30%距离, 25%时间)：开始较慢，逐渐加快
- **匀速阶段** (50%距离, 50%时间)：保持中等速度
- **减速阶段** (20%距离, 25%时间)：接近目标时减速

#### 轨迹随机化
- 垂直方向有微小抖动（±1-3px）
- 非完全直线移动
- 总耗时随机在 1-2 秒之间

#### 随机反应时间
- 鼠标移动到滑块前有 100-300ms 的反应延迟
- 按下和松开鼠标时有 50-100ms 的随机延迟

### 3. 多次尝试机制

由于图像识别不能保证 100% 准确，实现了偏移重试机制：
- 默认尝试偏移: `[0, -2, 2, -5, 5, -10, 10]`
- 每次失败后使用不同偏移值重试
- 直到验证成功或尝试完所有偏移

## 使用方法

### 在登录流程中使用

启用自动滑块验证：

```bash
DOUBAN_AUTO_SLIDER=1 DOUBAN_PHONE=13800138000 npm run login
```

### 高级配置

通过环境变量自定义行为：

```bash
# 启用自动滑块
DOUBAN_AUTO_SLIDER=1 \
# 手动指定滑动距离（像素）
DOUBAN_SLIDER_DISTANCE=250 \
# 自定义偏移尝试序列
DOUBAN_SLIDER_OFFSETS=0,-3,3,-8,8 \
# 超时时间（毫秒）
DOUBAN_SLIDER_TIMEOUT=30000 \
npm run login
```

### 独立测试滑块功能

```bash
npm run slider
```

这会启动一个测试模式，给你 30 秒时间手动导航到包含滑块的页面，然后自动尝试完成滑块验证。

### 在代码中调用

```typescript
import { autoSlide, waitAndHandleSlider, hasSlider } from './slider';

// 检查是否存在滑块
if (await hasSlider(page)) {
  console.log('发现滑块验证码');
}

// 自动完成滑块验证
const success = await autoSlide(page, {
  distance: 250,  // 可选：手动指定距离
  offsets: [0, -5, 5],  // 可选：自定义偏移序列
  timeout: 20000,  // 可选：超时时间
});

// 或者等待并处理滑块（如果出现）
await waitAndHandleSlider(page);
```

## 配置选项

### SliderConfig 接口

```typescript
interface SliderConfig {
  // 滑块按钮选择器
  handleSelector?: string;
  
  // 滑块轨道选择器
  trackSelector?: string;
  
  // 背景图选择器
  bgSelector?: string;
  
  // 缺口小图选择器
  pieceSelector?: string;
  
  // 等待超时（毫秒）
  timeout?: number;
  
  // 手动指定距离（像素）
  distance?: number;
  
  // 偏移尝试序列
  offsets?: number[];
}
```

### 默认选择器

```typescript
{
  handleSelector: '.tc-drag-thumb, .slide-verify-slider-mask-item, .slider-button',
  trackSelector: '.tc-drag-track, .slide-verify-slider, .slider-track',
  bgSelector: '.tc-bg-img, .slide-verify-block-bg, .captcha-bg',
  pieceSelector: '.tc-jig-img, .slide-verify-block, .captcha-piece',
  timeout: 20000,
  offsets: [0, -2, 2, -5, 5, -10, 10]
}
```

## 针对不同验证码调整

### 腾讯防水墙

```typescript
await autoSlide(page, {
  handleSelector: '.tc-drag-thumb',
  trackSelector: '.tc-drag-track',
  bgSelector: '.tc-bg-img',
  pieceSelector: '.tc-jig-img',
});
```

### 极验验证

```typescript
await autoSlide(page, {
  handleSelector: '.geetest_slider_button',
  trackSelector: '.geetest_slider',
  bgSelector: '.geetest_canvas_bg',
  pieceSelector: '.geetest_canvas_slice',
});
```

### 网易易盾

```typescript
await autoSlide(page, {
  handleSelector: '.yidun_slider',
  trackSelector: '.yidun_slider_track',
  bgSelector: '.yidun_bg-img',
  pieceSelector: '.yidun_jigsaw',
});
```

## 提高成功率的技巧

### 1. 调整偏移序列

根据实际测试结果调整偏移值：

```bash
# 如果发现总是差 5-10 像素，可以重点尝试这个范围
DOUBAN_SLIDER_OFFSETS=0,5,10,15,-5,-10 npm run login
```

### 2. 手动指定距离

如果能通过人工观察确定距离：

```bash
DOUBAN_SLIDER_DISTANCE=280 npm run login
```

### 3. 自定义选择器

查看页面 HTML 结构，使用更精确的选择器：

```bash
DOUBAN_SLIDER_HANDLE_SELECTOR='.custom-slider-btn' npm run login
```

### 4. 增加超时时间

网络较慢时：

```bash
DOUBAN_SLIDER_TIMEOUT=60000 npm run login
```

## 注意事项

1. **识别准确率**：图像识别方法的准确率约 70-80%，需要配合偏移重试
2. **反爬策略**：频繁使用可能触发更严格的验证，建议：
   - 控制使用频率
   - 随机化行为参数
   - 使用代理 IP
3. **维护成本**：验证码提供商可能更新策略，需要相应调整选择器和算法
4. **合规使用**：仅用于学习研究，实际使用请遵守目标网站的服务条款

## 故障排查

### 问题：找不到滑块元素

**解决方案**：
1. 打开浏览器开发者工具，检查实际的 HTML 结构
2. 使用 `DOUBAN_SLIDER_HANDLE_SELECTOR` 等环境变量指定正确的选择器

### 问题：滑动后验证失败

**可能原因**：
1. 距离计算不准确 → 调整 `DOUBAN_SLIDER_OFFSETS`
2. 滑动速度过快 → 修改 `generateTrack` 函数增加总时长
3. 轨迹不够真实 → 增加抖动幅度

### 问题：图像处理失败

**可能原因**：
1. 图片格式不支持 → 检查 `getImageBuffer` 函数
2. 选择器不正确 → 调整 `bgSelector` 和 `pieceSelector`
3. 使用默认距离 → 手动指定 `DOUBAN_SLIDER_DISTANCE`

## 参考资料

- [crack-slide-captcha](https://github.com/omigo/crack-slide-captcha) - 原始参考项目
- [Sharp 文档](https://sharp.pixelplumbing.com/) - 图像处理库
- [Playwright 文档](https://playwright.dev/) - 浏览器自动化