行为式验证码
行为式验证码是一种较为流行的验证码。从字面来理解,就是通过用户的操作行为来完成验证,而无需去读懂扭曲的图片文字。常见的有两种:拖动式与点触式。常见的如下图


行为式验证码优点
首先,我们使用验证码最本质的需求是什么?就是防止机器人是吧,防止接口滥用,防止短信接口被抓取非法滥用。而普通的图片式验证码已经不太安全了,现在市面上有专门用于破解图片式验证吗的产品,利用图片识别等技术识别验证码。
所以如果让机器不能识别出来的验证码应运而生,行为验证码就通过人的行为来进行验证,比如勾勒一个图形,比如滑动到某个位置,比如点选几个字等等。而且背后可以做一些AI方面的扩展,比如识别到不是可疑用户,那么难度就降低,识别到可疑用户,验证难度就加大等等,而且给用户升级了体验,原来的图片式验证码优势闪瞎眼睛都不能认出来,现在可以将干扰降到最低。
开源项目
之前我给大家不是介绍过一款行为式验证 产品吗,那款式商业化的,虽然提供免费版本但是真的难用。今天给大家安利一款开源版本的验证。先给大家看下效果


从上面的效果来看基本和商业化的产品没啥两样除了样式粗糙了点,还是能满足很多个人用户的,并且我按照我个人的欣赏改了一点界面,如果想要可以关注Java极客帮领取
行为式验证码流程
既然聊到行为式验证码,那就聊聊他的运作流程:

- 首先是get接口,这个接口是用户访问界面时进行初始化验证码,根据租户配置读取相关设置,返回背景图片,水印位置参数
- 然后用户操作验证码,比如滑动验证码,操作点选等
- 用户操作完成后,发起参数的提交即check接口,根据租户信息验证用户提交的配置,这里会返回一个验证参数,用户服务器二次验证
- 服务器根据第三步用户操作完成后返回的验证参数进行第二次验证
以上就是行为式验证的核心,如果更加完善点,可以在第一步加入智能AI,如果判定用户是安全的,就可以直接不用验证或者降低验证难度
项目结构

可以看到项目结构是非常清晰友好的,后端采用springboot构建,前端支持多种展示形式,比如原生android,h5,微信小程序,vue,以及web-html都是满足的,可以说覆盖的很全面,可以很轻松的集成到项目里面。
项目上手
首先介绍项目的核心,就是core包下面的captcha模块,这个是最核心的初始化模块。里面提供了get,check,verification两个核心校验逻辑以及存储单元的配置等逻辑
前端主要是view包,这里我就以web来展示,可以根据自己的需求来选用,配置上也是高度封装,无需关心内部配置,非常人性化
<script>
// // 初始化验证码 弹出式
$('#mpanel2').slideVerify({
baseUrl:'http://localhost:8080/', //服务器请求地址, 默认地址为安吉服务器;
mode:'pop', //展示模式
containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
imgSize : { //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
width: '260px',
height: '130px',
},
secretKey:'aaaa',
barSize:{ //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
width: '400px',
height: '40px',
},
beforeCheck:function(){ //检验参数合法性的函数 mode ="pop"有效
var flag = true;
//实现: 参数合法性的判断逻辑, 返回一个boolean值
return flag
},
ready : function() {}, //加载完毕的回调
success : function(params) { //成功的回调
// params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
// 例如: login($.extend({}, params))
console.log(params)
},
error : function() {} //失败的回调
});
</script>
二次认证:
@Autowired
private CaptchaService captchaService;
@PostMapping("/login")
public ResponseModel get(@RequestBody String captchaVerification) {
CaptchaVO captchaVO = new CaptchaVO();
captchaVO.setCaptchaVerification(captchaVerification);
ResponseModel response = captchaService.verification(captchaVO);
if(response.isSuccess() == false){
//验证码校验失败,返回信息告诉前端
//repCode 0000 无异常,代表成功
//repCode 9999 服务器内部异常
//repCode 0011 参数不能为空
//repCode 6110 验证码已失效,请重新获取
//repCode 6111 验证失败
//repCode 6112 获取验证码失败,请联系管理员
}
return response;
}
当用户滑动完成后前端success函数会吧check的参数返回,并且返回一个captchaVerification参数用户后端校验,而CaptchaService类的
verification就是进行服务器二次验证的入口。
界面优化
我按照我个人的喜爱,简单的修改了下前端样式,如果大家喜欢请关注Java极客
帮联系我吧
