若依分离版集成 aj-captcha（402）

滑块验证码是一种有效的安全机制，能够有效防止暴力破解和恶意登录行为。本文将介绍如何在若依分离版中集成 aj-captcha 滑块验证码功能，替代传统的文字验证码，从而提升系统的安全性和用户体验。

集成方案概述

aj-captcha 滑块验证码 是一种图形化的验证码技术，通过滑动拼图的方式验证用户身份。其主要特点包括：

交互友好：用户只需滑动滑块完成拼图即可。
安全高效：难以被机器模拟破解。
灵活配置：支持缓存类型选择（如 Redis）和多种验证模式。

若依分离版通过以下五步实现 aj-captcha 的集成：

添加 Maven 依赖。
配置 application.yml 文件。
开放相关接口的匿名访问。
修改登录逻辑，集成滑块验证。
在前端实现滑块验证的界面效果。

实施步骤

1. 引入 Maven 依赖

在 ruoyi-framework/pom.xml 文件中添加以下内容：

<!-- 滑块验证码 -->
<dependency>
    <groupId>com.github.anji-plus</groupId>
    <artifactId>captcha-spring-boot-starter</artifactId>
    <version>1.2.7</version>
</dependency>

<!-- 删除原有 kaptcha 验证码依赖（可选） -->

此依赖包提供了 aj-captcha 的后端功能支持。

2. 配置 `application.yml`

打开 ruoyi-admin/src/main/resources/application.yml 文件，新增以下配置：

# 滑块验证码配置
aj:
   captcha:
      # 缓存类型（可选 redis、local 等）
      cache-type: redis
      # 验证类型：滑块拼图（blockPuzzle）或文字点选（clickWord）
      type: blockPuzzle
      # 水印文字（显示在图片右下角）
      water-mark: ruoyi.vip
      # 滑动拼图允许误差（像素）
      slip-offset: 5
      # 是否启用 AES 加密
      aes-status: true
      # 验证码干扰选项（0：无干扰，1：简单，2：复杂）
      interference-options: 2

此外，需要在 ruoyi-admin/src/main/resources/META-INF/services 目录下创建 com.anji.captcha.service.CaptchaCacheService 文件，并设置内容为：

com.ruoyi.framework.web.service.CaptchaRedisService

这一步是为了使用 Redis 作为验证码的缓存方式。

3. 配置匿名访问接口

在 SecurityConfig 文件中，配置允许匿名访问的接口：

.antMatchers("/login", "/captcha/get", "/captcha/check").permitAll()

该配置确保验证码相关接口可以在用户未登录的情况下正常调用。

4. 修改相关类

（1）移除无用的验证码类

删除以下与传统文字验证码相关的类：

ruoyi-admin/com/ruoyi/web/controller/common/CaptchaController.java
ruoyi-framework/com/ruoyi/framework/config/CaptchaConfig.java
ruoyi-framework/com/ruoyi/framework/config/KaptchaTextCreator.java

（2）更新登录控制器

修改 ruoyi-admin/com/ruoyi/web/controller/system/SysLoginController.java 中的登录方法：

@PostMapping("/login")
public AjaxResult login(@RequestBody LoginBody loginBody) {
    AjaxResult ajax = AjaxResult.success();
    // 调用登录服务生成令牌
    String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode());
    ajax.put(Constants.TOKEN, token);
    return ajax;
}

（3）修改登录校验逻辑

在 ruoyi-framework/com/ruoyi/framework/web/service/SysLoginService.java 中新增滑块验证码校验逻辑：

@Autowired
@Lazy
private CaptchaService captchaService;

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();
    }

    // 用户认证逻辑省略...

    // 生成 Token
    return tokenService.createToken(loginUser);
}

（4）自定义 Redis 验证码服务

新增 CaptchaRedisService.java，作为 Redis 缓存的自定义实现：

package com.ruoyi.framework.web.service;

import java.util.concurrent.TimeUnit;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import com.anji.captcha.service.CaptchaCacheService;

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);
    }

    @Override
    public boolean exists(String key) {
        return stringRedisTemplate.hasKey(key);
    }

    @Override
    public void delete(String key) {
        stringRedisTemplate.delete(key);
    }

    @Override
    public String get(String key) {
        return stringRedisTemplate.opsForValue().get(key);
    }

    @Override
    public Long increment(String key, long val) {
        return stringRedisTemplate.opsForValue().increment(key, val);
    }

    @Override
    public String type() {
        return "redis";
    }
}

5. 前端集成滑块验证码

下载前端滑块验证码资源包ruoyi-vue/集成滑动验证码.zip：
链接🔗：https://pan.baidu.com/s/1ehq5JKJqOb1nB26V8DYC1w?pwd=meow
提取码：meow

将解压后的内容添加到 ruoyi-ui 项目中，并更新登录页面逻辑，确保与后端滑块验证码服务接口对接。

效果验证

启动项目，访问登录页面。以下是运行效果：

滑块验证界面：
用户点击登录按钮后，页面会弹出滑块验证码，要求完成拼图验证。
滑块验证成功：
验证成功后，用户可以继续完成登录。
异常提示：
如果验证码错误或超时，系统会提示用户重新验证。

总结

通过集成 aj-captcha，若依分离版的登录功能获得了更高的安全性和交互友好性。滑块验证码不仅防范了恶意登录，还提升了用户体验，是一项值得推广的功能改进。

开发喵星球