乐趣区

关于java:验证码这样做瞬间高出一个逼格

jiezi

前言

行为验证码通过用户的操作来实现验证，常见的行为验证码有拖动式和点触式。

拖动式验证就是依据图片显示，将指定的图形拖动到指定地位实现验证。而点触式验证码就是通过鼠标点击出示例中呈现的图形实现验证。

行为验证码利用

明天举荐一款十分优良的行为验证码AJ-Captcha（我的项目地址https://gitee.com/anji-plus/c…），这个我的项目蕴含了滑动拼图和文字点选两种类型的验证码，除了嵌入式交互，还提供了弹出式交互的形式，齐全不影响原 UI 布局。

AJ-Captcha的验证流程如下：

  1. 用户拜访登录页面，发送申请显示行为验证码
  2. 用户依照提醒要求实现验证码拼图 / 点击
  3. 用户提交表单，前端将第二步的输入一起提交到后盾
  4. 验证数据随表单提交到后盾后，后盾须要调用 captchaService.verification 做二次校验。
  5. 第 4 步返回校验通过 / 失败到产品利用后端，再返回到前端。如下图所示。

如果你是 Maven 开发者，应用起来十分不便，我的项目的保护人员曾经将依赖推送至地方仓库。只须要引入依赖就实现了 90% 的工作量。接下来只须要在登录接口中进行二次验证就能够了。

我的项目集成了包含 html、vue、flutter、uni-app、Android Kotlin、IOS、php 等多种前端语言，能够轻松将 AJ_Captcha 集成到我的项目中。

接下来咱们以 Spring Boot+html 为例看看如何疾速集成 AJ_Captcha 实现行为验证码的交互流程。

第一步、Spring Boot 中引入 AJ_Captcha 依赖

<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.2.9</version>
</dependency>

AJ_Captcha默认实现了验证码生成和验证接口，验证码生成接口的默认申请地址是/captcha/get，验证接口的默认申请地址为/captcha/check。也就是说实现以上步骤，就能够提供给前端获取和验证验证码的接口了。如果你还想让你的验证码生成的共性一点，能够配置以下属性：

# 滑动验证，底图门路，不配置将应用默认图片
# 反对全门路
# 反对我的项目门路, 以 classpath: 结尾, 取 resource 目录下门路, 例：classpath:images/jigsaw
aj.captcha.jigsaw=classpath:images/jigsaw
# 滑动验证，底图门路，不配置将应用默认图片
# 反对全门路
# 反对我的项目门路, 以 classpath: 结尾, 取 resource 目录下门路, 例：classpath:images/pic-click
aj.captcha.pic-click=classpath:images/pic-click

# 对于分布式部署的利用，咱们倡议利用本人实现 CaptchaCacheService，比方用 Redis 或者 memcache，# 参考 CaptchaCacheServiceRedisImpl.java
# 如果利用是单点的，也没有应用 redis，那默认应用内存。# 内存缓存只适宜单节点部署的利用，否则验证码生产与验证在节点之间信息不同步，导致失败。#！！！留神啦，如果利用有应用 spring-boot-starter-data-redis，# 请关上 CaptchaCacheServiceRedisImpl.java 正文。# redis ----->  SPI：在 resources 目录新建 META-INF.services 文件夹(两层)，参考以后服务 resources。# 缓存 local/redis...
aj.captcha.cache-type=local
# local 缓存的阈值, 达到这个值，革除缓存
#aj.captcha.cache-number=1000
# local 定时革除过期缓存(单位秒), 设置为 0 代表不执行
#aj.captcha.timing-clear=180
#spring.redis.host=10.108.11.46
#spring.redis.port=6379
#spring.redis.password=
#spring.redis.database=2
#spring.redis.timeout=6000

