Java集成行为验证码AJ-Captcha

前言：行为验证码采用嵌入式集成方式，接入方便，安全，高效。抛弃了传统字符型验证码展示-填写字符-比对答案的流程，采用验证码展示-采集用户行为-分析用户行为流程，用户只需要产生指定的行为轨迹，不需要键盘手动输入，极大优化了传统验证码用户体验不佳的问题；同时，快速、准确的返回人机判定结果。

行为验证码 AJ-Captcha

Githu地址： Githu地址
码云地址： 码云地址
文档地址： 文档地址

1、验证码类型包括两种

滑块验证码

文字验证码

2、项目引入AJ-Captcha

2.1 添加依赖

<dependency><groupId>com.anji-plus</groupId><artifactId>captcha</artifactId><version>1.3.0</version>
</dependency>

2.2 我们直接使用官方的demo就可以了

1. 后端SpringBoot

官方的demo非常全，开箱即用，官方文档介绍的也很详细，要注意的是控制层三个方法的不通

/get是用来获取图片的，/check是用来进行校验的，/verify是用来进行二次校验的

 @Resourceprivate CaptchaService captchaService;@PostMapping("/get") // 获取图片public ResponseModel get(@RequestBody CaptchaVO data, HttpServletRequest request) {assert request.getRemoteHost()!=null;data.setBrowserInfo(getRemoteId(request));return captchaService.get(data);}@PostMapping("/check") // 进行校验public ResponseModel check(@RequestBody CaptchaVO data, HttpServletRequest request) {data.setBrowserInfo(getRemoteId(request));return captchaService.check(data);}@PostMapping("/verify") // 二次校验public ResponseModel verify(@RequestBody CaptchaVO data, HttpServletRequest request) {return captchaService.verification(data);}public static final String getRemoteId(HttpServletRequest request) {String xfwd = request.getHeader("X-Forwarded-For");String ip = getRemoteIpFromXfwd(xfwd);String ua = request.getHeader("user-agent");if (StringUtils.isNotBlank(ip)) {return ip + ua;}return request.getRemoteAddr() + ua;}private static String getRemoteIpFromXfwd(String xfwd) {if (StringUtils.isNotBlank(xfwd)) {String[] ipList = xfwd.split(",");return StringUtils.trim(ipList[0]);}return null;}

1. 获取验证码接口：http://:/captcha/get

入参：

{"captchaType": "blockPuzzle",  //验证码类型 clickWord"clientUid": "唯一标识"  //客户端UI组件id,组件初始化时设置一次，UUID（非必传参数）
}

回参：

{"repCode": "0000","repData": {"originalImageBase64": "底图base64","point": {    //默认不返回的，校验的就是该坐标信息，允许误差范围"x": 205,"y": 5},"jigsawImageBase64": "滑块图base64","token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识"secretKey": "16位随机字符串", //aes秘钥，开关控制，前端根据此值决定是否加密"result": false,"opAdmin": false},"success": true,"error": false
}

2. 核对验证码接口接口：http://:/captcha/check

入参：

{"captchaType": "blockPuzzle","pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密坐标信息"token": "71dd26999e314f9abb0c635336976635"  //get请求返回的token
}

回参：

{"repCode": "0000","repData": {"captchaType": "blockPuzzle","token": "71dd26999e314f9abb0c635336976635","result": true,"opAdmin": false},"success": true,"error": false
}

2. 前端Vue

1. 兼容性

IE8+、Chrome、Firefox.(其他未测试)

2. 初始化组件

1)复制view/vue/src/components/verifition文件夹,到自己工程对应目录下,在登录页面插入如下代码。

2)安装请求和加密依赖

npm install axios crypto-js -S

3. 基础示例

<template><Verify@success="success" //验证成功的回调函数:mode="pop"     //调用的模式:captchaType="blockPuzzle"    //调用的类型 点选或者滑动:imgSize="{ width: '330px', height: '155px' }" //图片的大小对象ref="verify"></Verify>//mode="pop"模式<button @click="useVerify">调用验证组件</button>
</template>****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()****
****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****<script>
//引入组件
import Verify from "./../../components/verifition/Verify";
export default {name: 'app',components: {Verify}methods:{success(params){// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证},useVerify(){this.$refs.verify.show()}}
}
</script>

4. 回调事件

5. 验证码参数

6. 默认接口api地址