欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

极验——行为验证的开发与使用

程序员文章站 2022-03-12 14:56:37
...

一、极验

    相对于传统的图片验证码,极验将人机交互的安全提升了一个大大的阶梯,无论从页面ui、用户使用体验和网站安全任何一个方面,极验都完美的胜出。本篇主要介绍在开发中如何应用极验行为验证的技术,至于极验api、申请极验应用id和秘钥的方法,请看极验官网,点击这里进入极验官方网站

二、配置文件

    不同于极验官方API,我将应用id、秘钥等配置数据放在了properties配置文件里,方便进行查看和管理。配置文件如下:

geetest.id=592c1eab4790ba082fd27b24305ef6

geetest.key=1bd3860bf8d3ccce4f050de1456471

geetest.isnewfailback=true

geetest.clienttype=web

    关于如何获取配置文件的信息,请看我的博客:还没写= = 

三、后台方法

    其实后台方法这里主要是转发生成极验验证或验证极验的请求,当然,我们也可以在这里记录具体的信息或者其他。不过这里博主并没有做这些,只是简单的去转发请求。

    1.极验验证初始化

     这里需要说一下,代码里部分的参数是配置在常量类里的,大家在实际使用的时候,根据自己的情况去修改即可。初始化的方法如下:

/**
	 * 初始化极验
	 * 
	 * @param request
	 * @param geetestDto
	 * @param random	防止缓存
	 * @return
	 */
	@RequestMapping("init/{random}")
	@ResponseBody
	@SysControllerLog(description="极验验证初始化",logType=101,module=101)
	public String initGeetest(HttpServletRequest request) {
		GeetestLib geetestLib = new GeetestLib(prop.getPropValue(SysParams.GEETEST_ID),
				prop.getPropValue(SysParams.GEETEST_KEY),Boolean.valueOf(prop.getPropValue(SysParams.GEETEST_CALL_BACK)));
		
		//自定义参数,可选择添加
		User user = (User)request.getSession().getAttribute(SysParams.CURRENT_USER);
		HashMap<String, String> param = new HashMap<String, String>();
		param.put("user_id", user==null?SysParams.ADMIN_ID:user.getUserId()); 	//网站用户id
		param.put("client_type", prop.getPropValue(SysParams.GEETEST_CLIENT_TYPE)); 	
		param.put("ip_address", IPUtil.getRemoteHost(request)); 
		
		String resStr = "{}";
		
		//进行验证预处理
		int gtServerStatus = geetestLib.preProcess(param);
		//将服务器状态设置到session中
		request.getSession().setAttribute(geetestLib.gtServerStatusSessionKey, gtServerStatus);
		//将userid设置到session中
		request.getSession().setAttribute(SysParams.GEETEST_USER_ID, user==null?SysParams.ADMIN_ID:user.getUserId());
		
		resStr = geetestLib.getResponseStr();
		
		System.out.println("请求极验初始化的返回结果为:"+resStr);
		return resStr;
	}

    2.极验验证

    极验验证的方法我是没有使用的,如果没有特别需要的管理或记录的可以忽略这个方法。代码如下:

/**
	 * 极验二次验证
	 * 
	 * @param request
	 * @param geetestDto
	 * @return
	 */
	@RequestMapping("verify/{random}")
	@ResponseBody
	@SysControllerLog(description="极验二次验证",logType=101,module=101)
	public String verifyGeetest(HttpServletRequest request) {
		GeetestLib gtSdk = new GeetestLib(prop.getPropValue(SysParams.GEETEST_ID),
				prop.getPropValue(SysParams.GEETEST_KEY),Boolean.valueOf(prop.getPropValue(SysParams.GEETEST_CALL_BACK)));
		
		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中获取gt-server状态
		int gt_server_status_code = (Integer) request.getSession().getAttribute(gtSdk.gtServerStatusSessionKey);
		//从session中获取userid
		String userid = (String)request.getSession().getAttribute(SysParams.GEETEST_USER_ID);
		
		//自定义参数,可选择添加
		HashMap<String, String> param = new HashMap<String, String>(); 
		param.put("user_id", userid); 
		param.put("client_type", prop.getPropValue(SysParams.GEETEST_CLIENT_TYPE)); 
		param.put("ip_address", IPUtil.getRemoteHost(request));
		
		int gtResult = 0;
		if (gt_server_status_code == 1) {
			//gt-server正常,向gt-server进行二次验证
			gtResult = gtSdk.enhencedValidateRequest(challenge, validate, seccode, param);
			System.out.println("极验二次校验返回结果:"+gtResult);
		} else {
			// gt-server非正常情况下,进行failback模式验证
			System.out.println("failback:use your own server captcha validate");
			gtResult = gtSdk.failbackValidateRequest(challenge, validate, seccode);
			System.out.println("极验二次校验返回结果:"+gtResult);
		}

		// 验证成功
		if (gtResult == 1) {
			return AjaxDone.retParam(BackCode.GEETEST_SUCCESS, gtSdk.getVersionInfo());
		} else {		
			return AjaxDone.retParam(BackCode.GEETEST_FAIL, gtSdk.getVersionInfo());
		}
	}

    3.极验返回码

    极验详细的返回码信息,可以参照官方API。

四、前台生成极验验证

    1.demo页面为注册页面,首先引入js(具体路径视个人情况):

<script type="text/javascript" src="${pageContext.request.contextPath }/static/geetest/gt.js"></script> 

    2.定义极验验证的显示区域

<div>
		        <div id="captcha"> </div>
		    </div>

    3.初始化极验验证

/*****************极验滑动验证*********************/
        $(function(){
        	$.ajax({
			    // 获取id,challenge,success(是否启用failback)
			    url: "${pageContext.request.contextPath }/common/geetest/init/" + (new Date()).getTime(), // 加随机数防止缓存
			    type: "post",
			    dataType: "json",
			    success: function (data) {
			    	var msg =  $.parseJSON(data); 
			         // 调用 initGeetest 初始化参数
		            // 参数1:配置参数
		            // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
		            initGeetest({
		                gt: msg.gt,
		                challenge: msg.challenge,
		                new_captcha: msg.new_captcha, // 用于宕机时表示是新验证码的宕机
		                product: "float", // 产品形式,包括:float,popup,当为bind时,可以自定义检查验证,这里不需要记录用户的校验数据,故不使用
		                offline: !msg.success, 
		                width: "100%"
		            }, function (captchaObj) {
		            	captchaObj.appendTo("#captcha");
				        
		            });
			    }
			});
			
        });

    4.验证极验验证的结果

    这里,我是与获取短信验证码的点击事件绑定在一起的,当用户需要获取验证码时,需要先通过短信验证。需要注意的是,captchaObj不是全局变量,所以,建议页面的函数尽量写在初始化函数的回调函数里。代码如下:

var validate = captchaObj.getValidate();
if (!validate) {
	layui.use('layer', function(){
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
		layer.msg('请点击上方按钮进行验证');
	});
	return;
}

    5.重置极验验证

//重置验证码
captchaObj.reset();

五、使用效果

极验——行为验证的开发与使用

极验——行为验证的开发与使用

极验——行为验证的开发与使用