welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

checkcode 验证码接口


分类 Java   关键字 分享   标签 java   web   jquery   发布 hongwei  1452820477213
注意 转载须保留原文链接,译文链接,作者译者等信息。  
验证码接口很常用,可以在一定程度上有效避免程序批量操作(自动识别验证码还是有一定技术门槛的),很多第三方提供验证码接口侧重于提升复杂度,在这里就更偏向于简单、方便、实用。

页面依赖jquery和validate(已扩展,见https://www.xlongwei.com/detail/15091716
<script src="http://cms.xlongwei.com/res/js/umeditor1_2_2/third-party/jquery.min.js"></script>
<script src="http://cms.xlongwei.com/res/js/jquery/jquery.validate.min.js"></script>

页面内容,img内容直接由checkcode接口提供,remote校验自动检查checkcode值是否正确
<label>验证码<img height="21px" src="http://cms.xlongwei.com/checkcode.json" onclick="this.src='http://cms.xlongwei.com/open/checkcode.json?'+ Math.random()"/>:</label><input name="checkcode" class="{required:true,pattern:'[a-zA-Z0-9]{4}',remote:{url:'http://cms.xlongwei.com/open/checkcode.json',type:'post',data:{checkcode:function(){ return $('input[name=\'checkcode\']').val(); }}},messages:{pattern:'4位字母或数字',remote:'验证码不正确'}}"/>

接口实现,调优Image类可以提升验证码复杂度
@ResponseBody
@RequestMapping("checkcode.json")
public Object checkcode(HttpServletRequest request, HttpServletResponse response) throws IOException {
String checkcode = RequestUtil.getStringParam(request, "checkcode", null);
if(StringUtil.isBlank(checkcode)) {
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 1L);
response.setHeader("Cache-Control", "no-cache");
response.addHeader("Cache-Control", "no-store");
response.setContentType("image/jpeg");
BufferedImage image = Image.creatImage(request.getSession());//Image负责生产验证码,存入session
ImageIO.write(image, "JPEG", response.getOutputStream());
return null;
}else {
boolean checkImgCode = Image.checkImgCode(request);//Image负责校验验证码是否正确
JSONObject json = new JSONObject();
json.put("valid", checkImgCode);//返回格式已被validate.js扩展后支持
json.put("ret_code", "0");//ShowAPI返回值
return ServiceController.responseWithAccessAllowed(json);
}
}

与validate接口结合,校验时可以请求http://cms.xlongwei.com/open/checkcode.json?checkcode=,
@ResponseBody
@RequestMapping("validate.json")
public Object validate(String type, String value) {
JSONObject json = new JSONObject();
logger.info("validate type: "+type+", value: "+value);
if(type!=null && value!=null) {
boolean valid = false;
switch(type) {
case "checkcode": valid = Image.checkImgCode(((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest().getSession(true), value); break;
}
json.put("valid", valid);
json.put("ret_code", "0");
}else {
json.put("valid", true);
}
return ServiceController.responseWithAccessAllowed(json);
}

demo地址,http://cms.xlongwei.com/open/validate.html

验证码接口调整
function checkcode(){
jQuery.get("/open/checkcode.json?specials=true&length=5", function(data){
$("#checkcodeImg").attr("src",data.image).attr("sid",data.sid);
});
}
$(function(){
checkcode();
})
<label>验证码:</label><input name="checkcode" class="{required:true,remote:{url:'$front_url/open/checkcode.json',type:'post',data:{sid:function(){ return $('#checkcodeImg').attr('sid'); },checkcode:function(){ return $('input[name=\'checkcode\']').val(); }}},messages:{remote:'验证码不正确'}}"/><img height="30px" src="" onclick="checkcode()" id="checkcodeImg" sid=""/>

showapi也提供了验证码接口,访问时需要授权签名,见文档
生成:https://www.showapi.com/api/editPoint/932/2,返回base64Image和sid
校验:https://www.showapi.com/api/editPoint/932/1,提交checkcode和sid,返回valid=true | false