您现在的位置是：网站首页 / 精品资源精品资源

验证码用这个，逼格提高不少，开源的哟

李先生2021-10-24 687人围观

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

行为式验证码

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

点触式

拖动拼图

行为式验证码优点

首先，我们使用验证码最本质的需求是什么？就是防止机器人是吧，防止接口滥用，防止短信接口被抓取非法滥用。而普通的图片式验证码已经不太安全了，现在市面上有专门用于破解图片式验证吗的产品，利用图片识别等技术识别验证码。

所以如果让机器不能识别出来的验证码应运而生，行为验证码就通过人的行为来进行验证，比如勾勒一个图形，比如滑动到某个位置，比如点选几个字等等。而且背后可以做一些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就是进行服务器二次验证的入口。