Java集成行为验证码AJ-Captcha

蔚落 2024-04-03 14:19 72阅读 0赞

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

> 行为验证码 AJ-Captcha

Githu地址： [Githu地址][Githu]  
码云地址： [码云地址][Link 1]  
文档地址： [文档地址][Link 2]

### 1、验证码类型包括两种 ###

**滑块验证码**  
![在这里插入图片描述][2d47f90e3e524d329630bdaace704d3c.png]

**文字验证码**  
![在这里插入图片描述][f696cd6ff1c14433a830665dfc826c62.png]

### 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. 回调事件 ######

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>success(params)</td> 
   <td>funciton</td> 
   <td>验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>funciton</td> 
   <td>验证码匹配失败后的回调函数</td> 
  </tr> 
  <tr> 
   <td>ready</td> 
   <td>funciton</td> 
   <td>验证码初始化成功的回调函数</td> 
  </tr> 
 </tbody> 
</table>

###### 5. 验证码参数 ######

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>captchaType</td> 
   <td>String</td> 
   <td>1）滑动拼图 blockPuzzle 2）文字点选 clickWord</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>验证码的显示方式，弹出式pop，固定fixed，默认：mode : ‘pop’</td> 
  </tr> 
  <tr> 
   <td>vSpace</td> 
   <td>String</td> 
   <td>验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，默认:vSpace:5</td> 
  </tr> 
  <tr> 
   <td>explain</td> 
   <td>String</td> 
   <td>滑动条内的提示，不设置默认是：‘向右滑动完成验证’</td> 
  </tr> 
  <tr> 
   <td>imgSize</td> 
   <td>Object</td> 
   <td>其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘400px’,height:‘200px’}</td> 
  </tr> 
 </tbody> 
</table>

###### 6. 默认接口api地址 ######

<table> 
 <thead> 
  <tr> 
   <th>请求URL</th> 
   <th>请求方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/captcha/get</td> 
   <td>Post</td> 
  </tr> 
  <tr> 
   <td>/captcha/check</td> 
   <td>Post</td> 
  </tr> 
 </tbody> 
</table>

[Githu]: https://github.com/anji-plus/captcha
[Link 1]: https://gitee.com/anji-plus/captcha
[Link 2]: https://captcha.anji-plus.com/#
[2d47f90e3e524d329630bdaace704d3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9d5285dddc2e4b919a699854f828b275.png
[f696cd6ff1c14433a830665dfc826c62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7259988542154af8be731872cb7d465d.png