前言：行为验证码采用嵌入式集成方式，接入方便，安全，高效。抛弃了传统字符型验证码展示-填写字符-比对答案的流程，采用验证码展示-采集用户行为-分析用户行为流程，用户只需要产生指定的行为轨迹，不需要键盘手动输入，极大优化了传统验证码用户体验不佳的问题；同时，快速、准确的返回人机判定结果。
行为验证码 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是用来进行二次校验的
@Resource
private 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. 回调事件
| 参数 | 类型 | 说明 |
|---|---|---|
| success(params) | funciton | 验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数 |
| error | funciton | 验证码匹配失败后的回调函数 |
| ready | funciton | 验证码初始化成功的回调函数 |
5. 验证码参数
| 参数 | 类型 | 说明 |
|---|---|---|
| captchaType | String | 1）滑动拼图 blockPuzzle 2）文字点选 clickWord |
| mode | String | 验证码的显示方式，弹出式pop，固定fixed，默认：mode : ‘pop’ |
| vSpace | String | 验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，默认:vSpace:5 |
| explain | String | 滑动条内的提示，不设置默认是：‘向右滑动完成验证’ |
| imgSize | Object | 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘400px’,height:‘200px’} |
6. 默认接口api地址
| 请求URL | 请求方式 |
|---|---|
| /captcha/get | Post |
| /captcha/check | Post |