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