springBoot、vue项目中实现滑块验证码登录

我叫yeeking啊

已于 2022-11-14 17:04:57 修改

阅读量6.6k

点赞数 1

文章标签： redis java spring boot vue

于 2021-09-07 14:18:58 首次发布

本文链接：https://blog.csdn.net/qq_49045151/article/details/120156246

版权

在springboot项目中需要用到滑块验证码来验证登录。
实现效果如下：
其中包含滑动拼图、文字点选的功能在这里插入图片描述
在此记录一下实现的步骤：

后端部分

1、在web包下的pom.xml文件中添加依赖

<!-- 滑块验证码  -->
<dependency>
	<groupId>com.github.anji-plus</groupId>
	<artifactId>captcha-spring-boot-starter</artifactId>
	<version>1.2.7</version>
</dependency>
<!-- 加入redis依赖 避免tringRedisTemplate找不到依赖文件（后续要用）-->
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-redis</artifactId>
      <exclusions>
          <exclusion>
              <groupId>io.lettuce</groupId>
              <artifactId>lettuce-core</artifactId>
          </exclusion>
      </exclusions>
  </dependency>
  <dependency>
      <groupId>redis.clients</groupId>
      <artifactId>jedis</artifactId>
  </dependency>

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

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

同时在web\src\main\java\resources\META-INF\services下创建com.anji.captcha.service.CaptchaCacheService文件同时设置文件内容为:

com.你的包名.main.web.service.CaptchaRedisService

3、在shiroClusterCofig.java文件下设置验证码无需权限的url（这边项目中使用的是shiro验证，只需要在指定的HashMap组中加入不需要验证的对象）

hashMap.put("/captcha/get", "anon");
hashMap.put("/captcha/check", "anon");

4、修改登录接口的验证方法

	@Autowired
    @Lazy
    private CaptchaService captchaService;

    /**
     * 通过账号密码获取token
     * @return
     */
    @RequestMapping(value = "/getToken")
    @ResponseBody
    public ResultJsonModel getToken(String username, String password, HttpServletRequest req, String captcha){
        Subject subject = SecurityUtils.getSubject();
        //验证码的判断逻辑
        CaptchaVO captchaVO = new CaptchaVO();
        captchaVO.setCaptchaVerification(captcha);
        ResponseModel response = captchaService.verification(captchaVO);
        if (!response.isSuccess())
        {
            throw new CaptchaException();
        }

        try{
            UsernamePasswordCaptchaToken token = new UsernamePasswordCaptchaToken(username,
                    password.toCharArray(), false, null, null, true);
            subject.login(token);
        }catch(IncorrectCredentialsException e){
            return ResultJsonModel.err("用户名或密码错误");
        }catch (UnknownAccountException uae){
            return ResultJsonModel.err("用户名不存在");
        }catch (Exception exp) {
            return ResultJsonModel.err("服务器繁忙");
        }

        SysUser user = (SysUser) subject.getPrincipal();
        return ResultJsonModel.ok(JwtUtil.sign(username, user.getPassword()));
    }

5、在web路径下新增 web\service\CaptchaRedisService.java文件

package com.fgsw.main.web.service;

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

/**
 * 自定义redis验证码缓存实现类
 *
 * @author yeeking
 */
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";
    }
}

前端

1、（关键）在conponents文件下加入vertifition文件夹
在这里插入图片描述
2、assets下加入defaults.jpg作为默认的错误显示图片

3、修改login.vue文件，引入组件

import Verify from "@/components/Verifition/Verify";

export default {
  components: { Verify },
  name: "Login",
  *****
  ***
  *

4、html部分

        <Verify
          @success="capctchaCheckSuccess"
          :mode="'pop'"
          :captchaType="'blockPuzzle'"
          :imgSize="{ width: '330px', height: '155px' }"
          ref="verify"
        ></Verify>

js部分

    capctchaCheckSuccess(params) {
      if (!this.judgeUserNameAndPsd()) {
        return;
      }
      this.loginForm.captcha = params.captchaVerification;
      this.loading = true;
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || "/" });
          //调用登录成功的方法
          loginSuccess().then(() => {});
          this.loading = false;
        })
        .catch(error => {
          this.$message({ type: "error", message: error });
          this.loading = false;
        });
    },
    //点击登陆时显示验证
    handleLogin() {
      this.$refs.verify.show();
    }

遇到的问题

Consider marking one of the beans as @Primary, updating the consumer to accept multiple beans, or using @Qualifier to identify the bean that should be consumed

sringboot通过@Autowired注入接口的实现类时发现有多个，也就是有多个类继承了这个接口，spring容器不知道使用哪一个。
于是我发现我在项目中使用了多个redis，导致系统不知道使用哪一个，在报错的方法加上@primary注解就可以了，表示优先使用指定的缓存。

public class ShiroClusterConfig {
    @Bean
    @Primary
    public RedisProperties redisProperties() {
        return new RedisProperties();
    }

    @Bean
    public ShiroProperties shiroProperties() {
        return new ShiroProperties();
    }
}

最后，搞定~

【更新】

近期验证码升级更新后发现和之前的版本有些不一样的地方，按照前面的方法会出现空指针找不到缓存等其它未知的方法等。
将版本从1.2.7升级到1.3.0

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

application.yml文件的aj部分改成：

aj:
  captcha:
    jigsaw: classpath:images/jigsaw
    #滑动验证，底图路径，不配置将使用默认图片
    ##支持全路径
    # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
    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...
    cache-type: redis
    # local缓存的阈值,达到这个值，清除缓存
    cache-number: 1000
    # local定时清除过期缓存(单位秒),设置为0代表不执行
    timing-clear: 180
    # 验证码类型default两种都实例化。
    type: default
    # 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换;yml格式不需要转换
    # https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
    # 右下角水印文字(我的水印)
    water-mark: water-mark
    # 右下角水印字体(不配置时，默认使用文泉驿正黑)
    # 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】
    # 方式一：直接配置OS层的现有的字体名称，比如：宋体
    # 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体
    # aj.captcha.water-font=WenQuanZhengHei.ttf
    # water-font: SourceHanSansCN-Normal.otf
    # 点选文字验证码的文字字体(文泉驿正黑)
    # aj.captcha.font-type=WenQuanZhengHei.ttf
    # font-type: SourceHanSansCN-Normal.otf
    # 校验滑动拼图允许误差偏移量(默认5像素)
    slip-offset: 5
    # aes加密坐标开启或者禁用(true|false)
    aes-status: true
    # 滑动干扰项(0/1/2)
    interference-options: 1
    history-data-clear-enable: true
    # 接口请求次数一分钟限制是否开启 true|false
    req-frequency-limit-enable: true
    # 验证失败5次，get接口锁定
    req-get-lock-limit: 5
    # 验证失败后，锁定时间间隔,s
    req-get-lock-seconds: 60
    # get接口一分钟内请求数限制
    req-get-minute-limit: 30
    # check接口一分钟内请求数限制
    req-check-minute-limit: 60
    # verify接口一分钟内请求数限制
    req-verify-minute-limit: 60