《SpringBoot2.0 实战》系列-集成kaptcha实现验证码的生成校验

忘是亡心i 2024-04-17 05:28 12阅读 0赞

### 简介 ###

kaptcha-spring-boot-starter 基于 springBoot 和 Google Kaptcha 验证码组件，支持jdk1.7+,kaptcha-spring-boot-starter可以很方便的集成验证码到你的系统中。

### 快速开始 ###

增加相关依赖包

<dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>kaptcha-spring-boot-starter</artifactId>
        <version>1.1.0</version>
    </dependency>

### 配置 ###

# kaptcha 图形验证码
    kaptcha:
      height: 50
      width: 200
      content:
        length: 4
        source: abcdefghjklmnopqrstuvwxyz23456789
        space: 2
      font:
        color: black
        name: Arial
        size: 40
      background-color:
        from: lightGray
        to: white
      border:
        enabled: true
        color: black
        thickness: 1

### 统一异常捕获 ###

/**
     * 统一异常处理器
     * @author gourd
     */
    @RestControllerAdvice
    @Slf4j
    public class GlobalExceptionHandler {
    	
    
    	/**
    	 * 处理验证码校验异常
    	 * @param kaptchaException
    	 * @return
    	 */
    	@ExceptionHandler(value = KaptchaException.class)
    	public BaseResponse kaptchaExceptionHandler(KaptchaException kaptchaException) {
    		if (kaptchaException instanceof KaptchaIncorrectException) {
    			return BaseResponse.failure("验证码不正确");
    		} else if (kaptchaException instanceof KaptchaNotFoundException) {
    			return BaseResponse.failure("验证码未找到");
    		} else if (kaptchaException instanceof KaptchaTimeoutException) {
    			return BaseResponse.failure("验证码过期");
    		} else {
    			return BaseResponse.failure("验证码渲染失败");
    		}
    
    	}
    
    }

### controller调用 ###

/**
     * 图形验证码控制器
     * @author gourd
     */
    @RestController
    @RequestMapping("/kaptcha")
    @Api(tags = "kaptcha", description = "kaptcha操作" )
    public class KaptchaController {
    
      @Autowired
      private Kaptcha kaptcha;
    
      @GetMapping("/render")
      @ApiOperation(value = "生成验证码")
      public BaseResponse render() {
        kaptcha.render();
        return BaseResponse.ok("生成验证码成功");
      }
    
      @PostMapping("/valid")
      @ApiOperation(value = "校验验证码")
      public BaseResponse validDefaultTime(@RequestParam String code) {
        //默认过期时间900秒
        boolean validate = kaptcha.validate(code);
        if(!validate){
          BaseResponse.failure("验证码校验失败");
        }
        return BaseResponse.ok("验证码校验成功");
      }
    
      @PostMapping("/validTime")
      @ApiOperation(value = "校验验证码")
      public BaseResponse validWithTime(@RequestParam String code,@RequestParam Long times) {
        boolean validate =kaptcha.validate(code, times);
        if(!validate){
          BaseResponse.failure("验证码校验失败");
        }
        return BaseResponse.ok("验证码校验成功");
      }
    
    }

### h5页面 ###

