gavin/douban-login
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

update at 2025-10-24 22:25:24

Browse Source
This commit is contained in:
douboer
2025-10-24 22:25:24 +08:00
parent 09b7d98396
commit 9bfeee5a6d
3 changed files with 141 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
IMPLEMENTATION.md
View File

@@ -1,237 +1,80 @@
# 滑块验证自动化实现总结
# 登录脚本实现笔记
## 实现概述
参考 https://github.com/omigo/crack-slide-captcha 项目，成功实现了滑轨自动验证功能。
本文记录当前版本豆瓣登录脚本的实现细节、关键函数以及后续可扩展点。滑块验证码相关逻辑已移除，若页面出现额外验证需人工完成。
## 文件结构
```
src/
├── login.ts # 主登录流程，集成滑块验证
├── slider.ts # 滑块验证核心实现
└── examples.ts # 使用示例代码
└── login.ts # Playwright 入口脚本
```
## 核心功能
辅助文档位于项目根目录：
### 1. slider.ts - 滑块验证核心模块
- `README.md`：使用说明与常见问题；
- `ARCHITECTURE.md`：整体架构与流程拆解；
- `login.md`：早期需求说明，可作为手动操作参考。
**主要函数：**
## 核心流程
- `autoSlide(page, config)` - 自动完成滑块验证
- `hasSlider(page, config)` - 检测是否存在滑块
- `waitAndHandleSlider(page, config)` - 等待并自动处理滑块
- `generateTrack(distance)` - 生成模拟人类的滑动轨迹
- `calculateDistance(bgBuffer, pieceBuffer)` - 通过图像处理计算滑动距离
1. **读取配置**
通过 `process.env.DOUBAN_PHONE` 获取手机号，缺失时直接退出。
**核心特性：**
2. **准备浏览器上下文** (`prepareContext`)
- 若存在 `~/douban-cookie.json`，以 `storageState` 形式加载；
- 打开登录页并调用 `isLoggedIn` 校验是否仍在登录态；
- 失效时关闭旧上下文并创建全新 session。
1. **图像处理识别**
- 使用 sharp 库处理图像
- 灰度化和边缘检测
- 计算缺口位置
3. **执行短信登录** (`loginWithSms`)
- 输入手机号 → 点击「获取验证码」；
- 控制台提醒用户在浏览器中手动完成滑块等页面验证；
- 通过 `prompt` 等待用户输入短信验证码并提交；
- 等待 Playwright 检测到页面离开登录地址或抛出超时。
2. **真实轨迹模拟**
- 三段式速度曲线：加速 → 匀速 → 减速
- 垂直方向随机抖动
- 随机总时长（1-2秒）
- 随机反应时间
4. **确认状态并写入 Cookie 文件**
- `isLoggedIn` 再次判断是否登录成功；
- 调用 `context.storageState({ path })` 将状态写入 `~/douban-cookie.json`；
- 终端提示成功信息，方便用户确认文件路径。
3. **多次重试机制**
- 默认偏移序列：[0, -2, 2, -5, 5, -10, 10]
- 自动尝试不同偏移值
- 直到成功或尝试完毕
## 关键函数
### 2. login.ts - 登录流程集成
### `isLoggedIn(page: Page): Promise<boolean>`
**修改内容：**
检查 `dbcl2` Cookie 是否存在，并确认登录表单元素是否仍可见。该组合可较准确判断是否处于登录态，同时避免依赖豆瓣首页 DOM。
1. 导入滑块验证模块
2. 添加 `AUTO_SLIDER` 环境变量支持
3. 在 `loginWithSms` 函数中集成滑块处理：
- 点击"获取验证码"后检测滑块
- 根据配置自动或手动完成验证
- 支持环境变量自定义参数
### `prepareContext(browser: Browser)`
### 3. examples.ts - 使用示例
负责上下文复用策略：优先尝试加载本地 Cookie 创建上下文，如果判定仍未登录则回退到全新会话并跳转登录页。函数返回 `{ context, page, usedCookies }`，调用方可据此判断是否需要重走登录流程。
提供了 6 个详细示例：
1. 基础使用 - 自动检测并处理
2. 手动检测和处理
3. 自定义配置
4. 登录流程集成
5. 批量处理多个滑块
6. 使用环境变量配置
### `loginWithSms(page: Page, phone: string)`
## 使用方法
串联短信验证码登录的主要逻辑，所有用户交互点都通过控制台提示：
### 在登录时启用自动滑块
- 页面操作由脚本自动完成（填手机号、点击按钮）；
- 人机验证与短信输入由用户处理；
- 函数内部对提交过程设置合理的等待时间，避免过早关闭浏览器。
```bash
# 基础使用
DOUBAN_AUTO_SLIDER=1 DOUBAN_PHONE=13800138000 npm run login
### `main()`
# 带自定义参数
DOUBAN_AUTO_SLIDER=1 \
DOUBAN_SLIDER_DISTANCE=250 \
DOUBAN_SLIDER_OFFSETS=0,-5,5,-10,10 \
DOUBAN_PHONE=13800138000 \
npm run login
```
作为 CLI 入口，负责整体 orchestrate：校验配置 → 启动浏览器 → 调用上述函数 → 捕获异常并设置 `process.exitCode`。
### 独立测试滑块功能
## 错误处理与提示
```bash
npm run slider
```
- 打印清晰的步骤提示，例如“请等待短信验证码…”、“正在提交验证码…”；
- 捕获 Playwright 的超时异常，允许在页面未完全跳转时通过 `isLoggedIn` 再次确认；
- 如登录失败会输出明确日志并保持退出码非零，方便在 CI 或脚本中检测。
### 在代码中调用
## 手动操作注意事项
```typescript
import { autoSlide, hasSlider } from './slider';
- Playwright 会以非无头模式启动 Chromium，务必保持窗口前台以便人工处理滑块或图形验证码；
- 如短信验证码输入错误，可重新运行脚本并继续人工操作；
- 保存的 `douban-cookie.json` 与账号强绑定，若切换账号需手动删除或覆盖该文件。
// 检测并自动处理
if (await hasSlider(page)) {
const success = await autoSlide(page, {
distance: 250,
offsets: [0, -5, 5, -10, 10],
});
}
```
## 后续拓展建议
## 配置选项
1. **多账号支持**：通过配置文件或命令行参数管理多组手机号与存储路径；
2. **验证码服务集成**：接入外部短信/验证码平台以减少人工步骤；
3. **任务编排**：在登录后追加业务逻辑（例如抓取列表、导出数据），可在 `main` 函数成功分支追加调用；
4. **CLI 体验**：封装命令行参数解析，避免频繁依赖环境变量。
支持以下环境变量：
| 变量名 | 说明 | 默认值 |
|--------|------|--------|
| `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/)
以上内容覆盖当前脚本主要实现。若后续重新引入滑块自动化，可在此文档扩展新的模块说明。