* 滑块验证码思路分析**

滑块验证码

一. 简介

1.1 为什么要使用滑块验证码？

• 使用滑块验证码有几个好处：
  • 对企业而言：
    1. 安全性高，防止接口被刷，降低服务器压力
    2. 提升公平性，有效阻止开软件的羊毛党，达到活动效果
    3. 技术形象，使用优美的验证技术，也是公司技术实力的一种体现；
    4. 扩展性能好，能做一些深度优化，比如深度判断是否为人还是为机器操作
  • 对用户而言：
    1. 用户体验效果好，操作简单方便
    2. 界面舒适美观，网页布局好
    3. 用户厌恶情绪较低，能最大化留住用户

1.2 可以用在哪些地方？

- 用的地方很多，比如用户登录，比如活动抽奖，比如一些重要数据的提取，容易被机器刷接口的地方等等；

二. 效果图

2.1 总体效果图

• 概述：
  • 滑块验证码大家都有见到过，就是一张图上面有一个缺口，如图所示：
    

2.2 底图

• 概述： 滑块图是一张底图上有一个缺口，这个缺口与周围的区别不是特别大，在人眼能识别，软件较难识别的范围内即可；
  

2.3 滑块图

• 概述： 当底图和滑块图重合在一起的时候是不是就变成了一张完美的图片了呢？既让用户体验到了拼图的快乐，又完成了人机识别的校验，这是它最大的魅力所在！
  -

三. 如何实现滑块验证码？

3.1 底图

• 底图是从原图变成的，那么显而易见的，我们是需要写入一张底图(完好的初始图片)，再将这个原图割开缺口；
• 如何割开呢，这里涉及到了算法，矩阵，二维数组等事情，如果有兴趣的同学可以深入研究，如果急于做成一个完善的效果那么请听我下文：
• 首先可以去GitHub等地方找到相关的demo示例，修改代码即可；这里只介绍整体思路，后期有时间的时候会放出全部代码；如果有需要的同学请留言，我看到后会尽快发出来；

3.2 滑块图

• 在我的这个项目中，滑块图是使用一个随机的导入模板，然后通过这个模板将滑块图上的缺口图片覆盖到这个模板上，因为模板的高和宽都是固定的，唯一不同的是仅缺口的方向和底图图片；那么即实现了滑块图的效果；

3.3 如何生成和校验

• 我们后端可以提供生成滑块和底图的接口，校验滑块验证码的接口，以及检验用户是否通过验证的接口等；
• 为什么这样做呢？
  1. 当用户在前端发送请求生成验证码的时候，我们可以将生成的验证码或者图片地址(如果将验证码存储到了服务器的话)返回给前端；
  2. 前端拿到了这两张图之后，因为滑块和底图的高度相等，可以直接覆盖；
  3. 然后控制滑块图的x轴大小百分比拖动滑块图，将用户拖动滑块图后的滑块图实际位置的x轴百分比大小返回给后端比较；
  4. 如果x轴百分比大小在误差范围内，则通过；如果在误差范围外，则返回失败，重新再试；
  5. 这个误差值我们可以事先存好；

3.3 实际项目中如何拼接呢？

• 首先，我们将生成滑块和底图的方法可以提取出来作为一个工具类；

• 方法一：

  • 提供三个接口：

    • 生成滑块和底图接口：

      1. 在这个接口中，我们需要对用户的值传入合法性进行判断，并提示相关的信息；【合法性判断】
      2. 如果用户已经请求过验证码再请求，那么我们需要将用户请求验证码的记录给覆盖并返回给前端新的滑块验证码图片(滑块图和底图)，存储用户验证码的记录应该包含： 【重复发送请求滑块验证码的情况】
      3. 用户信息，校验码误差值； 并且将存好的信息设置好失效时间（可以使用Redis存储用户的验证码信息）
      4. 因为设置了失效时间，如果用户请求验证之后，如果在一段时间内没有进行校验，那么这个请求验证码的记录就会过期；如果请求校验码的接口没有查询到这条记录，则可以直接返回验证码过期； 【验证码过期的情况】
      5. 然后返回给前端两张图片，一张是滑块图一张是底图；因为传送二进制图片字节码会影响速度，也会对服务器造成很大的压力，我们可以使用图片服务器等方式将生成的图片存入图片服务器，然后返回图片地址；

    • 校验图片接口：

      1. 首先我们要对传入的一些必须的值的合法性进行判断，比如用户手机号，活动id等，如果存入Redis中的请求校验码记录需要这些数据，那么就是必不可少的；
      2. 其次我们需要先查询用户是否有请求验证码的记录，如果没有的话，则直接返回结果，让用户重新请求验证码接口；这样就可以做验证码超时的效果
      3. 再然后我们需要将请求验证码的记录提取出来，拿出用户请求验证码的x轴的正确百分比大小，再拿出这个用户请求验证码的误差值(可以加入系统配置项，也可以直接使用)，通过用户的x轴百分比大小与用户请求的验证码的x轴大小进行比较，如果在误差值范围内则返回SUCCESS,如果不在这个范围内则返回FAIL;
      4. 当用户校验成功的话，我们可以将用户成功登录的信息保存一段时间，这样就保证了用户不会老是收到滑块校验码了；

    • 校验用户身份接口：

      1. 当用户请求这个接口的时候，传入相关信息，我们对其合法值进行校验，如果不合法则直接返回结果，如果合法则进行查询是否有成功登陆的记录；
      2. 如果用户已经成功登陆，那么则直接返回成功，如果用户没有成功登陆则会直接发送用户图片验证码进行验证环节；
      3. 这一块没有细说，实现的方式可以有很多种，可以根据具体的业务来进行策略；

• 方法二：

  • 这个方法是我们公司使用的方式：
    • 提供一个启动类：
      1. 在这个启动类中我们先生成100张滑块图，100张底图，然后让他们成双成对的存入图片服务器，将生成的x轴百分比正确答案和0~99编号，以及图片地址等信息存入Redis中
    • 提供2个接口
      • 请求滑块图片和地址的接口：
        1. 前面的一些判断就不再细说了，直接将思路；
        2. 先直接随机生成一个编号，然后拿着这个编号在Redis中找到一个图片验证码信息，拿到图片地址返回给前端；然后再创建一张表，存入用户请求图片验证码的信息，图片编号等；
      • 校验用户身份的接口
        1. 当用户传入用户的校验码x轴百分比范围和用户信息的时候，我们可以先在Redis中查找是否存在相关信息，如果不存在则超时；如果存在则拿到编号，再以这个编号查找Redis中存入的图片验证码信息，拿到正确的x轴百分比大小与用户传入的x轴进行比较；
        2. 如果在误差范围内则返回成功，如果不在误差范围内则返回失败；

大致的思路就是这些，后期会将代码提取出来，如果大家需要的话；