常用工具类之AJ-Captcha入门

冷不防 2023-10-12 18:21 20阅读 0赞

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

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

2.修改application.yml，加入aj-captcha配置  
在ruoyi-admin模块中的application.yml中添加aj-captcha配置

spring.application.name=captcha-service
    server.port=8088
     
    # 滑动验证，底图路径，不配置将使用默认图片
    # 支持全路径
    # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw
    aj.captcha.jigsaw=classpath:images/jigsaw
    # 滑动验证，底图路径，不配置将使用默认图片
    # 支持全路径
    # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
    aj.captcha.pic-click=classpath:images/pic-click
     
    # 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，
    # 参考CaptchaCacheServiceRedisImpl.java
    # 如果应用是单点的，也没有使用redis，那默认使用内存。
    # 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。
    # ！！！ 注意啦，如果应用有使用spring-boot-starter-data-redis，
    # 请打开CaptchaCacheServiceRedisImpl.java注释。
    # redis ----->  SPI： 在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。
    # 缓存local/redis...
    aj.captcha.cache-type=local
    # local缓存的阈值,达到这个值，清除缓存
    #aj.captcha.cache-number=1000
    # local定时清除过期缓存(单位秒),设置为0代表不执行
    #aj.captcha.timing-clear=180
    #spring.redis.host=10.108.11.46
    #spring.redis.port=6379
    #spring.redis.password=
    #spring.redis.database=2
    #spring.redis.timeout=6000
     
    # 验证码类型default两种都实例化。
    aj.captcha.type=default
    # 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换
    # https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
    # 右下角水印文字(我的水印)
    aj.captcha.water-mark=我的水印
    # 右下角水印字体(不配置时，默认使用文泉驿正黑)
    # 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】
    # 方式一：直接配置OS层的现有的字体名称，比如：宋体
    # 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体
    # aj.captcha.water-font=WenQuanZhengHei.ttf
    # 点选文字验证码的文字字体(文泉驿正黑)
    # aj.captcha.font-type=WenQuanZhengHei.ttf
    # 校验滑动拼图允许误差偏移量(默认5像素)
    aj.captcha.slip-offset=5
    # aes加密坐标开启或者禁用(true|false)
    aj.captcha.aes-status=true
    # 滑动干扰项(0/1/2)
    aj.captcha.interference-options=2
     
    #点选字体样式 默认Font.BOLD
    aj.captcha.font-style=1
    #点选字体字体大小
    aj.captcha.font-size=25
    #点选文字个数,存在问题，暂不支持修改
    #aj.captcha.click-word-count=4
     
     
    aj.captcha.history-data-clear-enable=false
     
    # 接口请求次数一分钟限制是否开启 true|false
    aj.captcha.req-frequency-limit-enable=false
    # 验证失败5次，get接口锁定
    aj.captcha.req-get-lock-limit=5
    # 验证失败后，锁定时间间隔,s
    aj.captcha.req-get-lock-seconds=360
    # get接口一分钟内请求数限制
    aj.captcha.req-get-minute-limit=30
    # check接口一分钟内请求数限制
    aj.captcha.req-check-minute-limit=30
    # verify接口一分钟内请求数限制(暂用不上，可后台直接调用captchaService)
    #aj.captcha.req-verify-minute-limit=30

或者

# 滑块验证码
    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详细配置选择自己想用的参数。  
  
在SecurityConfig中设置aj-captcha匿名访问权限  
在 SecurityConfig.java 文件中configure方法下的httpSecurity添加如下语句：

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

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

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

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;
     
    /**
     * 登录校验方法
     *
     * @author ruoyi
     */
    @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;
        /**
         * 登录验证
         *
         * @param username 用户名
         * @param password 密码
         * @param code 验证码
         * @param uuid 唯一标识
         * @return 结果
         */
        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();
            }
            /*boolean captchaOnOff = configService.selectCaptchaOnOff();
            // 验证码开关
            if (captchaOnOff)
            {
                validateCaptcha(username, code, uuid);
            }*/
            // 用户验证
            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);
        }
     
        /**
         * 校验验证码
         *
         * @param username 用户名
         * @param code 验证码
         * @param uuid 唯一标识
         * @return 结果
         */
       /* public void validateCaptcha(String username, String code, String uuid)
        {
            String verifyKey = Constants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
            String captcha = redisCache.getCacheObject(verifyKey);
            redisCache.deleteObject(verifyKey);
            if (captcha == null)
            {
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
                throw new CaptchaExpireException();
            }
            if (!code.equalsIgnoreCase(captcha))
            {
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
                throw new CaptchaException();
            }
        }
    */
        /**
         * 记录登录信息
         *
         * @param userId 用户ID
         */
        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);
        }
    }

