springboot实现kaptcha验证码

登陆时考虑到安全性，会增加验证码的功能，这里采用的是google的kaptcha；spirngboot是轻便，独立，使得基于spring的应用开发变得特别简单。这里讲下登陆时验证码结合springboot的用法。

首先第一步引入kaptcha的jar包依赖。

		<dependency>
    		 <groupId>org.springframework.boot</groupId>
   			 <artifactId>spring-boot-starter-thymeleaf</artifactId>
  		 	 <version>1.5.4.RELEASE</version>
		</dependency>

然后就是配置生成图像验证码的属性，以下是该代码工具类，你也可以更具自己的需求更改属性。

	import java.awt.Color;  
	import java.awt.Font;  
	import java.awt.Graphics;  
	import java.awt.image.BufferedImage;  
	import java.io.FileOutputStream;  
	import java.io.IOException;  
	import java.io.OutputStream;  
	import java.util.Random;  
	  
	import javax.imageio.ImageIO;

import org.springframework.stereotype.Component;  
	  
	/** 
	 * @author ld 
	 * @date 2017年11月6日 
	 * @param  
	 * @desc 图形验证码生成 
	 *  
	 */  
	@Component  
	public class VerifyUtil {  
	    // 验证码字符集    
	        private static final char[] chars = {     
	            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',     
	            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',    
	            'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',    
	            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',     
	            'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};    
	        // 字符数量    
	        private static final int SIZE = 4;    
	        // 干扰线数量    
	        private static final int LINES = 5;    
	        // 宽度    
	        private static final int WIDTH = 80;    
	        // 高度    
	        private static final int HEIGHT = 40;    
	        // 字体大小    
	        private static final int FONT_SIZE = 30;    
	  
	        /**  
	         * 生成随机验证码及图片  
	         * Object[0]：验证码字符串；  
	         * Object[1]：验证码图片。  
	         */    
	        public static Object[] createImage() {    
	            StringBuffer sb = new StringBuffer();    
	            // 1.创建空白图片    
	            BufferedImage image = new BufferedImage(    
	                    WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);    
	            // 2.获取图片画笔    
	            Graphics graphic = image.getGraphics();    
	            // 3.设置画笔颜色    
	            graphic.setColor(Color.LIGHT_GRAY);    
	            // 4.绘制矩形背景    
	            graphic.fillRect(0, 0, WIDTH, HEIGHT);    
	            // 5.画随机字符    
	            Random ran = new Random();    
	            for (int i = 0; i <SIZE; i++) {    
	                // 取随机字符索引    
	                int n = ran.nextInt(chars.length);    
	                // 设置随机颜色    
	                graphic.setColor(getRandomColor());    
	                // 设置字体大小    
	                graphic.setFont(new Font(    
	                        null, Font.BOLD + Font.ITALIC, FONT_SIZE));    
	                // 画字符    
	                graphic.drawString(    
	                        chars[n] + "", i * WIDTH / SIZE, HEIGHT*2/3);    
	                // 记录字符    
	                sb.append(chars[n]);    
	            }    
	            // 6.画干扰线    
	            for (int i = 0; i < LINES; i++) {    
	                // 设置随机颜色    
	                graphic.setColor(getRandomColor());    
	                // 随机画线    
	                graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT),    
	                        ran.nextInt(WIDTH), ran.nextInt(HEIGHT));    
	            }    
	            // 7.返回验证码和图片    
	            return new Object[]{sb.toString(), image};    
	        }    
	  
	        /**  
	         * 随机取色  
	         */    
	        public static Color getRandomColor() {    
	            Random ran = new Random();    
	            Color color = new Color(ran.nextInt(256),     
	                    ran.nextInt(256), ran.nextInt(256));    
	            return color;    
	        }    
	  
	        public static void main(String[] args) throws IOException {    
	            Object[] objs = createImage();    
	            BufferedImage image = (BufferedImage) objs[1];    
	            OutputStream os = new FileOutputStream("d:/1.png");    
	            ImageIO.write(image, "png", os);    
	            os.close();    
	        }    
}  

在controller中使用：

首先需要利用工具生成验证码与图片，然后将验证码存入session中。这个过程就是需要将valicode方法返回前台页面调用从而展示图片验证码。

 @RequestMapping("/valicode")  
	    public void valicode(HttpServletResponse response,HttpSession session) throws Exception{    
	        //利用图片工具生成图片    
	        //第一个参数是生成的验证码，第二个参数是生成的图片    
	        Object[] objs = VerifyUtil.createImage();    
	        //将验证码存入Session    
	        session.setAttribute("imageCode",objs[0]);   
	          
	        //将图片输出给浏览器    
	        BufferedImage image = (BufferedImage) objs[1];    
	        response.setContentType("image/png");    
	        OutputStream os = response.getOutputStream();    
	        ImageIO.write(image, "png", os);  
	    }  

验证的方法:

 @RequestMapping("/login")  
	 public ModelAndView login(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse){  
	     ModelAndView modelAndView = new ModelAndView();  
	     //获取之前放入session中的验证码，也就是生成的
	      String imageCode = (String) httpServletRequest.getSession().getAttribute("imageCode");    
	      //获取你前台页面输入的验证码
	      String parameter = httpServletRequest.getParameter("vrifyCode");  
	      System.out.println("Session  vrifyCode "+imageCode+" form vrifyCode "+parameter);  
	        
	     if (!imageCode.equals(parameter)) {  
	    	 modelAndView.addObject("info", "错误的验证码");  
	    	 modelAndView.setViewName("index");  
	     } else {  
	    	 modelAndView.addObject("info", "登录成功");  
	    	 modelAndView.setViewName("succeed");  
	           
	     }  
	     return modelAndView;  
	 }

jsp模板:

<script type="text/javascript">
	/**
	 * 点击获取随机生成的验证码
	 */
	function changeCode() {
	    $("#vcode").attr('src',
	            'valicode?' + Math.floor(Math.random() * 100));
	}
</script>
<body>  
    <h1 th:text="${info}" />  
    <form action="login" method="post">
    <div>  
   	<!-- <img alt="这是图片" src="valicode"/>  -->
      <img alt="验证码" οnclick="changeCode()" id="vcode" src="valicode" />
    </div>    
      
         <input type="text" name="vrifyCode" />  
        <input type="submit" value="提交"></input>  
    </form>  
</body>  

到这里就图片验证码就完成了。
下面是效果图: