拖动验证

电玩女神 2022-07-13 18:49 173阅读 0赞

# 简介 #

> 极验证与以往传统验证码不同的是，极验通过分析用户完成拼图过程中的行为特征，通过数据分析来判断是人还是机器。用户不必面对眼花缭乱的英文字符或汉字，整个验证过程变的像游戏一样有趣。

# demo讲解 #

> [Java][]版demo地址：[https://github.com/GeeTeam/gt-java-sdk][https_github.com_GeeTeam_gt-java-sdk]

## 引入GeetestLib ##

import com.geetest.sdk.java.GeetestLib;
     
      
       1
      
     
      
       1

## API说明 ##

GeetestLib(String captchaId, String privateKey) : 构造函数

preProcess() : 预处理接口

getResponseStr() : 获取预处理结果的接口

enhencedValidateRequest(String challenge, String validate, String seccode) : 极验服务器状态正常的二次验证接口

failbackValidateRequest(String challenge, String validate, String seccode) : 极验服务器状态宕机的二次验证接口

## GeetestConfig 配置文件 ##

public class GeetestConfig { 
    
        private static final String captcha_id_web = "";
        private static final String captcha_id_wap = "";
        private static final String private_key_web = "";
        private static final String private_key_wap = "";
    
        public static final String getWebCaptcha_id() {
            return captcha_id_web;
        }
    
        public static final String getWebPrivate_key() {
            return private_key_web;
        }
    
        public static final String getWapCaptcha_id() {
            return captcha_id_wap;
        }
    
        public static final String getWapPrivate_key() {
            return private_key_wap;
        }
    
    }
    
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25

## 验证初始化 ##

@RequestMapping(value = "/gt/init")
    @ResponseBody
    public String geetestStart(HttpServletRequest request){
        GeetestLib gtSdk = null;
        if(isMobile(request)){
            gtSdk = new GeetestLib(GeetestConfig.getWapCaptcha_id(), GeetestConfig.getWapPrivate_key());
        }else{
            gtSdk = new GeetestLib(GeetestConfig.getWebCaptcha_id(), GeetestConfig.getWebPrivate_key());
        }
    
        //自定义userid
        String userid = "test";
    
        //进行验证预处理
        int gtServerStatus = gtSdk.preProcess(userid);
    
        //将服务器状态设置到session中
        request.getSession().setAttribute(gtSdk.gtServerStatusSessionKey, gtServerStatus);
        //将userid设置到session中
        request.getSession().setAttribute("userid", userid);
    
        return gtSdk.getResponseStr();
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23

## 二次验证 ##

boolean validGtCode(HttpServletRequest request) {
        GeetestLib gtSdk = null;
        if(isMobile(request)){
            gtSdk = new GeetestLib(GeetestConfig.getWapCaptcha_id(), GeetestConfig.getWapPrivate_key());
        }else{
            gtSdk = new GeetestLib(GeetestConfig.getWebCaptcha_id(), GeetestConfig.getWebPrivate_key());
        }
        String challenge = request.getParameter(GeetestLib.fn_geetest_challenge);
        String validate = request.getParameter(GeetestLib.fn_geetest_validate);
        String seccode = request.getParameter(GeetestLib.fn_geetest_seccode);
    
        //从session中获取userid
        String userid = (String)request.getSession().getAttribute("userid");
    
        //从session中获取gt-server状态
        int gt_server_status_code = (Integer) request.getSession().getAttribute(gtSdk.gtServerStatusSessionKey);
    
        int gtResult = 0;
    
        if (gt_server_status_code == 1) {
            //gt-server正常，向gt-server进行二次验证
    
            gtResult = gtSdk.enhencedValidateRequest(challenge, validate, seccode, userid);
        } else {
            // gt-server非正常情况下，进行failback模式验证
            logger.warn("failback:use your own server captcha validate");
            gtResult = gtSdk.failbackValidateRequest(challenge, validate, seccode);
        }
        return gtResult == 1;
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30

## 前端页面login.jsp ##

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
    
    
    
    
    
    <script> var handlerPopup = function (captchaObj) { // 成功的回调 captchaObj.onSuccess(function () { var validate = captchaObj.getValidate(); $.ajax({ url: "gt/validate", // 进行二次验证 type: "post", dataType: "json", data: { username: $('#username1').val(), password: $('#password1').val(), geetest_challenge: validate.geetest_challenge, geetest_validate: validate.geetest_validate, geetest_seccode: validate.geetest_seccode }, success: function (data) { if (data && (data.status === "success")) { $(document.body).html('<h1>登录成功</h1>'); } else { $(document.body).html('<h1>登录失败</h1>'); } } }); }); $("#popup-submit").click(function () { captchaObj.show(); }); // 将验证码加到id为captcha的元素里 captchaObj.appendTo("#popup-captcha"); // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html }; // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback） $.ajax({ url: "gt/init?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { // 使用initGeetest接口 // 参数1：配置参数 // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config }, handlerPopup); } }); </script>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60

## 效果 ##

### 浮动式 ###

![20161018200038284][]

### 嵌入式 ###

![20161018200055913][]

### 弹出式 ###

![20161018200112241][]

### 移动端形式 ###

![20161018200125663][]

# 小结 #

目前公司也在使用极验证，通过自己的切身使用，感觉极验证的用户体验很好。

[Java]: http://lib.csdn.net/base/javase
[https_github.com_GeeTeam_gt-java-sdk]: https://github.com/GeeTeam/gt-java-sdk
[20161018200038284]: /images/20220709/5d5da60c983543328c2b065e6e23e9fe.png
[20161018200055913]: /images/20220709/803425c7faf7464aaa77597910f13f30.png
[20161018200112241]: /images/20220709/64aea88eed44487289b065e2391e2abb.png
[20161018200125663]: /images/20220709/5d7cae70b4be4c54a611fec2a969ccb2.png