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