Spring Boot集成Kaptcha实现图片验证码

àì夳堔傛蜴生んèń 2022-03-11 07:50 300阅读 0赞

废话不多说，直接开始

首先，在pom.xml用引入Kaptcha依赖

<dependency>
               <groupId>com.github.penggle</groupId>
               <artifactId>kaptcha</artifactId>
               <version>2.3.2</version>
        </dependency>

由于springBoot没有xml配置，是采用配置类来实现的自定义配置，所以创建一个自定义配置类，这个配置类就是用来定义验证码各自参数的：

//验证码配置类
    @Component
    public class KaptchaConfig {
    	@Bean  
        public DefaultKaptcha getDefaultKaptcha(){  
            DefaultKaptcha defaultKaptcha = new DefaultKaptcha();  
            Properties properties = new Properties();  
            properties.setProperty("kaptcha.border", "yes");  //是否有边框
            properties.setProperty("kaptcha.border.color", "105,179,90"); //边框颜色 
            properties.setProperty("kaptcha.textproducer.font.color", "green");//字体颜色
            properties.setProperty("kaptcha.noise.color", "0,255,255");  //干扰颜色
            properties.setProperty("kaptcha.image.width", "110");  //宽度
            properties.setProperty("kaptcha.image.height", "40");  //高度
            properties.setProperty("kaptcha.textproducer.font.size", "30"); //字体大小
            properties.setProperty("kaptcha.textproducer.char.space", "3"); //文字间距
            properties.setProperty("kaptcha.session.key", "code");  
            properties.setProperty("kaptcha.textproducer.char.length", "4");  //验证码个数
            properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");  //字体样式
            Config config = new Config(properties);  
            defaultKaptcha.setConfig(config);  
    
            return defaultKaptcha;  
        }  
    }

Kaptcha参数设置如下：

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

配置完成后，需要定义一个接口用来获取验证码图片的数据，然后把图片验证码的值保存在session中，在用户登录时，可以判断输入的验证码和session中的验证码是否相同。

/**
    	 * 获取验证码 的 请求路径
    	 * 
    	 * @param httpServletRequest
    	 * @param httpServletResponse
    	 * @throws Exception
    	 */
    	@RequestMapping("/defaultKaptcha")
    	@ApiOperation(value = "后台-获取图片验证码接口")
    	public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
    			throws Exception {
    		byte[] captchaChallengeAsJpeg = null;
    		ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
    		try {
    			// 生产验证码字符串并保存到session中
    			String createText = captchaProducer.createText();
    			httpServletRequest.getSession().setAttribute("vrifyCode", createText);
    			log.info("验证码值：" + httpServletRequest.getSession().getAttribute("vrifyCode"));
    			// 使用生产的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中
    			BufferedImage challenge = captchaProducer.createImage(createText);
    			ImageIO.write(challenge, "jpg", jpegOutputStream);
    		} catch (IllegalArgumentException e) {
    			httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
    			return;
    		}
    
    		// 定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组
    		captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
    		httpServletResponse.setHeader("Cache-Control", "no-store");
    		httpServletResponse.setHeader("Pragma", "no-cache");
    		httpServletResponse.setDateHeader("Expires", 0);
    		httpServletResponse.setContentType("image/jpeg");
    		ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
    		responseOutputStream.write(captchaChallengeAsJpeg);
    		responseOutputStream.flush();
    		responseOutputStream.close();
    	}

当前端的<img>标签指向这个接口时，他就会获取到图片验证码，下面的方法是点击验证码图片，刷新验证码。

<body>
    	<p>111</p>
    	<img border=0 src="http://localhost:8015/api/defaultKaptcha" id="imageMask" onclick="myReload()" style="cursor: pointer">
    </body>
    <script>
    function myReload() {
        document.getElementById("imageMask").src = document.getElementById("imageMask").src + "?nocache=" + new Date().getTime();
    }
    </script>

一切准备就绪后，启动项目查看结果：

![2019030716251330.png][]

控制台打印的验证码值：![20190307162558834.png][]

[2019030716251330.png]: /images/20220311/4a92f160658c4e06bb3db784f5da9b1c.png
[20190307162558834.png]: /images/20220311/26b88e3f8d4645fb998b89546bcc7d8e.png