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是用来进行二次校验的

 @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为返回需回传服务器的二次验证参数
errorfunciton验证码匹配失败后的回调函数
readyfunciton验证码初始化成功的回调函数
5. 验证码参数
参数类型说明
captchaTypeString1)滑动拼图 blockPuzzle 2)文字点选 clickWord
modeString验证码的显示方式,弹出式pop,固定fixed,默认:mode : ‘pop’
vSpaceString验证码图片和移动条容器的间隔,默认单位是px。如:间隔为5px,默认:vSpace:5
explainString滑动条内的提示,不设置默认是:‘向右滑动完成验证’
imgSizeObject其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:‘400px’,height:‘200px’}
6. 默认接口api地址
请求URL请求方式
/captcha/getPost
/captcha/checkPost
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值