当前位置： 首页 > news >正文

【保姆级教程】基于anji-plus-captcha实现行为验证码（滑动拼图+点选文字），前后端完整代码奉上！

news 2025/7/11 7:13:19

前言

验证码作为Web应用的第一道安全防线，其重要性不言而喻。但你是否还在为以下问题烦恼：

  • 传统字符验证码用户体验差，识别率低？
  • 验证码安全性不足，轻易被爬虫破解？
  • 前后端对接繁琐，集成效率低？

今天给大家推荐一款国产开源神级验证码框架——anji-plus-captcha，它不仅支持滑动拼图、点选文字两种主流验证方式，还提供了Spring Boot原生集成方案，5分钟就能搞定验证码功能！本文将从环境搭建到实战部署，手把手教你实现企业级行为验证码，文末附完整源码。

一、为什么选择anji-plus-captcha？

在介绍实战前，先聊聊这款框架的核心优势，看完你就知道为什么它能成为开源验证码领域的佼佼者：

  1. 双模式支持：同时提供滑动拼图和点选文字两种验证方式，可根据业务场景灵活切换
  2. 开箱即用：提供Spring Boot Starter，零配置快速集成，无需编写冗余代码
  3. 分布式友好：原生支持Redis缓存，轻松应对集群部署，解决session共享问题
  4. 高安全性：基于行为轨迹分析，有效抵御自动化工具攻击，验证码过期自动清理
  5. 高度可定制：支持自定义字体、背景图、验证逻辑，满足个性化需求
  6. 完善文档：提供详尽的官方文档和示例代码，降低学习成本

官网地址：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 自定义字体库

  1. 在src/main/resources目录下创建font文件夹，放入字体文件（如simhei.ttf）
  2. 在application.yml中配置字体路径：
captcha:font-path:- classpath:font/simhei.ttf  # 支持多个字体文件，随机使用

5.2 自定义背景图

  1. 在src/main/resources目录下创建captcha/background文件夹，放入背景图片（jpg/png格式）
  2. 配置自定义背景图：
captcha:# 启用自定义背景图use-custom-background: true# 背景图目录background-image-dir: classpath:captcha/background

六、避坑指南：新手常遇问题解决方案

  1. 后端接口404错误

    • 检查baseUrl是否包含context-path（如/demo/captcha而非/captcha）
    • 确认接口路径是否为/captcha/get、/captcha/check（严格区分大小写）

  2. 验证码图片加载失败

    • 检查Redis是否启动，配置是否正确（cache-type=redis时必须）
    • 查看后端日志，是否有字体文件加载失败的错误（需确保字体文件存在）

  3. 前端报“containerId不存在”

    • mode=pop时，containerId必须与触发按钮的id完全一致
    • 确保初始化代码在DOM加载完成后执行（可放入$(document).ready()中）

  4. 验证成功但业务接口提示“验证码已失效”

    • 检查expire-second配置，避免过期时间过短
    • 确保success回调中及时调用业务接口（验证码过期前）

七、效果演示与源码获取

7.1 点选验证码效果在这里插入图片描述

7.2 滑动验证码效果在这里插入图片描述

7.3 完整源码获取

关注公众号【豌豆哥哥】，回复“验证码”即可获取完整项目源码，包含前后端所有代码和配置文件。

总结

本文详细介绍了如何基于anji-plus-captcha实现企业级行为验证码，从环境搭建到高级定制，涵盖了开发过程中的各个关键环节。这款框架凭借其易用性和强大的功能，非常适合中小型项目快速集成验证码功能。

相比传统验证码，行为验证码在安全性和用户体验上都有明显优势，而anji-plus-captcha则是Java生态中为数不多的优秀开源方案。希望本文能帮助你快速掌握验证码开发技巧，让你的项目安全又好用！

如果觉得本文对你有帮助，别忘了点赞+收藏+关注，后续会分享更多Java实战教程！

http://www.dtcms.com/a/272346.html

相关文章：

  • 人工智能-基础篇-28-模型上下文协议--MCP请求示例（JSON格式，客户端代码，服务端代码等示例）
  • 开源入侵防御系统——CrowdSec
  • Linux 服务器综合性能测试脚本（优化版）结构化分析
  • 若依框架去掉Redis
  • CORESET 0 and SIB1 Scheduling in a Nutshell
  • 论文阅读笔记：VI-Net: Boosting Category-level 6D Object Pose Estimation
  • RocketMQ安装（Windows环境）
  • 上线节点固定，项目进度紧张，如何合理压缩工期
  • NGINX系统基于PHP部署应用
  • 实验作业1＋整理笔记截图
  • 实训八——路由器与交换机与网线
  • 栈题解——有效的括号【LeetCode】两种方法
  • 硬件基础------电感
  • Matplotlib-绘制训练曲线指南
  • 力扣刷题记录（c++）06
  • HTML应用指南：利用GET请求获取全国永辉超市门店位置信息
  • Unity3D iOS闪退问题解决方案
  • PyTorch仿射变换：原理与实战全解析
  • 深入理解Java虚拟机：Java内存区域与内存溢出异常
  • 【运维架构】云计算运维架构师与基础设施，技术路线，Linux证书（标准化/定制化/CNCF，公有云/混合云/私有云）
  • 【图像处理基石】如何入门图像校正？
  • (6)机器学习小白入门 YOLOv:图片的数据预处理
  • 机器学习 YOLOv5手绘电路图识别 手绘电路图自动转换为仿真软件（如LT Spice）可用的原理图，避免人工重绘
  • Spring MVC 1
  • C++中的list的学习
  • Go语言教程-变量、常量、命名规则
  • 亚矩阵云手机破解Maio广告平台多账号风控：从“生存焦虑”到“规模化增长”的终极方案
  • 电路研究9.4——合宙Air780EP的LuatOS、CSDK跟标准AT
  • 基于开源AI大模型AI智能名片S2B2C商城小程序源码的私域流量新生态构建
  • 独立服务器选择Rocky Linux还是CentOS