文章目录
属于基本知识点了，这里也记录一下。
基本原理
前后端都需要，简单说就是后端生成图片及缺口，前段拖动后将坐标信息传给后端，验证坐标是否正确。
当然，生产中不仅仅是坐标这一个维度，还有速度，鼠标抖动等防机器人等措施。
工作流程
用户视角：
- 页面加载 → 看到背景图（带缺口）和滑块
- 拖动滑块 → 滑块跟随鼠标移动
- 释放滑块 → 前端发送拖动距离给后端
- 等待结果 → 后端验证并返回成功/失败
系统视角：
- 后端生成 → 创建背景图+缺口+滑块图
- 前端展示 → 显示图片，监听拖动
- 数据验证 → 比对用户拖动距离与真实缺口位置
- 返回结果 → 告诉前端验证是否通过
前后端职责
后端职责：
✅ 生成验证码图片
✅ 保存正确答案（correct_x）
✅ 验证用户提交的答案
✅ 不暴露正确答案给前端
前端职责：
✅ 展示验证码图片
✅ 监听用户交互（鼠标/触摸）
✅ 计算拖动距离
✅ 发送验证请求
数据流转
前端请求 → GET /api/captcha/init
↓
后端生成 → {background, slider, captcha_id, y_position}
↓
前端展示 → 显示图片，用户拖动
↓
前端提交 → POST /api/captcha/verify {captcha_id, distance}
↓
后端验证 → 比对 distance 与 correct_x
↓
返回结果 → {success: true/false}