# 验证码类型 default 两种都实例化。aj.captcha.type=default
# 汉字对立应用 Unicode, 保障程序通过 @value 读取到是中文，可通过这个在线转换;yml 格局不须要转换
# https://tool.chinaz.com/tools/unicode.aspx 中文转 Unicode
# 右下角水印文字(我的水印)
aj.captcha.water-mark=\u6211\u7684\u6c34\u5370
# 右下角水印字体(不配置时，默认应用文泉驿正黑)
# 因为宋体等波及到版权，咱们 jar 中内置了开源字体【文泉驿正黑】# 形式一：间接配置 OS 层的现有的字体名称，比方：宋体
# 形式二：自定义特定字体，请将字体放到工程 resources 下 fonts 文件夹，反对 ttf\ttc\otf 字体
# aj.captcha.water-font=WenQuanZhengHei.ttf
# 点选文字验证码的文字字体(文泉驿正黑)
# aj.captcha.font-type=WenQuanZhengHei.ttf
# 校验滑动拼图容许误差偏移量(默认 5 像素)
aj.captcha.slip-offset=5
# aes 加密坐标开启或者禁用(true|false)
aj.captcha.aes-status=true
# 滑动烦扰项(0/1/2)
aj.captcha.interference-options=2

aj.captcha.history-data-clear-enable=false

# 接口申请次数一分钟限度是否开启 true|false
aj.captcha.req-frequency-limit-enable=false
# 验证失败 5 次，get 接口锁定
aj.captcha.req-get-lock-limit=5
# 验证失败后，锁定工夫距离,s
aj.captcha.req-get-lock-seconds=360
# get 接口一分钟内申请数限度
aj.captcha.req-get-minute-limit=30
# check 接口一分钟内申请数限度
aj.captcha.req-check-minute-limit=60
# verify 接口一分钟内申请数限度
aj.captcha.req-verify-minute-limit=60

第二步、前端伪代码调用接口

  1. 引入验证码的款式以及验证等文件
  2. 验证码获取及验证
<script>
    $('#content').slideVerify({
    baseUrl:'http://localhost:8080/',  // 服务器申请地址, 默认地址为安吉服务器;
    containerId:'btn',//pop 模式 必填 被点击之后呈现行为验证码的元素 id
    mode:'pop',     // 展现模式
    imgSize : {// 图片的大小对象, 有默认值{ width: '310px',height: '155px'}, 可省略
        width: '400px',
        height: '200px',
    },
    barSize:{// 下方滑块的大小对象, 有默认值{ width: '310px',height: '50px'}, 可省略
        width: '400px',
        height: '40px',
    },
    beforeCheck:function(){  // 测验参数合法性的函数  mode ="pop" 无效
        let flag = true;
        // 实现: 参数合法性的判断逻辑, 返回一个 boolean 值
        return flag
    },
    ready : function() {},  // 加载结束的回调
    success : function(params) { // 胜利的回调
        // params 为返回的二次验证参数 须要在接下来的实现逻辑回传服务器
        例如: login($.extend({}, params))
    },
    error : function() {}        // 失败的回调
});
</script>

验证码验证胜利之后，会返回一个用于 二次验证 的串码。

第三步，用户登录，二次验证

客户端登录的时候携带验证胜利后返回的串码，在登录接口中进行二次验证，验证流程结束。

@Autowired
private CaptchaService captchaService;
/**
  * 页面获取 token
  * 大屏数据校验
  * @param user
  * @return
  */
@PostMapping("getWebToken")
public ResultBean getWebToken(@RequestBody LoginUser user,String captchaVerification){ResultBean resultBean = new ResultBean();
    CaptchaVO captchaVO = new CaptchaVO();
    captchaVO.setCaptchaVerification(captchaVerification);
    ResponseModel responseModel = captchaService.verification(captchaVO);
    if(!responseModel.isSuccess()){resultBean.fillCode(0,responseModel.getRepMsg());
        return resultBean;
    }
    // 验证通过后，持续登录流程
}

明天的内容就介绍到这里了，趁这个机会，试着应用这款高颜值的行为验证码来替换我的项目中的图形验证码吧。

退出移动版