前端随机验证码

前端随机验证码

1.前端设置图片标签

2.引用对应的依赖

3.设置生成图片大小、颜色、字体等内容并返回对应的对象

4.对响应的请求返回图片和认证码

1.前端设置图片标签

 <img  src="/vert"  onclick="this.src='/vert?time='+Math.random() " />

这里面的图片来源是/vert的请求，后面单击这个图片会重新请求更新图片信息，请求后面加上参数 time=Math.random() 是为了使浏览器不使用缓存的图片，而是重新请求新的图片。具体的可以百度了解清楚。

2.引用对应的依赖

      <!-- 引入图形验证码依赖 -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

这里引用的是google的认证码依赖。

3.设置生成图片大小、颜色、字体等内容并返回对应的对象

@Bean
	public DefaultKaptcha defaultKaptcha() {
		
		DefaultKaptcha defaultKaptcha=new DefaultKaptcha();
		
		Properties properties=new Properties();		
		properties.put(Constants.KAPTCHA_BORDER, "yes");
		properties.put(Constants.KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
		properties.put(Constants.KAPTCHA_TEXTPRODUCER_FONT_SIZE, "32");
		properties.put(Constants.KAPTCHA_NOISE_COLOR, "red");
		
		Config config=new Config(properties);		
		defaultKaptcha.setConfig(config);
					
		return defaultKaptcha;
			
	}

上面就是配置生成图片的一些配置内容，这些内容大多是比较固定，唯一需要修改是Properties 里面的值，这些值就是具体设置认证码的格式类的，该类的属性值在
com.google.code.kaptcha.util.Config.class中可以查看需要设置的信息，下面贴出来的是源码中设置认证码长度的代码。

public int getTextProducerCharLength(){
		String paramName = Constants.KAPTCHA_TEXTPRODUCER_CHAR_LENGTH;
		String paramValue = this.properties.getProperty(paramName);
		return this.helper.getPositiveInt(paramName, paramValue, 5);
	}

4.对响应的请求返回图片和认证码

	@Resource
	DefaultKaptcha defaultKaptcha;  //认证码
	@RequestMapping("/vert")
	public void vercode(HttpServletRequest request, HttpServletResponse response) throws IOException {
			
		// 获取随机的文本
		String createText = defaultKaptcha.createText();
		// 写入session中使得前端能获取正确的认证码
		request.getSession().setAttribute("picCode", createText);
		// 根据认证码创建认证码的图片
		BufferedImage srcImage = defaultKaptcha.createImage(createText);
		
		ByteArrayOutputStream baOutputStream = new ByteArrayOutputStream();
		ImageIO.write(srcImage, "jpg", baOutputStream);

		//设置响应头，这里基本上是固定这样的。
		response.setHeader("Cache-Control", "no-store");
		response.setHeader("Pragma", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setContentType("image/jpeg");
		
		//获取输出流并将图片写到输出流中去
		ServletOutputStream responseOutputStream = response.getOutputStream();
		responseOutputStream.write(baOutputStream.toByteArray());
	
		responseOutputStream.flush();
		responseOutputStream.close();
	}

上面的代码逻辑就是创建认证码，创建认证码图片，设置响应流，图片写入响应流中

显示效果