说到验证码，下意识想到的就是图片验证码，但是随着技术不断进步，图片验证码似乎已经过时了，现在兴起一些行为交互式的验证码，但市面上能用的验证码，几乎都是按次收费的，我们这种搞技术的，当然不想在这花钱了，一不做二不休，干脆自己开发一个，于是我就用php+js实现了一个滑块式验证码！
开始之前，先看下实例演示吧
相信在淘宝，斗鱼这些大网站都见到过这样的验证码了，拖动验证码比传统在移动端有更好的化验，减少用户的输入。
实现的主要技术：
1、php抠图
2、js canvas画图
3、破解干扰
看上去是一个滑块验证码，长得跟极验差不多，令人望而却步，然而当我们打开控制台观察其网络请求的时候，则发现其实是假的…
这是刷新验证码图片的请求：
可以看到图片大致分为三个部分，最上面是带缺口的背景图，中间是滑块图片，最下面是不带缺口的背景图，这就意味着如果我们把最上面带缺口的背景图和最下面不带缺口的图片做一个比对，它们第一个不同的像素所在的列就是上面图片中缺口所在的列。
再看这个刷新验证码请求的参数，这是个get请求，只有一个t参数，这个t 参数看上去像是从0到1之间的一个随机数，在刷新验证码的时候一般都会带上一个随机数以让验证码图片的缓存失效，这个参数我们可以先忽略它，如果等下发现不行再回来搞它。
然后就是提交验证码请求，我们先故意搞几个验证失败的，看下网络请求是怎样的：
请求是个get请求，只有一个tn_r参数，参数的值是一个数字，看上去像是缺口所在的列的x坐标，而响应内容似乎表示验证不通过的时候就返回“error”：
如果是滑块验证成功的：
则请求的响应是这样的：
OK，接下来就是编码实现了：
源码下载
下载地址：点击下载
实例演示
演示地址：点击前往
参考文献：
1、基于Uni-app前端框架的SUMER UI3.0组件库
2、uniapp精仿支付宝UI界面源码下载，基于SumerUI一款仿支付宝APP
3、uniapp精仿微信源码，基于SumerUI一款仿微信APP应用
SUMER UI【用于开发APP、小程序、H5网站、毕业设计…】
评论