【保姆級教程】基于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時必須）
- 查看后端日志，是否有字體文件加載失敗的錯誤（需確保字體文件存在）
前端報“containerId不存在”
- mode=pop時，containerId必須與觸發按鈕的id完全一致
- 確保初始化代碼在DOM加載完成后執行（可放入$(document).ready()中）
驗證成功但業務接口提示“驗證碼已失效”
- 檢查expire-second配置，避免過期時間過短
- 確保success回調中及時調用業務接口（驗證碼過期前）