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

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

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

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

行为式验证码

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

点触式
点触式

拖动拼图
拖动拼图

行为式验证码优点

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

所以如果让机器不能识别出来的验证码应运而生,行为验证码就通过人的行为来进行验证,比如勾勒一个图形,比如滑动到某个位置,比如点选几个字等等。而且背后可以做一些AI方面的扩展,比如识别到不是可疑用户,那么难度就降低,识别到可疑用户,验证难度就加大等等,而且给用户升级了体验,原来的图片式验证码优势闪瞎眼睛都不能认出来,现在可以将干扰降到最低。

开源项目

之前我给大家不是介绍过一款行为式验证 产品吗,那款式商业化的,虽然提供免费版本但是真的难用。今天给大家安利一款开源版本的验证。先给大家看下效果

滑动式
滑动式

点选式
点选式

从上面的效果来看基本和商业化的产品没啥两样除了样式粗糙了点,还是能满足很多个人用户的,并且我按照我个人的欣赏改了一点界面,如果想要可以关注Java极客帮领取

行为式验证码流程

既然聊到行为式验证码,那就聊聊他的运作流程:

验证流程
验证流程

  1. 首先是get接口,这个接口是用户访问界面时进行初始化验证码,根据租户配置读取相关设置,返回背景图片,水印位置参数
  2. 然后用户操作验证码,比如滑动验证码,操作点选等
  3. 用户操作完成后,发起参数的提交即check接口,根据租户信息验证用户提交的配置,这里会返回一个验证参数,用户服务器二次验证
  4. 服务器根据第三步用户操作完成后返回的验证参数进行第二次验证

以上就是行为式验证的核心,如果更加完善点,可以在第一步加入智能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极客帮联系我吧

image-20211024095657205
image-20211024095657205

项目地址:https://github.com/anji-plus/captcha

  • 11 点赞
  • 0 收藏
  • 分享

作品评论