update at 2025-10-24 22:20:23

slider.md

@@ -0,0 +1,244 @@
+# 滑块验证自动化说明
+
+## 功能概述
+
+本项目实现了滑块验证码的自动识别和破解功能，参考了 [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/) - 浏览器自动化