前言

验证码作为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时必须）
- 查看后端日志，是否有字体文件加载失败的错误（需确保字体文件存在）
前端报“containerId不存在”
- mode=pop时，containerId必须与触发按钮的id完全一致
- 确保初始化代码在DOM加载完成后执行（可放入$(document).ready()中）
验证成功但业务接口提示“验证码已失效”
- 检查expire-second配置，避免过期时间过短
- 确保success回调中及时调用业务接口（验证码过期前）