uni-app实现滑动验证码 uni-app拼图验证功能实现逻辑-uni-app-PHP中文网

滑动验证码核心交互流程为图像加载、拼图生成、用户拖拽和验证判断四阶段，需前后端协同：后端生成随机缺口坐标并下发，前端渲染对齐、实时计算拖动偏移，松手时加密上报dragx等参数，后端校验容差及风控逻辑。

uni-app实现滑动验证码 uni-app拼图验证功能实现逻辑

滑动验证码的核心交互流程怎么组织

滑动验证码不是单纯拖拽一个图块，而是需要前端生成随机缺口、后端校验偏移量是否在容差范围内。uni-app 里不能直接用 DOM 操作模拟原生拖拽事件，得靠 touchstart/touchmove/touchend 手动绑定和计算位移。

关键点在于：滑块初始位置要和背景图对齐，用户拖动后实时计算横向偏移（clientX 差值），松手时比对缺口实际横坐标与用户拖动终点的误差。这个缺口坐标必须由后端生成并返回，前端只负责渲染和上报——否则校验可被绕过。

缺口图和背景图必须同尺寸、同缩放比例，否则像素级比对失效
uni-app 的 canvas 绘制需用 uni.createCanvasContext，且注意真机上 drawImage 对跨域图片有限制，建议缺口图用 base64 内联或同源接口返回
滑动过程中要限制最大拖动范围（比如不超过背景图宽度），避免用户拖出界后松手导致校验逻辑错乱

uni-app 中如何用 canvas 渲染拼图和背景图

不能依赖第三方 UI 库的 canvas 封装，得自己控制绘制顺序和裁剪区域。核心是先画完整背景图，再用 clip() 切出缺口区域，最后把缺口图贴到滑块位置。

示例片段（简化）：

const ctx = uni.createCanvasContext('verifyCanvas', this);
ctx.drawImage(bgImage, 0, 0, width, height); // 先画背景
ctx.beginPath();
ctx.rect(x, y, pieceWidth, pieceHeight); // x/y 是缺口左上角坐标（后端返回）
ctx.clip(); // 裁剪出缺口
ctx.drawImage(pieceImage, x, y, pieceWidth, pieceHeight); // 缺口图只显示在裁剪区内
ctx.draw();

注意：clip() 后所有绘制都受限于该路径，且不同平台对 clip 支持有差异，iOS 真机上若出现裁剪失效，可改用 globalCompositeOperation = 'destination-out' 配合透明矩形“擦除”背景来模拟缺口。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

canvas 宽高必须显式设置 CSS 和 canvas 属性，否则 H5 和小程序渲染不一致
安卓真机上 drawImage 加载网络图可能异步失败，应先用 uni.downloadFile 缓存到本地临时路径再传入
滑块图（即用户拖动的小图）必须和缺口图内容一致，但仅渲染一次，拖动时只更新其 left 值，不重绘 canvas

如何防止滑动验证被自动化脚本绕过

纯前端校验毫无意义。必须把关键参数：缺口横坐标 x、用户拖动终点 dragX、时间戳、设备指纹（如 uni.getSystemInfoSync().platform + uni.getSystemInfoSync().model）、以及一个一次性 token（由后端下发，每次验证前需先调用 /captcha/init 接口获取）全部加密签名后提交。

后端收到后，校验 token 是否未使用、时间戳是否在 2 分钟内、签名是否匹配，并最终判断 abs(dragX - x) （单位 px，容差建议 5–15，太小易误判，太大易被暴力试探）。

不要在前端硬编码容差值或缺口坐标，这些必须动态下发
滑动结束后的请求必须带 header: { 'X-Nonce': Math.random().toString(36).substr(2, 8) } 类似防重放字段
连续 3 次失败应触发后端风控，返回新 captcha 并延长等待时间

小程序和 H5 在 touch 事件处理上的关键差异

微信小程序中 touchmove 默认会触发页面滚动，必须加 catchtouchmove 阻止；而 H5 需要在 touchmove 回调里调用 e.preventDefault() 才能禁用默认行为。两者 event 对象结构也不同：小程序用 e.touches[0].clientX，H5 用 e.touches[0].pageX（注意是 pageX，不是 clientX，因 canvas 可能有缩放或滚动偏移）。