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

前言

验证码作为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: 8080
  servlet:
    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: localhost
    port: 6379
    password: 123456  # 替换为你的Redis密码
    database: 0
    timeout: 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 {

    @Autowired
    private 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实战教程！