<!DOCTYPE html>
    <html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="layout">
    <head lang="en">
        <meta charset="UTF-8"></meta>
        <title>验证码</title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    <div>
        
        <img alt="验证码" onclick="this.src='/hu/kaptcha/render?d='+new Date()*1"  src="/hu/kaptcha/render"/>
    </div>
    <form id="form">
        <input type="text" name="code" />
        <input value="提交" type="button" onclick="validate()"/>
    </form>
    </body>
    <script>
        // 匿名函数的写法
        var validate = function(){
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/hu/kaptcha/valid" ,//url
                data: $('#form').serialize(),
                success: function (result) {
                    alert(result.msg);
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    
    </script>
    </html>

### 测试效果 ###

### ![20200108153133790.gif][]附配置信息表 ###

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:middle;width:211pt;">Constant</td> 
   <td style="vertical-align:middle;width:398pt;">描述</td> 
   <td style="vertical-align:middle;width:314pt;">默认值</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.border</td> 
   <td style="vertical-align:middle;width:398pt;">图片边框，合法值：yes , no</td> 
   <td style="vertical-align:middle;">yes</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.border.color</td> 
   <td style="vertical-align:middle;width:398pt;">边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.</td> 
   <td style="vertical-align:middle;">black</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.border.thickness</td> 
   <td style="vertical-align:middle;width:398pt;">边框厚度，合法值：&gt;0</td> 
   <td style="vertical-align:middle;">1</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.image.width</td> 
   <td style="vertical-align:middle;width:398pt;">图片宽</td> 
   <td style="vertical-align:middle;">200</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.image.height</td> 
   <td style="vertical-align:middle;width:398pt;">图片高</td> 
   <td style="vertical-align:middle;">50</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.producer.impl</td> 
   <td style="vertical-align:middle;width:398pt;">图片实现类</td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.impl.DefaultKaptcha</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.impl</td> 
   <td style="vertical-align:middle;width:398pt;">文本实现类</td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.text.impl.DefaultTextCreator</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.char.string</td> 
   <td style="vertical-align:middle;width:398pt;">文本集合，验证码值从此集合中获取</td> 
   <td style="vertical-align:middle;">abcde2345678gfynmnpwx</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.char.length</td> 
   <td style="vertical-align:middle;width:398pt;">验证码长度</td> 
   <td style="vertical-align:middle;">5</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.font.names</td> 
   <td style="vertical-align:middle;width:398pt;">字体</td> 
   <td style="vertical-align:middle;">Arial</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.font.size</td> 
   <td style="vertical-align:middle;width:398pt;">字体大小</td> 
   <td style="vertical-align:middle;">40px.</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.font.color</td> 
   <td style="vertical-align:middle;width:398pt;">字体颜色，合法值： r,g,b 或者 white,black,blue.</td> 
   <td style="vertical-align:middle;">black</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.textproducer.char.space</td> 
   <td style="vertical-align:middle;width:398pt;">文字间隔</td> 
   <td style="vertical-align:middle;">2</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.noise.impl</td> 
   <td style="vertical-align:middle;width:398pt;">干扰实现类</td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.impl.DefaultNoise</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.noise.color</td> 
   <td style="vertical-align:middle;width:398pt;">干扰 颜色，合法值： r,g,b 或者 white,black,blue.</td> 
   <td style="vertical-align:middle;">black</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.obscurificator.impl</td> 
   <td style="vertical-align:middle;width:398pt;"> <p>图片样式：</p> <p>水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy</p> </td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.impl.WaterRipple</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.background.impl</td> 
   <td style="vertical-align:middle;width:398pt;">背景实现类</td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.impl.DefaultBackground</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.background.clear.from</td> 
   <td style="vertical-align:middle;width:398pt;">背景颜色渐变，开始颜色</td> 
   <td style="vertical-align:middle;">lightGray</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.background.clear.to</td> 
   <td style="vertical-align:middle;width:398pt;">背景颜色渐变，结束颜色</td> 
   <td style="vertical-align:middle;">white</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.word.impl</td> 
   <td style="vertical-align:middle;width:398pt;">文字渲染器</td> 
   <td style="vertical-align:middle;">com.google.code.kaptcha.text.impl.DefaultWordRenderer</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.session.key</td> 
   <td style="vertical-align:middle;width:398pt;">session key</td> 
   <td style="vertical-align:middle;">KAPTCHA_SESSION_KEY</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">kaptcha.session.date</td> 
   <td style="vertical-align:middle;width:398pt;">session date</td> 
   <td style="vertical-align:middle;">KAPTCHA_SESSION_DATE</td> 
  </tr> 
 </tbody> 
</table>

===============================================

代码均已上传至本人的开源项目

![20191230131831499.jpeg][]

spring-cloud-plus：[https://blog.csdn.net/HXNLYW/article/details/104635673][https_blog.csdn.net_HXNLYW_article_details_104635673]

[20200108153133790.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8b437713f15447789434dafa610718c5.gif
[20191230131831499.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/074402ce1b124735b22a88a232f59b7b.jpeg
[https_blog.csdn.net_HXNLYW_article_details_104635673]: https://blog.csdn.net/HXNLYW/article/details/104635673