SpringBoot整合验证码easy-captcha（含有gif验证码）

超、凢脫俗 2024-04-06 12:22 38阅读 0赞

#### SpringBoot整合验证码 ####

*  1.简介
 *  2.效果展示
 *  3.导入依赖
 *  4.代码实现
 *   *  4.1 gif验证码实现（动态验证码实现）
     *   *  4.1.1 在SpringBoot项目的Controller中进行编写
         *  4.1.2 前端编写核心代码
         *  4.1.3 结果显示
     *  4.2 其他验证码实现
     *   *  4.2.1 Java代码
 *  5.验证码格式设置
 *   *  5.1 验证码六种组成类型
     *  5.2 如何使用
     *  5.3 字体设置
 *  6.实战中如何使用
 *   *  思路

## 1.简介 ##

Java图形验证码，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。

## 2.效果展示 ##

![在这里插入图片描述][5e4b2f97ad394baa883d60f85137256a.png]

## 3.导入依赖 ##

<dependency>
                <groupId>com.github.whvcse</groupId>
                <artifactId>easy-captcha</artifactId>
                <version>1.6.2</version>
            </dependency>

## 4.代码实现 ##

### 4.1 gif验证码实现（动态验证码实现） ###

#### 4.1.1 在SpringBoot项目的Controller中进行编写 ####

这里的R是返回实体类

package com.sky.api.sys.controller;
    
    import com.sky.utils.R;
    import com.wf.captcha.GifCaptcha;
    import com.wf.captcha.base.Captcha;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.awt.*;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    import java.util.concurrent.TimeUnit;
    
    /**
     * @author 尹稳健~
     * @version 1.0
     * @time 2022/9/21
     */
    @RestController
    @Api(tags = "系统管理-验证码")
    public class CaptchaController {
        
    
        /**
         * 图形验证码接口
         * @return
         */
        @ApiOperation("图形验证码接口")
        @GetMapping("/captchaImage")
        public R<Map<String,Object>> captcha(){
        
            // 三个参数分别为宽、高、位数
            Captcha captcha = new GifCaptcha(130, 48, 4);
            // 设置字体，有默认字体，可以不用设置
            captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
            // 设置类型，纯数字、纯字母、字母数字混合
            captcha.setCharType(Captcha.TYPE_DEFAULT);
    
            // 验证码存入redis
            // 将uuid作为redis的key
            String key = UUID.randomUUID().toString();
    
            String code = captcha.text().toLowerCase();
    
            Map<String, Object> map = new HashMap<>();
    
            map.put("key",key);
            map.put("code",captcha.toBase64());
            return R.ok(map);
        }
    }

#### 4.1.2 前端编写核心代码 ####

因为前端使用的是vue索引只是截取部分代码。

<div class="login-code">
      <img :src="codeUrl" @click="getCode" class="login-code-img"/>
    </div>
    
    
    
    <script>
    
    // 获取验证码图片
        getCode(){
          
          fetch.getCodeImg().then(res => {
          
            this.codeUrl = res.data.data.code;
            this.loginForm.uuid = res.data.data.key;
          })
        },
    </script>

#### 4.1.3 结果显示 ####

因为他是gif所以会动  
![在这里插入图片描述][1666cf7eb43e4698b03e594a7ea9decc.png]  
![在这里插入图片描述][62b486edc6434e6fa9c75e98dc7cd5d1.png]

### 4.2 其他验证码实现 ###

#### 4.2.1 Java代码 ####

/**
     * @author 尹稳健~
     * @version 1.0
     * @time 2022/9/21
     */
    @RestController
    @Api(tags = "系统管理-验证码")
    public class CaptchaController {
        
    
        /**
         * 图形验证码接口
         * @return
         */
        @ApiOperation("图形验证码接口")
        @GetMapping("/captchaImage")
        public R<Map<String,Object>> captcha(){
        
            // png类型
            SpecCaptcha captcha = new SpecCaptcha(130, 48);
            captcha.text();  // 获取验证码的字符
            captcha.textChar();  // 获取验证码的字符数组
            
            // gif类型
            GifCaptcha captcha = new GifCaptcha(130, 48);
            
            // 中文类型
            ChineseCaptcha captcha = new ChineseCaptcha(130, 48);
            
            // 中文gif类型
            ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);
            
            // 算术类型
            ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
            captcha.setLen(3);  // 几位数运算，默认是两位
            captcha.getArithmeticString();  // 获取运算的公式：3+2=?
            captcha.text();  // 获取运算的结果：5
            captcha.supportAlgorithmSign(2); // 可设置支持的算法：2 表示只生成带加减法的公式
            captcha.setDifficulty(50); // 设置计算难度，参与计算的每一个整数的最大值
            captcha.out(outputStream);  // 输出验证码
            //简单算术类型 SimpleArithmeticCaptcha,用法同ArithmeticCaptcha,只支持加减，计算结果为正整数
        }
    }

> 注意：  
>  算术验证码的len表示是几位数运算，而其他验证码的len表示验证码的位数，算术验证码的text()表示的是公式的结果， 对于算术验证码，你应该把公式的结果存储session，而不是公式。

## 5.验证码格式设置 ##

