拖动验证

来源：互联网发布：怎么退出淘宝嘉年华编辑：程序博客网时间：2024/06/05 05:27

简介

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

demo讲解

Java版demo地址：https://github.com/GeeTeam/gt-java-sdk

引入GeetestLib

import com.geetest.sdk.java.GeetestLib;

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;    }}

验证初始化

@RequestMapping(value = "/gt/init")@ResponseBodypublic 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();}

二次验证

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;}

前端页面login.jsp

<!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 --><script src="http://code.jquery.com/jquery-1.12.3.min.js"></script><!-- 引入封装了failback的接口--initGeetest --><script src="http://static.geetest.com/static/tools/gt.js"></script><!-- 若是https，使用以下接口 --><!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> --><!-- <script src="https://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>

效果

浮动式

嵌入式

弹出式

移动端形式

小结

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

引用地址：http://blog.csdn.net/u014801403/article/details/59106624

阅读全文

0 0