若依微服务版集成 AJ-Captcha（403）

在当前网络环境中，传统验证码已经逐渐难以应对复杂的安全威胁，如恶意注册、撞库攻击等问题。因此，我们需要引入一种更加安全且用户体验更友好的验证方式。AJ-Captcha 滑块验证码通过拖动滑块拼图验证用户身份，既增强了安全性，又提供了流畅的交互体验。

本文将详细讲解如何在 若依微服务版 中集成 AJ-Captcha 滑块验证码功能。

注意事项

模块分离： 将验证码功能独立到一个模块中，避免对其他服务的影响。
Redis 配置： 确保 Redis 兼容 AJ-Captcha 所需的缓存机制。
接口白名单： 确保网关允许滑块验证码接口的匿名访问。

1. 新建 `ruoyi-captcha` 模块

在 ruoyi-modules 目录下新建一个 ruoyi-captcha 模块，并在 pom.xml 文件中添加以下依赖：

<dependency>
    <groupId>com.github.anji-plus</groupId>
    <artifactId>captcha-spring-boot-starter</artifactId>
    <version>1.2.7</version>
</dependency>

2. 配置网关路由和白名单

在网关的 application.yml 文件中添加验证码服务的路由配置，并将相关路径加入白名单：

routes:
  - id: ruoyi-captcha
    uri: lb://ruoyi-captcha
    predicates:
      - Path=/captcha/**
    filters:
      - StripPrefix=1

# 白名单配置
security:
  ignore-urls:
    - /captcha/get
    - /captcha/check
    - /captcha/verify

3. 移除原验证码模块

在集成滑块验证码后，原有验证码功能可以移除，避免重复配置。确认以下操作：

删除原有验证码配置和相关类。
确保登录逻辑修改为滑块验证码的验证逻辑。

4. 编写验证码接口

在 ruoyi-captcha 模块中创建 CaptchaController，实现验证码生成、校验和验证功能：

@RestController
@RequestMapping("/captcha")
public class CaptchaController {

    @Autowired
    private CaptchaService captchaService;

    @PostMapping("/get")
    public ResponseModel getCaptcha(@RequestBody CaptchaVO captchaVO) {
        return captchaService.get(captchaVO);
    }

    @PostMapping("/check")
    public ResponseModel checkCaptcha(@RequestBody CaptchaVO captchaVO) {
        return captchaService.check(captchaVO);
    }

    @PostMapping("/verify")
    public ResponseModel verifyCaptcha(@RequestBody CaptchaVO captchaVO) {
        return captchaService.verification(captchaVO);
    }
}

5. 编写配置类

创建 CaptchaConfig 类，用于定义滑块验证码的配置参数：

@Configuration
public class CaptchaConfig {

    @Bean
    public CaptchaService captchaService() {
        Properties properties = new Properties();
        properties.put(Const.CAPTCHA_TYPE, "blockPuzzle"); // 设置滑块模式
        properties.put(Const.CAPTCHA_CACHE_TYPE, "redis"); // 缓存类型
        properties.put(Const.CAPTCHA_SLIP_OFFSET, "5");    // 验证允许偏移像素
        properties.put(Const.CAPTCHA_WATER_MARK, "MyWaterMark"); // 水印
        return CaptchaServiceFactory.getInstance(properties);
    }
}

6. 实现 Redis 缓存服务

创建 CaptchaCacheServiceRedisImpl，实现 AJ-Captcha 的 Redis 缓存接口：

@Service
public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {

    @Autowired
    private StringRedisTemplate redisTemplate;

    @Override
    public void set(String key, String value, long expiresInSeconds) {
        redisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
    }

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

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

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

7. 修改登录逻辑

在登录服务中添加滑块验证码验证逻辑：

public String login(String username, String password, String captchaCode) {
    CaptchaVO captchaVO = new CaptchaVO();
    captchaVO.setCaptchaVerification(captchaCode);
    ResponseModel response = captchaService.verification(captchaVO);

    if (!response.isSuccess()) {
        throw new CaptchaException("滑块验证码验证失败！");
    }

    // 后续登录逻辑...
}

8. 前端集成滑块验证码

替换登录组件

安装必要的依赖：
```
npm install crypto-js --save
```
修改 views/login.vue 和 api/login.js，集成滑块验证码的逻辑。
将下载的静态资源（滑块背景、滑块组件）放置到 src/assets/captcha 中。

滑块验证码界面

总结

通过集成 AJ-Captcha 滑块验证码，若依微服务版实现了更高安全性和用户友好性的登录验证功能。本次集成操作清晰地分离了模块、优化了安全策略，为系统构建更强的防护能力。

开发喵星球