验证码：
验证码在每个涉及到前端页面登录，或者其他数据信息需要验证的时候，几乎都会用到；
验证码验证是很多时候必不可少的功能。例如在账号登陆、新建用户、修改密码等等。验证码又分有很多种，有短信验证码、图片验证码、动态验证码等等。各个验证码有着各自不同的功能，而目前在大多数的网页上或者手机APP的软件上，拼接式的图片验证码是最为常见的；
而为什么需要使用验证码呢，验证码的操作那么简单，又没有什么隐秘性可言；加上验证码这一步是不是多此一举呢？
本身验证码就不是一个防人的操作；它是用于为了防止计算机（机器人）去操作某功能的一道防线；也是起到不可或缺的重任的。
使用滑拼接图片的验证码有几个好处：
对企业而言：
安全性高，防止接口被刷，降低服务器压力
提升公平性，有效阻止开软件的羊毛党，达到活动效果
技术形象，使用优美的验证技术，也是公司技术实力的一种体现；
扩展性能好，能做一些深度优化，比如深度判断是否为人还是为机器操作
对用户而言：
用户体验效果好，操作简单方便
界面舒适美观，网页布局好
用户厌恶情绪较低，能最大化留住用户
拼接图片验证码又称滑块验证码；
滑动验证码的样子相信大家都见过；
它就一张图片中，缺失了一小块图，而我们需要的是将小块图滑动到缺口的地方，完成验证码；
首先滑块图是一张底图，图上一一个缺口，改缺口与周围的区别不是很大，在人眼能识别，
软件较难识别的范围内即可；
当底图和滑块图重合在一起的时候就会变成一张完美的图片，这样即让用户体验到了拼图的快乐，又完成了人机识别的校验，这是滑块验证码最大的魅力所在；
底图是从原图变成的，首需要写入一张底图（一张完好的初初始的图片），再将这个原图割开缺口；如何割开呢，这里涉及到了算法，矩阵，二维数组等事情；
我们后端可以提供生成滑块和底图的接口，校验滑块验证码的接口，以及检验用户是否通过验证的接口等；
当用户在前端发送请求生成验证码的时候，我们可以将生成的验证码或者图片地址(如果将验证码存储到了服务器的话)返回给前端；
前端拿到了这两张图之后，因为滑块和底图的高度相等，可以直接覆盖；
然后控制滑块图的x轴大小百分比拖动滑块图，将用户拖动滑块图后的滑块图实际位置的x轴百分比大小返回给后端比较；
如果x轴百分比大小在误差范围内，则通过；如果在误差范围外，则返回失败，重新再试；
这个误差值我们可以事先存好
滑动验证码的实现步骤：
·首先定义一个模板的大小即宽高；
·到如一张底图，然后分割出一个缺口；
·把分割出来的一个缺口移到图片的外面；
·然后设置一条滑动条，当鼠标按下滑动时，被分割的缺口也跟着移动；
·当被分割出来的缺口，与原图上的缺口重合时，图片缺失的部分会吻合；
·当被分割出来的缺口与原图上的缺口不重合时，被分割出来的缺口即返回原来的位置上；
·然后缺口的重合度是允许有误差的；
本文链接：https://my.lmcjl.com/post/2378.html
4 评论