05-若依使用AJ-captcha验证

准备资料：

若依版本： ruoyi-vue 3.8.2 【点我去下载】
aj-captcha版本：1.3.0 【去下源码】
参考：若依官方文档-集成aj-captcha

开始

若依vue版本的验证码用了数学运算，还得手工输入计算结果。看了官方文档，改成了目前比较流行的拖动滑块方式。

1.引入MAVEN依赖

若依官方引入的是1.2.7版本。我选择了目前最常用的1.3.0版本。
在项目中给的 ruoyi-frameworkpom.xml 添加依赖


    
        com.anji-plus
        spring-boot-starter-captcha
        1.3.0

2.修改application.yml，加入aj-captcha配置

在ruoyi-admin模块中的application.yml中添加aj-captcha配置

# 滑块验证码
aj:
   captcha:
      # 缓存类型
      cache-type: redis
      # blockPuzzle 滑块 clickWord 文字点选  default默认两者都实例化
      type: blockPuzzle
      # 右下角显示字
      water-mark: ruoyi.vip
      # 校验滑动拼图允许误差偏移量(默认5像素)
      slip-offset: 5
      # aes加密坐标开启或者禁用(true|false)
      aes-status: true
      # 滑动干扰项(0/1/2)
      interference-options: 2

这只是基础配置，可以参考aj-captcha详细配置选择自己想用的参数。

3.添加实现类指向设置

在ruoyi-adminsrcmainresourcesMETA-INFservices下创建com.anji.captcha.service.CaptchaCacheService文件同时设置文件内容为：

com.ruoyi.framework.web.service.CaptchaRedisService

4.在SecurityConfig中设置aj-captcha匿名访问权限

在 ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java 文件中configure方法下的httpSecurity添加如下语句：

.antMatchers("/captcha/get", "/captcha/check").anonymous()

5.修改后台实现代码

若依官方文档让修改 ruoyi-admincomruoyiwebcontrollersystemSysLoginController.java，如果使用的是我提到的若依版本，不用修改，官方的文档参考的若依版本可能比较低吧。。

大家在修改代码时，切记不要按照文档官方文档直接覆盖，建议使用文本比较工具将代码进行比对后只更新相关内容，这也是开发人员的良好习惯！！！！

修改ruoyi-frameworkcomruoyiframeworkwebserviceSysLoginService.java
抽离改动点比较麻烦，大家自行去比对吧。主要改动login方法。

package com.ruoyi.framework.web.service;

import javax.annotation.Resource;

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.context.annotation.Lazy;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.BadCredentialsException;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Component;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.exception.user.CaptchaException;
import com.ruoyi.common.exception.user.CaptchaExpireException;
import com.ruoyi.common.exception.user.UserPasswordNotMatchException;
import com.ruoyi.common.utils.DateUtils;
import com.ruoyi.common.utils.MessageUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.common.utils.ServletUtils;
import com.ruoyi.common.utils.ip.IpUtils;
import com.ruoyi.framework.manager.AsyncManager;
import com.ruoyi.framework.manager.factory.AsyncFactory;
import com.ruoyi.system.service.ISysConfigService;
import com.ruoyi.system.service.ISysUserService;


@Component
public class SysLoginService
{
    @Autowired
    private TokenService tokenService;

    @Resource
    private AuthenticationManager authenticationManager;

    @Autowired
    private RedisCache redisCache;


    @Autowired
    private ISysUserService userService;

    @Autowired
    private ISysConfigService configService;

    @Autowired
    @Lazy
    private CaptchaService captchaService;
    
    public String login(String username, String password, String code, String uuid)
    {
        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();
        }
        
        // 用户验证
        Authentication authentication = null;
        try
        {
            // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
            authentication = authenticationManager
                    .authenticate(new UsernamePasswordAuthenticationToken(username, password));
        }
        catch (Exception e)
        {
            if (e instanceof BadCredentialsException)
            {
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
                throw new UserPasswordNotMatchException();
            }
            else
            {
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
                throw new ServiceException(e.getMessage());
            }
        }
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
        LoginUser loginUser = (LoginUser) authentication.getPrincipal();
        recordLoginInfo(loginUser.getUserId());
        // 生成token
        return tokenService.createToken(loginUser);
    }

    
   
    
    public void recordLoginInfo(Long userId)
    {
        SysUser sysUser = new SysUser();
        sysUser.setUserId(userId);
        sysUser.setLoginIp(IpUtils.getIpAddr(ServletUtils.getRequest()));
        sysUser.setLoginDate(DateUtils.getNowDate());
        userService.updateUserProfile(sysUser);
    }
}

新增 ruoyi-frameworkcomruoyiframeworkwebserviceCaptchaRedisService.java

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

6.资源导入

将aj-captcha 官方提供的demo中的images包整体引入到resources包下。
文章的最上边提供了下载地址，可自行下载。
至此，后端全部修改完毕。

7.修改前端ruoyi-ui

下载官方提供的前端修改代码
链接: https://pan.baidu.com/s/13JVC9jm-Dp9PfHdDDylLCQ 提取码: y9jt
在ruoyi-ui目录下的文件不要全部替换到项目中，建议使用beyondcompare比较一下改动内容。

ruoyi-uipackage.json
dependencies 增加

 "crypto-js": "^4.1.1",

ruoyi-uisrcviewslogin.vue
删除原来的验证码部分，增加滑块验证码相关代码

其他资源
将 “集成aj-captcha实现滑块验证码ruoyi-uisrc“ 目录下assets、components两个目录直接复制到项目中。

这就够了。api目录下文件用不到。

8.启动

1.建议先启动后端，再启动前端。
2.前后端都增加了依赖，后端需要更新maven依赖，前端更新crypto-js （npm install --save crypto-js）

最终效果如下：

05-若依使用AJ-captcha验证

若依后台管理系统

Java相关栏目本月热门文章