滑块验证(滑动验证)

文章目录

• • • 基本原理
    • 工作流程
    • 前后端职责
    • 数据流转

属于基本知识点了，这里也记录一下。

基本原理

前后端都需要，简单说就是后端生成图片及缺口，前段拖动后将坐标信息传给后端，验证坐标是否正确。

当然，生产中不仅仅是坐标这一个维度，还有速度，鼠标抖动等防机器人等措施。

工作流程

用户视角：

1. 页面加载 → 看到背景图（带缺口）和滑块
2. 拖动滑块 → 滑块跟随鼠标移动
3. 释放滑块 → 前端发送拖动距离给后端
4. 等待结果 → 后端验证并返回成功/失败

系统视角：

1. 后端生成 → 创建背景图+缺口+滑块图
2. 前端展示 → 显示图片，监听拖动
3. 数据验证 → 比对用户拖动距离与真实缺口位置
4. 返回结果 → 告诉前端验证是否通过

前后端职责

后端职责：

✅ 生成验证码图片

✅ 保存正确答案（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}