滑块验证 - 使用AJ-Captcha插件【超简单.jpg】

GitHub地址：https://github.com/anji-plus/captcha/blob/master/README_CN.md
AJ-Captcha文档：https://ajcaptcha.beliefteam.cn/captcha-doc/

本人是spring boot – vue 项目：

一、后端

1）首先引入maven：

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

2）再在application.yml中自定义水印，直接启动后前端就可以请求接口了

我这边就写了最简单的，具体可以看文档

# 验证码相关
aj:
  captcha:
    #jigsaw: classpath:images/jigsaw
    cache-type: redis
    water-mark: 水印-哒不溜

3）重写CaptchaCacheServiceRedisImpl

因为这个插件原本自带的impl好像有点问题，你们也可以不重写先试试；

①先新建一个文件夹

FileName：com.anji.captcha.service.CaptchaCacheService
内容：写自己的路径

②重写impl

我直接把内容复制出来吧，新建CaptchaCacheServiceRedisImpl

import com.anji.captcha.service.CaptchaCacheService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;

import java.util.concurrent.TimeUnit;

@Service
@Slf4j
public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {

    private static final String REDIS = "redis";

    @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 String type() {
        return REDIS;
    }
}

二、前端：

1）复制文件

复制整个verifition文件夹,到自己工程对应目录下
进链接复制文件夹：https://github.com/anji-plus/captcha/tree/master/view/vue/src/components

2）安装请求和加密依赖

 npm install axios  crypto-js   -S

3）之后就可以直接使用了（引入、使用组件）

vue使用：

   	<!-- 自己可以做其它的调整大小什么的 -->
    <Verify
        @success="verifySuccess"
        @cancel="loading = false"
        :mode="'pop'"
        :captchaType="'blockPuzzle'"
        :imgSize="{ width: '330px', height: '155px' }"
        ref="verify"
      />
        <el-button type="primary"
                   @click="dialogtelSubmit()">滑动验证</el-button>

js引入：

import Verify from '@/components/verifition/Verify'

export default {
  components: {
    Verify
  },
  data() {...},
  methods: {
	// 打开滑动验证码
  	dialogtelSubmit() {
      this.$refs.verify.show();
  	},
    // 滑动验证成功后执行的方法
    verifySuccess(params) {
    	// params：滑块验证返回的信息，传参params.captchaVerification
    	// 如果直接把params传过去接收不到(我自己是这样，不知道你们)
    	this.$http({
            url: this.$http.adornUrl('/sendCode/captcha'),
            method: 'post',
            params: this.$http.adornParams({
              captchaVerification: params.captchaVerification,
            })
          }).then(({data}) => {
          	if(data) { 
            	this.$message.success('验证成功！')
          	}
          }).catch(() => {
          })
    },
  }
}

三、后端二次校验接口

	@PostMapping("/sendCode/captcha")
	public ResponseEntity<Boolean> sendLoginCodeCaptcha(String captchaVerification) {
		boolean flag = false;
		// 新创建个对象，再赋值 进行解析
		CaptchaVO captchaVO = new CaptchaVO();
		captchaVO.setCaptchaVerification(captchaVerification);
		ResponseModel response = captchaService.verification(captchaVO);
		
		if(response.isSuccess() == false) {
			//验证码校验失败，返回信息告诉前端
	        //repCode  0000  无异常，代表成功
	        //repCode  9999  服务器内部异常
	        //repCode  0011  参数不能为空
	        //repCode  6110  验证码已失效，请重新获取
	        //repCode  6111  验证失败
	        //repCode  6112  获取验证码失败,请联系管理员
	        //repCode  6113  底图未初始化成功，请检查路径
	        //repCode  6201  get接口请求次数超限，请稍后再试!
	        //repCode  6206  无效请求，请重新获取验证码
	        //repCode  6202  接口验证失败数过多，请稍后再试
	        //repCode  6204  check接口请求次数超限，请稍后再试!
	        /** 抛出异常 （这是自己的方法↓↓↓） 或者你做其它操作 **/
			throw new YamiShopBindException(response.getRepMsg());
		}else if("0000".equals(response.getRepCode())) {// repCode  0000  无异常，代表成功
			flag = response.isSuccess();
		}
		return ResponseEntity.ok(flag);
	}

最后效果展示