使用Vaptcha防止恶意访问(1/2)

本篇文章主要介绍了" 使用Vaptcha防止恶意访问"，主要涉及到方面的内容，对于软件工程感兴趣的同学可以参考一下： 背景：一般网站都会涉及注册、登录、发送邮件、验证码之类的功能，为了方便用户使用手机号注册及找回密码，前段时间增加了发送手机验证码的模块；上线运行也没什么问题。一...

背景：一般网站都会涉及注册、登录、发送邮件、验证码之类的功能，为了方便用户使用手机号注册及找回密码，前段时间增加了发送手机验证码的模块；上线运行也没什么问题。一天偶然查看日志发现验证码发不了了，登录第三方短信平台一看，晕死，某一天联系发送验证码把余额全部耗光了。++

开发：搜索发现了Vaptcha，官网：https://www.vaptcha.com；这个可以免费创建三个验证模块，对应一般网站而言已经足够了，当然其也提供比较多的增值服务。对比了一下自己开发验证码（图片、滑块），觉得这个更好一些

注册，或者使用第三方直接登录，创建验证单元拿到Vid、Key

1、前端导入验证js代码

 2、将验证模块放入页面展示的位置

   

	  

		  
		  Vaptcha启动中...
	  
  

 3、初始化验证模块

var vid, challenge;
$.ajax({
	dataType : "json",
	async : false,
	url:'/xxx/vaptcha.do?method=getvaptcha',//服务器端接口，返回challenge和vid
	success:function(data){
	  vid = data.vid;
	  challenge = data.challenge;
	}
});
var c
  vid : vid,
  challenge : challenge,
  container : '#vaptcha_container',
  type    : "click", //必填，表示点击式验证模式
  https   : false,//协议类型,boolean,可选true,false,不填则自适应。
  outage  : "www.xxx.com", //服务器端配置的宕机模式接口地址
  success : function(token, challenge){//验证成功回调函数, 参数token, challenge 为string, 必填
	  //执行表单验证失败时，需要重新初始化VAPTCHA
	  //todo:执行人机验证成功后的操作
	$("#getyzm").removeAttr("disabled").css({"background-color" : "#12C0FA"});
	$("#token").val(token);
	$("#challenge").val(challenge);
  },
  fail : function(){//验证失败回调函数  
	   //todo:执行人机验证失败后的操作
	   $("#phone_span").html("验证失败，请重试");
  }
};
//Vaptcha对象
var obj;
window.vaptcha(config,function(vaptcha_obj){
	obj = vaptcha_obj;
	obj.init();
});

 4、vaptcha action响应输出token