1. 认识 AJ-Captcha

AJ-Captcha 是一个开源的行为验证码工具库，包含滑动拼图、文字点选两种方式

gitee 项目网址：

https://gitee.com/anji-plus/captcha

2. 后端 springboot 整合 AJ-Captcha

技术栈：

• springboot
• redis
• AJ-Captcha

2.1 新建 Springboot 项目

新建 springboot 项目，引入依赖

<!-- web -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- redis -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<!-- captcha 图形验证码-->
<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.3.0</version>
</dependency>

2.2 新增 Redis 配置和 CaptchaCache 配置

Redis 配置

@Configuration
public class RedisConfig {

    @Resource
    private RedisConnectionFactory factory;

    @Bean
    public RedisTemplate<String, Object> redisTemplate() {
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(factory);
        GenericJackson2JsonRedisSerializer genericJackson2JsonRedisSerializer = new GenericJackson2JsonRedisSerializer();
        StringRedisSerializer stringRedisSerializer = new StringRedisSerializer();
        redisTemplate.setKeySerializer(stringRedisSerializer);
        redisTemplate.setValueSerializer(genericJackson2JsonRedisSerializer);
        redisTemplate.setHashKeySerializer(stringRedisSerializer);
        redisTemplate.setHashValueSerializer(genericJackson2JsonRedisSerializer);
        redisTemplate.afterPropertiesSet();
        return redisTemplate;
    }

}

Captcha 配置: 主要是配置 Redis，用来缓存验证码图片等相关信息

@Service
public class CaptchaCacheServiceRedis implements CaptchaCacheService {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    @Override
    public String type() {
        return "redis";
    }

    @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);
    }
}

2.3 在 Resources 目录下配置 CaptchaCache 路径

在 resources 目录下新建 META-INF，在 META-INF 目录下新建 services 目录，在 services 目录下新建 com.anji.captcha.service.CaptchaCacheService 的文件，内容指向 CaptchaCacheService 的配置路径。

2.4 配置 yml

主要是 redis 和 aj-captcha 的配置

server:
  port: 8088
  servlet:
    context-path: /zhifou
spring:
  redis:
    host: xxxxx
    port: 6379
    password: xxxxxx
    database: 0
# 滑块验证码
aj:
  captcha:
    # 缓存类型
    cache-type: redis
    # blockPuzzle 滑块 clickWord 文字点选  default默认两者都实例化
    type: blockPuzzle
    # 校验滑动拼图允许误差偏移量(默认5像素)
    slip-offset: 5
    # aes加密坐标开启或者禁用(true|false)
    aes-status: true
    # 滑动干扰项(0/1/2)
    interference-options: 0
    # 右下角水印
    water-mark: "知否技术"

3. 前端 Vue3 整合 AJ-Captcha

3.1 安装配置 vue3 项目

新建 vue3 项目，分别安装 axios 和 crypto-js 库

npm install  axios --save
npm install crypto-js --save

3.2 拷贝 AJ-captcha 的核心前端组件：verifition

进入 AJ-captcha 的 gitee 网址，点击克隆/下载。克隆该项目，或者下载 zip 文件。

https://gitee.com/anji-plus/captcha

找到 view/vue3/src/components 目录，拷贝 verifition 文件夹到自己的项目中

3.3 配置 AJ-captcha 的 axios

这里我是调用自己封装的 axios

3.4 配置 vue3 项目请求后台的接口路径

3.5 新建登录页面，添加验证码组件

这里我直接在 App.vue 页面新增一个简单的登录模块，然后导入 AJ-captcha 的验证码组件

在 Verify 组件上面，captcha-type 表示验证码类型：blockPuzzle 是滑块，clickWord 是文字点选，这个类型要和 springboot 项目 yml 里面的配置保持一致。

点击登录按钮，弹框显示验证码：

如果验证码校验通过，然后调用成功的方法，继续登录逻辑

// 验证码校验通过
const successVerify = (param) => {
ElMessage.success("图片验证码校验通过");
// 发起登录请求
};
4. 案例演示

5.完整代码

https://gitee.com/zhifou-tech/springboot-vue3-captcha/

我把 vue3 的 demo 放这里了

编程7

java8

前端31

vue31

编程 · 目录

#编程

上一篇Git系列教程，从小白到大神！下一篇Vue3实现前端打印功能，10分钟拿下！