前言：

最近小编闲暇之余，想到ruoyi后台的计算验证有点单一，网上很多的网站都有像滑块图片验证或文字点选验证的机器验证，所以就想集成一下，可以是百度半天网上终究是没有特别详细的教程，所以小编通过参考网络教程加上自身实践，实现了这几种验证，效果还不错。

效果展示：

                

                

小编将这些验证部分统一放入一个组件文件夹里面，目录如图：

在components里面新建Veriftion文件夹用于存放这些验证的组件。其中SilderVerify.vue是简单滑动验证组件，Verify用于统一管理写好的滑动图片和文字点选组件。

ruoyi-ui里面如果没有crypto-js则需要先安装一下：npm install crypto-js --save-dev        

流程简述：让用户进行滑动验证后，展示图片验证或文字点选验证，验证通过后才进行登录。

SilderVerify.vue组件：

Login.vue使用：

多余的代码小编这里就不贴了，仅贴一下需要使用的

Verifition/Verify/VerifySlide.vue:

Verifition/Verify.vue:

此组件在验证失败时候需要一张图片，小编放置如下：

前端部分到此基本就结束了，下面开始Java Spring Boot部分.

引入依赖：

        
            com.github.anji-plus
            captcha-spring-boot-starter
            1.2.7
        

主要目录如下：

CaptchaRedisServiceImpl

package com.wjwjy.web.BaseAnji.service.impl;
import com.anji.captcha.service.CaptchaCacheService;
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
public class CaptchaRedisServiceImpl implements CaptchaCacheService {
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Override
    public void set(String s, String s1, long l) {
        stringRedisTemplate.opsForValue().set(s, s1, l, TimeUnit.SECONDS);
    }
    @Override
    public boolean exists(String s) {
        return stringRedisTemplate.hasKey(s);
    }
    @Override
    public void delete(String s) {
        stringRedisTemplate.delete(s);
    }
    @Override
    public String get(String s) {
        return stringRedisTemplate.opsForValue().get(s);
    }
    @Override
    public String type() {
        return "redis";
    }
}

在resources/META-INF/ 下新建services目录，然后在services下新建com.anji.captcha.service.CaptchaCacheService，这里需要注意，新建的是文件。

com.anji.captcha.service.CaptchaCacheService代码如下:

com.wjwjy.web.BaseAnji.service.impl.CaptchaRedisServiceImpl

这里需要注意，com.anji.captcha.service.CaptchaCacheService的内容必须是CaptchaRedisServiceImpl的路径。

BaseAnjiController：

package com.wjwjy.web.BaseAnji.controller;
import com.anji.captcha.model.common.ResponseModel;
import com.anji.captcha.model.vo.CaptchaVO;
import com.anji.captcha.service.CaptchaService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin
@Slf4j
@RequestMapping(value="/api/base/base_anji")
public class BaseAnjiController {
    @Autowired
    private CaptchaService captchaService;
    
    @PostMapping("/get")
    public ResponseModel get(@RequestBody CaptchaVO captchaVO) {
        return captchaService.get(captchaVO);
    }
    @PostMapping("/check")
    public ResponseModel check(@RequestBody CaptchaVO captchaVO) {
        return captchaService.check(captchaVO);
    }
    @PostMapping("/verify")
    public ResponseModel verify(@RequestBody CaptchaVO captchaVO) {
        return captchaService.verification(captchaVO);
    }
}

Java的请求代码到这里基本结束，但还需配置一下aj-captcha

新建Config类：

package com.wjwjy.trendscommon.config;
import com.anji.captcha.model.common.Const;
import com.anji.captcha.service.CaptchaService;
import com.anji.captcha.service.impl.CaptchaServiceFactory;
import com.anji.captcha.util.Base64Utils;
import com.anji.captcha.util.FileCopyUtils;
import com.anji.captcha.util.ImageUtils;
import com.anji.captcha.util.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.DependsOn;
import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import org.springframework.core.io.support.ResourcePatternResolver;
import java.util.HashMap;
import java.util.Map;
import java.util.Properties;
@Slf4j
@Configuration
public class Config {
    @Bean
    @DependsOn("AjCaptchaCacheService")
    public CaptchaService captchaService() {
        Properties config = new Properties();
//        try {
//            try (InputStream input = CaptchaConfig.class.getClassLoader()
//                    .getResourceAsStream("application.properties")) {
//                config.load(input);
//            }
//        }catch (Exception ex){
//            ex.printStackTrace();
//        }
        //各种参数设置....
        //缓存类型redis/local/....
        config.put(Const.CAPTCHA_CACHETYPE, "local");//缓存类型
        config.put(Const.CAPTCHA_WATER_MARK, "吾疾唯君医Java");//水印文字
        config.put(Const.CAPTCHA_FONT_TYPE, "宋体");//字体
        config.put(Const.CAPTCHA_TYPE, "default");//blockPuzzle 图片滑块 clickWord 文字点选  default默认两者都实例化
        config.put(Const.CAPTCHA_INTERFERENCE_OPTIONS, "0");//滑动干扰项(0/1/2)
        config.put(Const.ORIGINAL_PATH_JIGSAW, "");
        config.put(Const.ORIGINAL_PATH_PIC_CLICK, "");
        config.put(Const.CAPTCHA_SLIP_OFFSET, 5);//校验滑动拼图允许误差偏移量(默认5像素)
        config.put(Const.CAPTCHA_AES_STATUS, "true");
        config.put(Const.CAPTCHA_WATER_FONT, "宋体");//aes加密坐标开启或者禁用(true|false)
        config.put(Const.CAPTCHA_CACAHE_MAX_NUMBER, "1000");
        config.put(Const.CAPTCHA_TIMING_CLEAR_SECOND, "180");
        //更多自定义参数，请参考service/springboot/../resources/application.properties
        if ((StringUtils.isNotBlank(config.getProperty(Const.ORIGINAL_PATH_JIGSAW))
                && config.getProperty(Const.ORIGINAL_PATH_JIGSAW).startsWith("classpath:"))
                || (StringUtils.isNotBlank(config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK))
                && config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK).startsWith("classpath:"))) {
            //自定义resources目录下初始化底图
            config.put(Const.CAPTCHA_INIT_ORIGINAL, "true");
            initializeBaseMap(config.getProperty(Const.ORIGINAL_PATH_JIGSAW),
                    config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK));
        }
        CaptchaService s = CaptchaServiceFactory.getInstance(config);
        return s;
    }
    private static void initializeBaseMap(String jigsaw, String picClick) {
        ImageUtils.cacheBootImage(getResourcesImagesFile(jigsaw + "/original/*.png"),
                getResourcesImagesFile(jigsaw + "/slidingBlock/*.png"),
                getResourcesImagesFile(picClick + "/*.png"));
    }
    public static Map getResourcesImagesFile(String path) {
        Map imgMap = new HashMap<>();
        ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
        try {
            Resource[] resources = resolver.getResources(path);
            for (Resource resource : resources) {
                byte[] bytes = FileCopyUtils.copyToByteArray(resource.getInputStream());
                String string = Base64Utils.encodeToString(bytes);
                String filename = resource.getFilename();
                imgMap.put(filename, string);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return imgMap;
    }
}

到这里，验证实现的代码就基本结束了，如有不足之处欢迎大家指正。还希望大家点点关注，多多支持，谢谢~