集成 AJ-Captcha 实现滑块验证码

在前后端分离的系统中，滑块验证码可以有效地防止恶意登录请求，提高系统的安全性。以下是如何在若依项目中集成 AJ-Captcha 实现滑块验证码的详细步骤。

1. 在 pom.xml 中添加依赖

首先，需要在 ruoyi-framework/pom.xml 中添加 AJ-Captcha 的依赖。AJ-Captcha 是一个支持滑动拼图和文字点选两种验证码形式的库。

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

<!-- 如果不需要原有的 kaptcha 验证码，可以删除对应的依赖 -->

2. 配置 application.yml

在 ruoyi-admin 模块的 application.yml 中添加 AJ-Captcha 的相关配置，以启用滑块验证码并设置相关参数。

# 滑块验证码配置
aj:
  captcha:
    cache-type: redis          # 使用 Redis 作为缓存
    type: blockPuzzle          # 验证码类型，可选 blockPuzzle(滑块) 或 clickWord(文字点选)
    water-mark: ruoyi.vip      # 水印文字
    slip-offset: 5             # 滑动偏移量，默认5像素
    aes-status: true           # 启用 AES 加密
    interference-options: 2    # 干扰项级别，0/1/2

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

com.ruoyi.framework.web.service.CaptchaRedisService

3. 配置匿名访问路径

在 SecurityConfig.java 中允许匿名访问滑块验证码的相关接口：

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

4. 修改相关类

1. 移除不需要的类：

   • CaptchaController.java
   • CaptchaConfig.java
   • KaptchaTextCreator.java

2. 修改 SysLoginController.java： 更新 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. 修改 SysLoginService.java： 在 SysLoginService.java 中添加验证码验证逻辑。

@Component
public class SysLoginService {
    ...

    @Autowired
    @Lazy
    private CaptchaService captchaService;

    public String login(String username, String password, String code) {
        // 验证码校验
        validateCaptcha(username, code);
        ...
    }

    private void validateCaptcha(String username, String code) {
        CaptchaVO captchaVO = new CaptchaVO();
        captchaVO.setCaptchaVerification(code);
        ResponseModel response = captchaService.verification(captchaVO);
        if (!response.isSuccess()) {
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
            throw new CaptchaException();
        }
    }

    ...
}

4. 新增 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. 前端集成滑动验证码

下载并集成前端滑动验证码插件，使用以下链接下载前端插件并覆盖到项目中：

插件相关包和代码实现: 滑动验证码.zip (opens new window) 提取码: mjs7

在前端页面的登录组件中集成滑动验证码模块，确保验证码验证通过后再提交登录请求。

1. 安装 crypto-js 依赖包

• 你可以通过以下命令安装 crypto-js：

npm install crypto-js --save

或者，如果你使用的是 Yarn：

yarn add crypto-js

2. 检查 package.json 中的依赖

• 安装完成后，检查你的 package.json 文件，确认 crypto-js 已被添加到项目依赖中：

{
  "dependencies": {
    "crypto-js": "^4.0.0"  // 示例版本号，实际版本可能不同
  }
}

3. 重新编译项目

• 安装完依赖后，重新编译你的项目：

npm run serve

或者：

yarn serve

4. 检查代码中对 crypto-js 的引用

• 确保在 ase.js 文件中对 crypto-js 的引用是正确的：

import CryptoJS from 'crypto-js';