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

告别传统验证码！手把手教你为若依(RuoYi)系统换上AJ-Captcha滑块验证码（Spring Boot 2.x + Vue 3）

news 2026/5/11 23:05:22

若依系统集成AJ-Captcha滑块验证码全流程实战指南

1. 为什么需要替换传统验证码？

登录验证是每个系统必不可少的安全屏障，但传统字符验证码的弊端日益凸显。字符扭曲、模糊不清的图片让用户频频抱怨，输入错误后的刷新流程更是令人抓狂。根据用户体验研究数据，超过40%的用户在遇到难以识别的验证码时会选择放弃登录。

AJ-Captcha带来的改变是革命性的：

交互友好：只需简单滑动即可完成验证
安全升级：行为验证能有效区分人机操作
适配灵活：支持多种验证模式（拼图/点选）
性能优化：服务端验证压力降低30%+

提示：选择blockPuzzle（滑块拼图）模式时，建议将slip-offset设为8-10像素以获得最佳用户体验与安全平衡。

2. 环境准备与依赖调整

2.1 后端依赖配置

首先在ruoyi-framework/pom.xml中进行依赖调整：

<!-- 移除旧验证码依赖 --> <!-- <dependency> <groupId>com.google.code.kaptcha</groupId> <artifactId>kaptcha</artifactId> </dependency> --> <!-- 新增AJ-Captcha依赖 --> <dependency> <groupId>com.github.anji-plus</groupId> <artifactId>captcha-spring-boot-starter</artifactId> <version>1.2.7</version> </dependency>

关键配置参数说明：

参数	建议值	说明
cache-type	redis	必须与系统缓存类型一致
type	blockPuzzle	推荐使用滑块模式
slip-offset	8	像素容错值
aes-status	true	启用坐标加密
water-mark	公司标识	防止恶意抓取

2.2 Redis缓存服务实现

创建CaptchaRedisService.java实现缓存接口：

public class CaptchaRedisService implements CaptchaCacheService { @Autowired private StringRedisTemplate stringRedisTemplate; @Override public void set(String key, String value, long expiresInSeconds) { stringRedisTemplate.opsForValue() .set(key, value, expiresInSeconds, TimeUnit.SECONDS); } // 其他接口方法实现... }

3. 安全配置与核心逻辑改造

3.1 Spring Security调整

在SecurityConfig中开放验证码接口：

@Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/login", "/captcha/**").permitAll() // 其他配置保持不变... }

3.2 登录验证逻辑重构

修改SysLoginService.java的核心验证逻辑：

public String login(String username, String password, String code) { // 验证码校验 CaptchaVO captchaVO = new CaptchaVO(); captchaVO.setCaptchaVerification(code); ResponseModel response = captchaService.verification(captchaVO); if (!response.isSuccess()) { throw new CaptchaException(); } // 原有用户名密码验证逻辑... }

常见问题处理：

验证通过但返回captcha error：检查Redis连接和序列化配置
滑动后立即失效：确认缓存过期时间设置（建议≥2分钟）
跨域问题：确保Nginx配置了/captcha/**路径转发

4. 前端集成实战

4.1 Vue组件集成步骤

安装加密依赖：

npm install crypto-js --save-dev

替换登录页面关键逻辑：

// 获取验证码 export function getCodeImg() { return request({ url: '/captcha/get' }) } // 提交验证 export function checkCode(data) { return request({ url: '/captcha/check', method: 'post', data: data }) }

4.2 滑动组件事件处理

<template> <div @click="handleCaptchaClick"> <slide-verify :slider-text="text" @success="onSuccess" @fail="onFail" /> </div> </template> <script> export default { methods: { onSuccess(params) { this.loginForm.captchaVerification = params // 触发登录提交 } } } </script>

性能优化技巧：