anji-plus / AJ-Captcha行为验证码前后端实现

AJ-Captcha是一个行为验证码系统,提供滑动拼图和文字点选两种方式,支持弹出和嵌入式UI。它基于Java后端,有多种前端示例代码,如php、angular、html、vue等。验证码流程优化了用户体验,无需手动输入,提高安全性与效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,简介及源码、文档地址

        AJ-Captcha行为验证码,包含滑动拼图、文字点选两种方式,UI支持弹出和嵌入两种方式。后端提供Java实现,前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。

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

Github源码地址:GitHub - anji-plus/captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现Gg行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现 - GitHub - anji-plus/captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现https://github.com/anji-plus/captcha

Gitee源码地址:

AJ-Captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现https://gitee.com/anji-plus/captchaCaptcha文档地址:

功能概述 | AJ-Captchaanji-plusicon-default.png?t=N3I4https://ajcaptcha.beliefteam.cn/captcha-doc/

        目前对外提供两种类型的验证码,其中包含滑动拼图、文字点选。如图1.1、1。2所示。若希望不影响原UI布局,可采用弹出式交互。
   后端基于Java实现,提供纯Java.jar和SpringBoot Starter。前端提供了Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php等多端示例。

                                                         图1.1

                                                         图1.2

二,引用方式

2.1,后端引入

        1,添加依赖,引入jar包,已上传maven仓库

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

        2,可以使用官方的demo,后端提供了四种实现方案go语言、php语言、sprintboot方式、sprintmvc方式,可以根据自己项目的情况进行选择使用。

        主要有三个方法,

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

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

                二次校验接口:

captchaService.verification(captchaVO)

        后台代码直接调用对应方法即可

@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;
    }
  • 获取验证码接口: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
}
  • 核对验证码接口接口: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.2 前端引入

前端支持的类型更多,包括android、angular、flutter、html、ios、php、react、uni-app、wx-applet、vue,根据自己项目的实际情况进行选用

本文以uni-app为例

# 兼容性

微信小程序,H5页面等(uni-app支持的小程序系系列,H5系列)

# 初始化组件

1)将view/uni-app/src/pages/verify文件夹copy到自己项目中

2)下载相关依赖, npm install crypto-js -S

# 基础示例

<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()**** <br/>
****注: 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>
</script>

# 注意事项

后端请求地址根据部署情况到:\view\uni-app\src\pages\verify\utils\request.js  第二行 修改路劲
let baseUrl = "https://captcha.anji-plus.com/captcha-api"

# 回调事件

参数类型说明
success(params)funciton验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数
errorfunciton验证码匹配失败后的回调函数
readyfunciton验证码初始化成功的回调函数

# 验证码参数

参数类型说明
captchaTypeString1)滑动拼图 blockPuzzle 2)文字点选 clickWord
modeString验证码的显示方式,弹出式pop,固定fixed,默认:mode : ‘pop’
vSpaceString验证码图片和移动条容器的间隔,默认单位是px。如:间隔为5px,默认:vSpace:5
explainString滑动条内的提示,不设置默认是:'向右滑动完成验证'
imgSizeObject其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:'400px',height:'200px'}

# 默认接口api地址

请求URL请求方式
/captcha/getPost
/captcha/checkPost

 

### 在 Vue3 中集成 AJ-Captcha 的方法 要在 Vue3 项目中集成 AJ-Captcha 行为验证码插件,可以按照以下内容操作: #### 1. 安装必要的依赖项 为了支持 AJAX 请求以及数据加密功能,需要安装 `axios` 和 `crypto-js` 这两个库。 ```bash npm install axios crypto-js -S ``` 此命令会将这两个依赖添加到项目的 `package.json` 文件中[^4]。 --- #### 2. 下载并配置前端资源文件 从 AJ-Captcha 的开源仓库下载完整的项目压缩包 (`captcha-master.zip`) 并解压。随后,将其中的图像资源目录 `\captcha-master\view\vue\src\assets\image` 复制到当前 Vue3 项目的相应路径下[^2]。 --- #### 3. 调整 Axios 默认基础 URL 在 `verifition/utils/axios.js` 文件中,默认的基础 API 地址可能不符合实际需求。因此需将其调整为适合本地开发环境或其他部署场景下的地址,例如: ```javascript import axios from 'axios'; // 设置全局默认基础 URL axios.defaults.baseURL = "http://127.0.0.1/api"; export default axios; ``` 如果存在其他自定义设置(如超时时间),也可以在此处一并完成配置[^2]。 --- #### 4. 创建验证组件实例 以下是基于 Vue3 组件化设计的一个完整示例代码片段,展示如何通过 `<Verify>` 标签来加载滑块或点击文字类型的验证码界面[^5]。 ```vue <template> <!-- 验证码显示区域 --> <Verify @success="handleSuccess" /* 成功后的回调 */ :mode="'pop'" /* 显示模式:弹窗 (pop) 或固定位置 (fixed) */ :captchaType="'blockPuzzle'" /* 类型选择:滑动拼图 (blockPuzzle) 或者 文字点选 (clickWord) */ :imgSize="{width:'330px',height:'155px'}" ref="verifyComponent"> </Verify> <!-- 手动触发按钮 --> <button type="button" class="btn btn-primary" @click="triggerVerification">启动验证</button> </template> <script> /* 导入外部模块 */ import Verify from '@/components/verifition/Verify.vue'; // 自定义验证组件路径 import CryptoJS from 'crypto-js'; import axios from '@/utils/axios'; // 已经预设好 baseURL 的 Axios 实例 export default { name: 'CaptchaExample', components: { Verify }, data() { return {}; }, methods: { triggerVerification() { this.$refs.verifyComponent.show(); // 主动调用 show 方法打开弹窗 }, handleSuccess(responseParams) { console.log('二次校验返回参数:', responseParams); // 将这些额外的安全令牌附加至登录表单提交过程中... let encryptedToken = CryptoJS.MD5(JSON.stringify(responseParams)).toString(); axios.post('/auth/login', { token: encryptedToken }) .then(res => alert(`登录状态更新成功! ${res.data}`)) .catch(err => alert('服务器错误')); } } }; </script> <style scoped> .btn { margin-top: 20px; } </style> ``` 注意: - **`:mode="'pop'"`** 参数表示采用弹出窗口形式呈现验证码;如果是固定的,则应改为 `"fixed"`。 - **`:captchaType="'blockPuzzle'"`** 意味着启用的是滑动拼图样式,而另一种选项则是 `'clickWord'` 即文字点选方式[^5]。 --- #### 5. 后端 Spring Boot 支持 确保后端已正确集成了 AJ-Captcha 库,并开放了 `/captcha/get`, `/captcha/check` 接口供前端调用。具体做法可参照官方文档说明,在 Maven 构建工具里加入如下依赖声明[^3]: ```xml <dependency> <groupId>com.anji-plus</groupId> <artifactId>captcha</artifactId> <version>1.3.0</version> </dependency> ``` 同时允许匿名访问相关资源路径以便正常获取图形素材和执行逻辑判断: ```java .antMatchers("/login", "/register", "/captcha/get", "/captcha/check", "/captchaEnabled").permitAll() ``` --- ### 总结 以上就是在 Vue3 环境下实现 AJ-Captcha 插件的具体流程与注意事项。它涵盖了从前端初始化、交互处理直至后端服务对接的关键环节[^1][^3][^4][^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King·Forward

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值