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

超、凢脫俗 2024-04-06 12:22 130阅读 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.效果展示

在这里插入图片描述

3.导入依赖

  1. <dependency>
  2.             <groupId>com.github.whvcse</groupId>
  3.             <artifactId>easy-captcha</artifactId>
  4.             <version>1.6.2</version>
  5.         </dependency>

4.代码实现

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

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

这里的R是返回实体类

  1. package com.sky.api.sys.controller;
  3. import com.sky.utils.R;
  4. import com.wf.captcha.GifCaptcha;
  5. import com.wf.captcha.base.Captcha;
  6. import io.swagger.annotations.Api;
  7. import io.swagger.annotations.ApiOperation;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.web.bind.annotation.GetMapping;
  10. import org.springframework.web.bind.annotation.RestController;
  12. import java.awt.*;
  13. import java.util.HashMap;
  14. import java.util.Map;
  15. import java.util.UUID;
  16. import java.util.concurrent.TimeUnit;
  18. /**
  19.  * @author 尹稳健~
  20.  * @version 1.0
  21.  * @time 2022/9/21
  22.  */
  23. @RestController
  24. @Api(tags = "系统管理-验证码")
  25. public class CaptchaController {
  28.     /**
  29.      * 图形验证码接口
  30.      * @return
  31.      */
  32.     @ApiOperation("图形验证码接口")
  33.     @GetMapping("/captchaImage")
  34.     public R<Map<String,Object>> captcha(){
  36.         // 三个参数分别为宽、高、位数
  37.         Captcha captcha = new GifCaptcha(130, 48, 4);
  38.         // 设置字体，有默认字体，可以不用设置
  39.         captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
  40.         // 设置类型，纯数字、纯字母、字母数字混合
  41.         captcha.setCharType(Captcha.TYPE_DEFAULT);
  43.         // 验证码存入redis
  44.         // 将uuid作为redis的key
  45.         String key = UUID.randomUUID().toString();
  47.         String code = captcha.text().toLowerCase();
  49.         Map<String, Object> map = new HashMap<>();
  51.         map.put("key",key);
  52.         map.put("code",captcha.toBase64());
  53.         return R.ok(map);
  54.     }
  55. }

4.1.2 前端编写核心代码

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

  1. <div class="login-code">
  2.   <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  3. </div>
  7. <script>
  9. // 获取验证码图片
  10.     getCode(){
  12.       fetch.getCodeImg().then(res => {
  14.         this.codeUrl = res.data.data.code;
  15.         this.loginForm.uuid = res.data.data.key;
  16.       })
  17.     },
  18. </script>

4.1.3 结果显示

因为他是gif所以会动
在这里插入图片描述
在这里插入图片描述

4.2 其他验证码实现

4.2.1 Java代码

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

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

5.验证码格式设置

5.1 验证码六种组成类型


































类型 描述
TYPE_DEFAULT 数字和字母混合
TYPE_ONLY_CHAR 纯字母
TYPE_NUM_AND_UPPER 数字和大写字母混合
TYPE_ONLY_LOWER 纯小写字母
TYPE_ONLY_NUMBER 纯数字
TYPE_ONLY_UPPER 纯大写字母

5.2 如何使用

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

5.3 字体设置

在这里插入图片描述

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

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

方式二：

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

6.实战中如何使用

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

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

思路

  • 我们将验证码的code，也就是他的结果放入redis中，并且他的key是一个uuid，在我们后端传给前端的时候，我们传的是一个map集合，里面有uuid和图片的内容
  • 这个时候有人可能会发现我们后端传过去是一个什么玩意？
    在这里插入图片描述
  • 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 {
  1.     @Autowired
  2.     private RedisCache redisCache;
  4.     /**
  5.      * 图形验证码接口
  6.      * @return
  7.      */
  8.     @ApiOperation("图形验证码接口")
  9.     @GetMapping("/captchaImage")
  10.     public R<Map<String,Object>> captcha(){
  12.         // 三个参数分别为宽、高、位数
  13.         Captcha captcha = new GifCaptcha(130, 48, 4);
  14.         // 设置字体，有默认字体，可以不用设置
  15.         captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
  16.         // 设置类型，纯数字、纯字母、字母数字混合
  17.         captcha.setCharType(Captcha.TYPE_DEFAULT);
  19.         // 验证码存入redis
  20.         // 将uuid作为redis的key
  21.         String key = UUID.randomUUID().toString();
  23.         String code = captcha.text().toLowerCase();
  25.         redisCache.setCacheObject(key,code,1, TimeUnit.MINUTES);
  27.         Map<String, Object> map = new HashMap<>();
  29.         map.put("key",key);
  30.         map.put("code",captcha.toBase64());
  31.         return R.ok(map);
  32.     }
  33. }

截取部分代码：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读