极验滑动拼图验证码实现

[lesonwu]

滑动拼图验证码实现

1 背景现状

1.1 公司现状

 目前，公司网站的验证码采用的字符型验证码，如图1.1。

       

 虽然是出于安全的考虑，但是越来越多的用户开始诟病种验证方式（图1.2），每天都要花部分时间 浪费在无趣的识别数字上，大大降低了网站的交互体验。同时，随着计算机自动识别技术的发展，简单的验证码数字图形也不再安全，很容易被黑客攻破。

 所以，出于对于安全性、用户体验的考量，需要寻找一种体验性更好，安全性能更高的验证方式。

2 同行业竞品验证方式

2.1 团贷网

 团贷网在登记页面，输入用户名，密码后，点击登录，弹窗出现滑动拼图验证码，通过对于页面源码查看分析，如下图:

 团贷网接入的是第三方极验开发的验证码，在登录按钮触发的时候，调用第三方初始化函数提供的方法进行验证。

3 极验验证码

3.1 介绍

 极验「行为验证」是一项可以帮助网站与APP识别与拦截机器程序批量自动化操作的SaaS应用。它是由极验开发的新一代人机验证产品，它不基于传统“问题-答案”的检测模式，而是通过利用深度学习对验证过程中产生的行为数据进行高维分析，发现人机行为模式与行为特征的差异，更加精准地区分人机行为。

3.2 使用场景

 网站和APP，在所有可能被机器行为攻击的场景，例如但不限于注册、登录、短信接口、查询接口、营销活动、发帖评论等等，都可以部署使用「行为验证」，来抵御机器批量操作。

3.3 数据通讯流程图

第一步：获取验证参数

 由网站的服务端提供API1接口给客户端，完成验证模块的初始化,API1在验证开始时获取流水号并加密，防止第三绕过客户的服务端获取流水号。

第二步：验证预判定

 由客户端SDK完成，实现初步行为检测，检测通过则完成验证，没有通过则需要进行核心验证。

第三步：核心验证

 根据智能AI返回验证策略并进行交互，获取进一步行为数据后进行验证。

第四步：二次验证

 验证完成后，由网站服务端通过API2向极验云服务发起二次验证，保证验证结果不是伪造的，并且保证本次验证使用的流水号，只能被二次验证一次。

另外，「行为验证」还提供failback模式，可以在不可抗力的极端情况下，网站主服务器连接不上极验云服务器时，保障基本业务运作不受影响。

4 客户端部署

4.1 安装

4.1.1 引入初始化函数

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://static.geetest.com/static/tools/gt.js"></script>

 这里需要说明下，在pc端部署，需要引入JQ插件。行为验证要求初始化在业务页面加载时同时初始化，否则验证无法读取用户在业务页面操作的行为数据，会导致验证策略失效。

通过以上代码引入 `initGeetest` 初始化函数

4.1.2 调用初始化函数进行初始化

 下面的代码需要在页面加载后就执行，如果使用jQuery，可以写在$(function(){});内。

ajax({
    url: "API1接口（由服务端提供）",
    type: "get",
    dataType: "json",
    success: function (data) {
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt, 
            challenge: data.challenge,
            offline: !data.success, // 表示用户后台检测极验服务器是否宕机            		
            new_captcha: true
        }, function (captchaObj) {
            // 这里可以调用验证实例 captchaObj 的实例方法
        })
    }
})

 以上初始化过程，需要结合服务端 SDK 使用，因为初始化所传入的配置参数来自服务端 SDK。第三个参数回调函数里可以写具体的验证代码，以下以登录为例：

$("#popup-submit").click(function () {// 此处省略在登陆界面中，获取登陆数据的一些步骤      
        // 先校验是否点击了验证码     
var validate = captchaObj.getValidate();
         if (!validate) {
            alert('请先完成验证！');
            return;
         }
        // 提交验证码信息，比如登陆页面，你需要提交登陆信息，用户名和密码等登陆数据
        $.ajax({
            url: "/登录接口（由服务端提供）",
            type: "post",
            // dataType: "json",
            data: {
                // 用户名和密码等其他数据，自己获取，不做演示
                username:username,
                password:password,
                // 验证码数据，这些数据不用自己获取
                   // 这是二次验证所需的三个值
                   // 可以直接设置验证码单独校验，省略其他信息
                geetest_challenge: validate.geetest_challenge,
                geetest_validate: validate.geetest_validate,
                geetest_seccode: validate.geetest_seccode
            },
            // 这里是正确返回处理结果的处理函数
              // 假设你就返回了1，2，3
              // 当然，正常情况是返回JSON数据
            success: function (result) {
                // 1表示验证码验证失败
                if (result == "1") {
                    alert("验证码验证失败！");
                }else if (result == "2") {
                    alert("用户名或密码错误！");
                }else if (result == "3") {
                    alert("登陆成功！");
                    // 登陆成功了，可以在这里做其他处理
                }else{
                    alert("登陆错误！");
                }
            }
        });
    });
    // 弹出式需要绑定触发验证码弹出按钮
    // 比如在登陆页面，这个触发按钮就是登陆按钮
    captchaObj.bindOn("#popup-submit"); 
    // 将验证码加到id为captcha的元素里
     // 验证码将会在下面指定的元素中显示出来
    captchaObj.appendTo("#popup-captcha");