背景:一般网站都会涉及注册、登录、发送邮件、验证码之类的功能,为了方便用户使用手机号注册及找回密码,前段时间增加了发送手机验证码的模块;上线运行也没什么问题。一天偶然查看日志发现验证码发不了了,登录第三方短信平台一看,晕死,某一天联系发送验证码把余额全部耗光了。++
开发:搜索发现了Vaptcha,官网:https://www.vaptcha.com;这个可以免费创建三个验证模块,对应一般网站而言已经足够了,当然其也提供比较多的增值服务。对比了一下自己开发验证码(图片、滑块),觉得这个更好一些
注册,或者使用第三方直接登录,创建验证单元拿到Vid、Key
1、前端导入验证js代码
2、将验证模块放入页面展示的位置
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 config={ 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
private Vaptcha vaptcha = new Vaptcha(VaptchaConfig.VID, VaptchaConfig.KEY);
public ActionForward getvaptcha(ActionMapping mapping, ActionForm form,
HttpServletRequest request,HttpServletResponse response){
String challenge = vaptcha.getChallenge(null);
this.responseWrite(response, challenge);
return null;
}
/**
* response 方式输出信息至客户端
* @param response
* @param msg
* @throws IOException
*/
protected void responseWrite(HttpServletResponse response,Object msg) {
if(msg == null) return;
response.setCharacterEncoding("utf-8");
PrintWriter pw;
try {
pw = response.getWriter();
pw.write(msg.toString());
pw.flush();
pw.close();
System.out.println(msg);
} catch (IOException e) {
e.printStackTrace();
}
}
5、二次验证
boolean vliStatus = vaptcha.validate(request.getParameter("challenge"),
request.getParameter("token"),
null);
....自己的逻辑代码
这样就有效防止了某些恶意访问了
更多信息请访问官网:https://www.vaptcha.com/document/install
PS:附件为Vaptcha公共类库