【保姆级教程】基于anji-plus-captcha实现行为验证码(滑动拼图+点选文字),前后端完整代码奉上!
前言
验证码作为Web应用的第一道安全防线,其重要性不言而喻。但你是否还在为以下问题烦恼:
- 传统字符验证码用户体验差,识别率低?
- 验证码安全性不足,轻易被爬虫破解?
- 前后端对接繁琐,集成效率低?
今天给大家推荐一款国产开源神级验证码框架——anji-plus-captcha,它不仅支持滑动拼图、点选文字两种主流验证方式,还提供了Spring Boot原生集成方案,5分钟就能搞定验证码功能!本文将从环境搭建到实战部署,手把手教你实现企业级行为验证码,文末附完整源码。
一、为什么选择anji-plus-captcha?
在介绍实战前,先聊聊这款框架的核心优势,看完你就知道为什么它能成为开源验证码领域的佼佼者:
- 双模式支持:同时提供滑动拼图和点选文字两种验证方式,可根据业务场景灵活切换
- 开箱即用:提供Spring Boot Starter,零配置快速集成,无需编写冗余代码
- 分布式友好:原生支持Redis缓存,轻松应对集群部署,解决session共享问题
- 高安全性:基于行为轨迹分析,有效抵御自动化工具攻击,验证码过期自动清理
- 高度可定制:支持自定义字体、背景图、验证逻辑,满足个性化需求
- 完善文档:提供详尽的官方文档和示例代码,降低学习成本
官网地址:https://ajcaptcha.beliefteam.cn/captcha-doc/captchaDoc/html.html
开源仓库:https://gitee.com/belief-team/captcha(星标1.2k+)
二、环境准备与依赖引入
2.1 开发环境
- JDK 1.8+
- Spring Boot 2.3.x ~ 2.7.x(亲测兼容)
- Maven 3.6+
- Redis 6.0+(可选,分布式部署需用到)
2.2 引入依赖
在pom.xml
中添加核心依赖,Spring Boot项目无需额外配置:
<!-- anji-plus-captcha 核心依赖 -->
<dependency><groupId>com.anji-plus</groupId><artifactId>captcha-spring-boot-starter</artifactId><version>1.4.0</version> <!-- 最新稳定版 -->
</dependency><!-- Spring Boot Web -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency><!-- Redis依赖(分布式部署必选) -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
三、后端实战:5分钟搭建验证码服务
3.1 核心配置(application.yml)
server:port: 8080servlet:context-path: /demo# 验证码核心配置
captcha:# 缓存类型:memory(内存)、redis(分布式)cache-type: redis# 验证码类型:blockPuzzle(滑动拼图)、clickWord(点选文字)mode: clickWord# 点选文字数量(仅clickWord模式有效)click-word-count: 3# 容错率(0-1之间,值越大容错性越强)accuracy: 0.8# 图片宽度(px)width: 350# 图片高度(px)height: 200# 验证码过期时间(秒)expire-second: 120# Redis配置(cache-type=redis时必填)
spring:redis:host: localhostport: 6379password: 123456 # 替换为你的Redis密码database: 0timeout: 2000ms
3.2 后端接口实现(官方标准接口)
根据官网文档,anji-plus-captcha定义了3个核心接口,我们只需编写控制器暴露这些接口即可:
package com.example.captcha.controller;import com.anji.captcha.model.common.ResponseModel;
import com.anji.captcha.model.vo.CaptchaVO;
import com.anji.captcha.service.CaptchaService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** 验证码控制器(遵循官方接口规范)*/
@RestController
@RequestMapping("/captcha")
public class CaptchaController {@Autowiredprivate CaptchaService captchaService;/*** 1. 获取验证码(官方标准接口)* 请求URL:/captcha/get* 请求方式:POST*/@PostMapping("/get")public ResponseModel getCaptcha(@RequestBody CaptchaVO captchaVO) {return captchaService.getCaptcha(captchaVO);}/*** 2. 校验验证码(官方标准接口)* 请求URL:/captcha/check* 请求方式:POST*/@PostMapping("/check")public ResponseModel checkCaptcha(@RequestBody CaptchaVO captchaVO) {return captchaService.check(captchaVO);}/*** 3. 二次验证(可选,用于业务接口最终校验)* 请求URL:/captcha/verify* 请求方式:POST*/@PostMapping("/verify")public ResponseModel verifyCaptcha(@RequestBody CaptchaVO captchaVO) {return captchaService.verification(captchaVO);}
}
关键说明:
- 接口路径严格遵循官网规范:
/captcha/get
、/captcha/check
、/captcha/verify
- 无需编写Service层代码,框架已通过
CaptchaService
提供了所有核心实现 ResponseModel
为框架统一响应对象,包含success
(是否成功)、msg
(提示信息)、data
(业务数据)
四、前端实战:jQuery集成指南(附完整代码)
前端集成是很多开发者容易踩坑的地方,按照官网规范,需使用框架提供的专用JS库,而非普通AJAX请求。
4.1 引入前端资源
<!-- 基础依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><!-- 验证码核心资源(必须按此顺序引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anji-plus/captcha@1.4.0/dist/css/verify.css">
<script src="https://cdn.jsdelivr.net/npm/@anji-plus/captcha@1.4.0/dist/js/crypto-js.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@anji-plus/captcha@1.4.0/dist/js/aes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@anji-plus/captcha@1.4.0/dist/js/verify.js"></script>
4.2 点选文字验证码实现(弹出模式)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>点选文字验证码示例</title><!-- 引入资源(同上) -->
</head>
<body><h3>点选文字验证码(弹出模式)</h3><!-- 验证码容器 --><div id="pointCaptchaContainer"></div><!-- 触发按钮(弹出模式必备) --><button id="pointVerifyBtn" style="padding: 10px 20px; margin-top: 20px;">点击验证</button><script>// 初始化点选验证码(弹出模式)$('#pointCaptchaContainer').pointsVerify({// 后端接口基础地址(必须与后端context-path一致)baseUrl: '/demo/captcha',// 显示模式:pop(弹出式)、fixed(固定式)mode: 'pop',// 弹出模式触发按钮ID(必须与按钮id一致)containerId: 'pointVerifyBtn',// 图片尺寸imgSize: {width: '350px',height: '200px'},// 验证成功回调success: function(params) {console.log('验证成功,返回参数:', params);alert('验证成功!二次验证参数:' + params.captchaVerification);// 此处可调用业务接口,将params.captchaVerification传递给后端进行二次校验// $.post('/demo/login', {// username: 'test',// password: '123',// captchaVerification: params.captchaVerification// }, function(res) { ... });},// 验证失败回调error: function() {alert('验证失败,请重试!');},// 验证码加载完成回调ready: function() {console.log('点选验证码初始化完成');}});</script>
</body>
</html>
4.3 滑动拼图验证码实现(固定模式)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>滑动拼图验证码示例</title><!-- 引入资源(同上) -->
</head>
<body><h3>滑动拼图验证码(固定模式)</h3><!-- 验证码容器(固定模式直接显示在此处) --><div id="slideCaptchaContainer" style="margin-top: 20px;"></div><script>// 初始化滑动验证码(固定模式)$('#slideCaptchaContainer').slideVerify({baseUrl: '/demo/captcha',mode: 'fixed',// 滑动条提示文字explain: '向右滑动完成验证',// 图片尺寸imgSize: {width: '350px',height: '200px'},// 滑动条尺寸barSize: {width: '350px',height: '40px'},// 验证成功回调success: function(params) {console.log('滑动验证成功,返回参数:', params);alert('滑动验证成功!');},// 验证失败回调error: function() {alert('滑动失败,请重试!');}});</script>
</body>
</html>
前端核心配置说明:
baseUrl
必须包含后端context-path
(如示例中的/demo
),否则会出现404错误mode
为pop
时,containerId
必须与触发按钮的id
一致success
回调中的params.captchaVerification
是二次验证的关键参数,需传递给业务接口
五、高级特性:自定义验证码资源
5.1 自定义字体库
- 在
src/main/resources
目录下创建font
文件夹,放入字体文件(如simhei.ttf
) - 在
application.yml
中配置字体路径:
captcha:font-path:- classpath:font/simhei.ttf # 支持多个字体文件,随机使用
5.2 自定义背景图
- 在
src/main/resources
目录下创建captcha/background
文件夹,放入背景图片(jpg/png格式) - 配置自定义背景图:
captcha:# 启用自定义背景图use-custom-background: true# 背景图目录background-image-dir: classpath:captcha/background
六、避坑指南:新手常遇问题解决方案
-
后端接口404错误
- 检查
baseUrl
是否包含context-path
(如/demo/captcha
而非/captcha
) - 确认接口路径是否为
/captcha/get
、/captcha/check
(严格区分大小写)
- 检查
-
验证码图片加载失败
- 检查Redis是否启动,配置是否正确(
cache-type=redis
时必须) - 查看后端日志,是否有字体文件加载失败的错误(需确保字体文件存在)
- 检查Redis是否启动,配置是否正确(
-
前端报“containerId不存在”
mode=pop
时,containerId
必须与触发按钮的id
完全一致- 确保初始化代码在DOM加载完成后执行(可放入
$(document).ready()
中)
-
验证成功但业务接口提示“验证码已失效”
- 检查
expire-second
配置,避免过期时间过短 - 确保
success
回调中及时调用业务接口(验证码过期前)
- 检查
七、效果演示与源码获取
7.1 点选验证码效果
7.2 滑动验证码效果
7.3 完整源码获取
关注公众号【豌豆哥哥】,回复“验证码”即可获取完整项目源码,包含前后端所有代码和配置文件。
总结
本文详细介绍了如何基于anji-plus-captcha实现企业级行为验证码,从环境搭建到高级定制,涵盖了开发过程中的各个关键环节。这款框架凭借其易用性和强大的功能,非常适合中小型项目快速集成验证码功能。
相比传统验证码,行为验证码在安全性和用户体验上都有明显优势,而anji-plus-captcha则是Java生态中为数不多的优秀开源方案。希望本文能帮助你快速掌握验证码开发技巧,让你的项目安全又好用!
如果觉得本文对你有帮助,别忘了点赞+收藏+关注,后续会分享更多Java实战教程!