### 5.1 验证码六种组成类型 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>TYPE_DEFAULT</td> 
   <td>数字和字母混合</td> 
  </tr> 
  <tr> 
   <td>TYPE_ONLY_CHAR</td> 
   <td>纯字母</td> 
  </tr> 
  <tr> 
   <td>TYPE_NUM_AND_UPPER</td> 
   <td>数字和大写字母混合</td> 
  </tr> 
  <tr> 
   <td>TYPE_ONLY_LOWER</td> 
   <td>纯小写字母</td> 
  </tr> 
  <tr> 
   <td>TYPE_ONLY_NUMBER</td> 
   <td>纯数字</td> 
  </tr> 
  <tr> 
   <td>TYPE_ONLY_UPPER</td> 
   <td>纯大写字母</td> 
  </tr> 
 </tbody> 
</table>

### 5.2 如何使用 ###

// 三个参数分别为宽、高、位数
    Captcha captcha = new GifCaptcha(130, 48, 4);
    // 设置类型，纯数字、纯字母、字母数字混合
    captcha.setCharType(Captcha.TYPE_DEFAULT);

### 5.3 字体设置 ###

![在这里插入图片描述][716f643a2ab14295af76028b1e8334fe.png]

使用默认字体两种方式  
方式一：

Captcha captcha = new GifCaptcha(130, 48, 5);
    
    // 设置内置字体
    captcha.setFont(Captcha.FONT_1); 
    
    // 设置系统字体
    captcha.setFont(new Font("楷体", Font.PLAIN, 28));

方式二：

// 三个参数分别为宽、高、位数
    Captcha captcha = new GifCaptcha(130, 48, 4);
    // 设置字体，有默认字体，可以不用设置
    captcha.setFont(new Font("Verdana", Font.PLAIN, 32));

## 6.实战中如何使用 ##

> 验证码我们可以通过后端传给前端，那么我们传过去的时候又应该如何传？  
> 如果传入一个验证码，那我们应该传哪些参数？  
> 验证码该如何验证？  
> 验证码该存在哪？  
> 这些都是需要思考的问题

这里我使用一种简单的方法，如果有更好的方法欢迎大家推荐！！！

### 思路 ###

*  我们将验证码的code，也就是他的结果放入redis中，并且他的key是一个uuid，在我们后端传给前端的时候，我们传的是一个map集合，里面有uuid和图片的内容
 *  这个时候有人可能会发现我们后端传过去是一个什么玩意？  
    ![在这里插入图片描述][0dc3c4beb2584ad58b82033fd23e0dc4.png]
 *  data 表示取得数据的协定名称；
 *  image/png 是数据类型名称；
 *  base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
 *  这么长的东西就是那个验证码图片，不用怀疑的
 *  前端拿到这些数据后，会把uuid绑定到用户输入的表单数据中
 *  然后用户提交表单，里面会携带uuid，我们先通过uuid获取redis中的验证码的值
    
     *  这个时候还有2种情况，第一种就是验证码过期了，那么通过uuid从redis中查找，那么是找不到的，我们需要做异常处理
     *  第二种情况，就是用户输入的验证码和我们存入redis的值不匹配，我们需要提示他输入错误

package com.sky.api.sys.controller;
    
    import com.sky.utils.R;
    import com.sky.utils.RedisCache;
    import com.wf.captcha.GifCaptcha;
    import com.wf.captcha.base.Captcha;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.awt.*;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    import java.util.concurrent.TimeUnit;
    
    /**
     * @author 尹稳健~
     * @version 1.0
     * @time 2022/9/21
     */
    @RestController
    @Api(tags = "系统管理-验证码")
    public class CaptchaController {
        
    
        @Autowired
        private RedisCache redisCache;
    
        /**
         * 图形验证码接口
         * @return
         */
        @ApiOperation("图形验证码接口")
        @GetMapping("/captchaImage")
        public R<Map<String,Object>> captcha(){
        
            // 三个参数分别为宽、高、位数
            Captcha captcha = new GifCaptcha(130, 48, 4);
            // 设置字体，有默认字体，可以不用设置
            captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
            // 设置类型，纯数字、纯字母、字母数字混合
            captcha.setCharType(Captcha.TYPE_DEFAULT);
    
            // 验证码存入redis
            // 将uuid作为redis的key
            String key = UUID.randomUUID().toString();
    
            String code = captcha.text().toLowerCase();
    
            redisCache.setCacheObject(key,code,1, TimeUnit.MINUTES);
    
            Map<String, Object> map = new HashMap<>();
    
            map.put("key",key);
            map.put("code",captcha.toBase64());
            return R.ok(map);
        }
    }

截取部分代码：  
![在这里插入图片描述][8d7ab66e94ee4eb6859c97d0dbca6506.png]

[5e4b2f97ad394baa883d60f85137256a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/29004d617c274c62ac4889807d9eb284.png
[1666cf7eb43e4698b03e594a7ea9decc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ad766c5ed3824b4791fd8ea4ff246add.png
[62b486edc6434e6fa9c75e98dc7cd5d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a90eede2d8af4f9da4ac5be6abad2d2d.png
[716f643a2ab14295af76028b1e8334fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/abf038fa1dea4ae2848fecf21190e274.png
[0dc3c4beb2584ad58b82033fd23e0dc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c621a1bc2dc34fcaa03d231786745a7b.png
[8d7ab66e94ee4eb6859c97d0dbca6506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b8bebcf4376849d9ae232cf7b36dd8aa.png