新增 CaptchaRedisService.java

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;
     
    /**
     * 自定义redis验证码缓存实现类
     * 
     * @author ruoyi
     */
    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.修改前端  
使用beyondcompare比较一下改动内容。

package.json  
dependencies 增加

"crypto-js": "^4.1.1",

\\src\\views\\login.vue  
删除原来的验证码部分，增加滑块验证码相关代码

<template>
      <div class="login">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <h3 class="title">若依后台管理系统</h3>
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
            >
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <Verify
            @success="capctchaCheckSuccess"
            :mode="'pop'"
            :captchaType="'blockPuzzle'"
            :imgSize="{ width: '330px', height: '155px' }"
            ref="verify"
          ></Verify>
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div style="float: right;" v-if="register">
              <router-link class="link-type" :to="'/register'">立即注册</router-link>
            </div>
          </el-form-item>
        </el-form>
        
        <div class="el-login-footer">
          <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
        </div>
      </div>
    </template>
     
    <script>
    import Cookies from "js-cookie";
    import { encrypt, decrypt } from '@/utils/jsencrypt'
    import Verify from "@/components/Verifition/Verify";
     
    export default {
      components: { Verify },
      name: "Login",
      data() {
        return {
          loginForm: {
            username: "admin",
            password: "admin123",
            rememberMe: false,
            code: "",
          },
          loginRules: {
            username: [
              { required: true, trigger: "blur", message: "请输入您的账号" }
            ],
            password: [
              { required: true, trigger: "blur", message: "请输入您的密码" }
            ],
          },
          loading: false,
          // 注册开关
          register: false,
          redirect: undefined
        };
      },
      watch: {
        $route: {
          handler: function(route) {
            this.redirect = route.query && route.query.redirect;
          },
          immediate: true
        }
      },
      created() {
        this.getCookie();
      },
      methods: {
     
        getCookie() {
          const username = Cookies.get("username");
          const password = Cookies.get("password");
          const rememberMe = Cookies.get('rememberMe')
          this.loginForm = {
            username: username === undefined ? this.loginForm.username : username,
            password: password === undefined ? this.loginForm.password : decrypt(password),
            rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
          };
        },
        capctchaCheckSuccess(params) {
          this.loginForm.code = params.captchaVerification;
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30, });
            Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
            }).catch(() => {
              this.loading = false;
            });
        },
        handleLogin() {
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              this.$refs.verify.show();
            }
          });
        }
      }
    };
    </script>
     
    <style rel="stylesheet/scss" lang="scss">
    .login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      background-image: url("../assets/images/login-background.jpg");
      background-size: cover;
    }
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
    }
     
    .login-form {
      border-radius: 6px;
      background: #ffffff;
      width: 400px;
      padding: 25px 25px 5px 25px;
      .el-input {
        height: 38px;
        input {
          height: 38px;
        }
      }
      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
      }
    }
    .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }
    .login-code {
      width: 33%;
      height: 38px;
      float: right;
      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .el-login-footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }
    .login-code-img {
      height: 38px;
    }
    </style>

其他资源  
将 “集成aj-captcha实现滑块验证码\\ruoyi-ui\\src\\“ 目录下assets、components两个目录直接复制到项目中。  
这就够了。api目录下文件用不到。

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

最终效果如下：

![53bc46b818895a5cd64daa099a0e432c.gif][]

[53bc46b818895a5cd64daa099a0e432c.gif]: https://img-blog.csdnimg.cn/img_convert/53bc46b818895a5cd64daa099a0e432c.gif