java生成 图片验证码

于 2017-09-14 17:05:31 发布
阅读量273 收藏
点赞数
分类专栏： java生成 图片验证码 java

转载：http://blog.youkuaiyun.com/u010648555/article/details/52261050


Spring整合生成图片验证码。

前端代码：

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ include file="/WEB-INF/tag/tag.jsp" %>  
  3.   
  4. <!DOCTYPE HTML>  
  5. <html>  
  6.   <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8.     <title>${pageTitle}——Powered by TaoJie</title>  
  9.       
  10.     <link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap.min.css">  
  11.     <link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap-theme.min.css">  
  12.     <link href="http://blog.java1234.com/favicon.ico" rel="SHORTCUT ICON">  
  13.     <link rel="stylesheet" href="${ctx}/static/css/login.css">  
  14.     <script src="${ctx}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>  
  15.     <script src="${ctx}/static/bootstrap3/js/bootstrap.min.js"></script>  
  16.       
  17.     <!-- 验证码 验证脚本 -->  
  18.     <script type="text/javascript">  
  19.         $(document).ready(function() {  
  20.             flushValidateCode();    //进入页面就刷新生成验证码  
  21.         });  
  22.           
  23.           
  24.         /* 刷新生成验证码 */  
  25.         function flushValidateCode() {  
  26.             var validateImagObject = document.getElementById("codeValidateImg");  
  27.             validateImagObject.src = "${ctx}/getLoginImageCode?time=" + new Date();//向服务器请求验证码  
  28.         }  
  29.           
  30.           
  31.         /* 校验验证码输入的是否正确 */  
  32.         /* 参数code是输入的验证码的值 */  
  33.         function checkImg(code) {  
  34.             var url = "${ctx}/checkImgCode";  
  35.             /* Ajax */  
  36.             $.get(url, {"validateCode":code}, function(data) {  
  37.                 if(data == "ok") {  
  38.                     $('#validate_info').attr('class', 'glyphicon glyphicon-ok');  
  39.                     document.getElementById('loginForm').onsubmit = function() {return true;};//表单提交  
  40.                 } else {  
  41.                     $('#validate_info').attr('class', 'glyphicon glyphicon-remove');  
  42.                     flushValidateCode();//刷新验证码  
  43.                     document.getElementById('loginForm').onsubmit = function() {return false;};//禁止表单提交  
  44.                 }  
  45.             });  
  46.         }     
  47.     </script>   
  48.       
  49.   </head>  
  50.     
  51.   <body>  
  52.     <div class="login_back">  
  53.         <!-- 登录表单 -->  
  54.         <div class="login">  
  55.             <div class="model_ct">  
  56.                 <div class="model_header">  
  57.                     <h3>用户登录</h3>  
  58.                     <span class="msg">${msg }</span>  
  59.                 </div>  
  60.                 <div class="model_form">  
  61.                     <form:form id="loginForm" action="${ctx }/user/login" method="post" commandName="loginForm">  
  62.                         <div class="txt-fld">  
  63.                             <label for="userName">用户名</label>   
  64.                             <input type="text" id="userName" name="userName" />  
  65.                         </div>  
  66.                         <div class="txt-fld">  
  67.                             <label for="password">密码</label>   
  68.                             <input type="password" id="password" name="password" />  
  69.                         </div>  
  70.                         <div class="txt-fld">  
  71.                             <label for="validateCode">验证码</label>                             
  72.                             <input type="text" id="validateCode" class="float_lf lf_20" name="validateCode"   
  73.                                     maxlength="4" onblur="checkImg(this.value)" style="width:70px;" />  
  74.                             <img id="codeValidateImg" class="float_lf codeValidateImg" />  
  75.                             <a class="float_lf kan" href="javascript:flushValidateCode();">看不清</a>    
  76.                             <span id="validate_info"></span>      
  77.                         </div>  
  78.                         <div class="btn-fld">  
  79.                             <button class="submit" id="btnLogin">登 录 »</button>  
  80.                         </div>      
  81.                     </form:form>  
  82.                       
  83.                     <p><a class="float_lf" href="${ctx }/index">返回主页</a>还没有账号？ <a href="${ctx }/user/register">点击注册</a></p>  
  84.                 </div>  
  85.             </div>  
  86.         </div>      
  87.     </div>  
  88.       
  89.   </body>  
  90. </html>  


前端代码主要需要两部分：（1）验证码显示和填写的区域（2）刷新和验证的javascript脚本


后端生成验证码的工具类：

[java]  view plain  copy
 print ?
  1. package com.tao.myBlogV3.core.util;  
  2.   
  3. import java.awt.Color;  
  4. import java.awt.Font;  
  5. import java.awt.Graphics;  
  6. import java.awt.image.BufferedImage;  
  7. import java.io.ByteArrayOutputStream;  
  8. import java.util.Random;  
  9.   
  10. import javax.imageio.ImageIO;  
  11. import javax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13.   
  14.   
  15. /** 
  16.  * 生成验证码的工具类 
  17.  * @author Tao 
  18.  * 
  19.  */  
  20. public class RandomValidateCode {  
  21.       
  22.     private Random random = new Random();  
  23.     private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机生成字符串的取值范围  
  24.       
  25.     private int width = 80;     //图片宽度  
  26.     private int height = 26;    //图片高度  
  27.     private int StringNum = 4;  //验证码图片中随机产生字符的数量  
  28.     private int lineSize = 40;  //干扰线数量  
  29.       
  30.     /** 
  31.      * 获取随机字符,并返回字符的String格式 
  32.      * @param index (指定位置) 
  33.      * @return 
  34.      */  
  35.     public String getRandomChar(int index) {  
  36.         //获取指定位置index的字符，并转换成字符串表示形式  
  37.         return String.valueOf(randString.charAt(index));  
  38.     }  
  39.       
  40.     /** 
  41.      * 获得字体 
  42.      * @return 
  43.      */  
  44.     private Font getFont() {  
  45.         return new Font("Fixedsys", Font.CENTER_BASELINE, 18);  //名称、样式、磅值  
  46.     }  
  47.       
  48.     /** 
  49.      * 获得颜色 
  50.      * @param fc 
  51.      * @param bc 
  52.      * @return 
  53.      */  
  54.     private Color getRandColor(int frontColor, int backColor) {  
  55.         if(frontColor > 255)  
  56.             frontColor = 255;  
  57.         if(backColor > 255)  
  58.             backColor = 255;  
  59.           
  60.         int red = frontColor + random.nextInt(backColor - frontColor - 16);  
  61.         int green = frontColor + random.nextInt(backColor - frontColor -14);  
  62.         int blue = frontColor + random.nextInt(backColor - frontColor -18);  
  63.         return new Color(red, green, blue);  
  64.     }  
  65.       
  66.     /** 
  67.      * 绘制字符串,返回绘制的字符串 
  68.      * @param g 
  69.      * @param randomString 
  70.      * @param i 
  71.      * @return 
  72.      */  
  73.     private String drawString(Graphics g, String randomString, int i) {  
  74.         g.setFont(getFont());   //设置字体  
  75.         g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));//设置颜色  
  76.         String randChar = String.valueOf(getRandomChar(random.nextInt(randString.length())));  
  77.         randomString += randChar;   //组装  
  78.         g.translate(random.nextInt(3), random.nextInt(3));  
  79.         g.drawString(randChar, 13*i, 16);  
  80.         return randomString;  
  81.     }  
  82.       
  83.     /** 
  84.      * 绘制干扰线 
  85.      * @param g 
  86.      */  
  87.     private void drawLine(Graphics g) {  
  88.         //起点(x,y)  偏移量x1、y1  
  89.         int x = random.nextInt(width);  
  90.         int y = random.nextInt(height);  
  91.         int xl = random.nextInt(13);  
  92.         int yl = random.nextInt(15);  
  93.         g.drawLine(x, y, x + xl, y + yl);  
  94.     }  
  95.       
  96.     /** 
  97.      * 生成随机图片 
  98.      * @param request 
  99.      * @param response 
  100.      * @param key 
  101.      */  
  102.     public void getRandomCode(HttpServletRequest request, HttpServletResponse response, String key) {  
  103.           
  104.         // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类  
  105.         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);  
  106.         Graphics g = image.getGraphics();// 获得BufferedImage对象的Graphics对象  
  107.         g.fillRect(0, 0, width, height);//填充矩形  
  108.         g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//设置字体  
  109.         g.setColor(getRandColor(110, 133));//设置颜色  
  110.         //绘制干扰线  
  111.         for(int i = 0; i <= lineSize; i++) {  
  112.             drawLine(g);  
  113.         }  
  114.         //绘制字符  
  115.         String randomString = "";  
  116.         for(int i = 1; i <= StringNum; i++) {  
  117.             randomString = drawString(g, randomString, i);  
  118.         }  
  119.           
  120.         //将生成的验证码放入session  
  121.         String sessionId = request.getSession().getId();//获取session的id  
  122.         request.getSession().setAttribute(sessionId+key, randomString);  
  123.         System.out.println("生成的验证码为：" + randomString);  
  124.           
  125.         g.dispose();//释放绘图资源  
  126.         try {  
  127.             ByteArrayOutputStream tmp = new ByteArrayOutputStream();  
  128.             ImageIO.write(image, "png", tmp);//将会值得图片输出到流  
  129.             tmp.close();  
  130.             Integer contentLength = tmp.size();//内容长度  
  131.             response.setHeader("content-length", contentLength+"");  
  132.             response.getOutputStream().write(tmp.toByteArray());//通过response输出图片  
  133.         } catch (Exception e) {  
  134.             e.printStackTrace();  
  135.         } finally {  
  136.             try {  
  137.                 response.getOutputStream().flush();  
  138.                 response.getOutputStream().close();  
  139.             } catch (Exception e2) {  
  140.                 e2.printStackTrace();  
  141.             }  
  142.         }     
  143.     }  
  144.       
  145. }  


后端负责验证码请求处理的Controller：

[java]  view plain  copy
 print ?
  1. package com.tao.myBlogV3.web.controller;  
  2.   
  3. import javax.servlet.http.HttpServletRequest;  
  4. import javax.servlet.http.HttpServletResponse;  
  5.   
  6. import org.springframework.stereotype.Controller;  
  7. import org.springframework.web.bind.annotation.RequestMapping;  
  8. import org.springframework.web.bind.annotation.ResponseBody;  
  9.   
  10. import com.tao.myBlogV3.core.util.RandomValidateCode;  
  11. import com.tao.myBlogV3.core.util.StringUtil;  
  12.   
  13. /** 
  14.  * 负责生成图片的控制器 
  15.  * @author Tao 
  16.  * 
  17.  */  
  18. @Controller  
  19. @RequestMapping(value="/")  
  20. public class ImageGenerateController {  
  21.       
  22.     /* 验证码管理 */  
  23.       
  24.     //刷新(向服务器请求)生成验证码  
  25.     @RequestMapping(value="/getLoginImageCode")  
  26.     @ResponseBody  
  27.     public String getLoginImageCode(HttpServletRequest request, HttpServletResponse response) {  
  28.           
  29.         response.setContentType("image/jpeg");//设置响应类型，告知浏览器输出的是图片  
  30.         response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容  
  31.         response.setHeader("Cache-Control", "no-cache");  
  32.         response.setHeader("Set-Cookie", "name=value; HttpOnly");//设置HttpOnly属性,防止Xss攻击  
  33.         response.setDateHeader("Expire", 0);  
  34.         RandomValidateCode randomValidateCode = new RandomValidateCode();  
  35.         try {  
  36.             randomValidateCode.getRandomCode(request, response, "imageCode");//生成图片并通过response输出  
  37.         } catch (Exception e) {  
  38.             e.printStackTrace();  
  39.         }  
  40.         return "";  
  41.     }  
  42.   
  43.     /** 
  44.      * 验证码  验证 
  45.      * @param request 
  46.      * @param response 
  47.      * @return 
  48.      */  
  49.     @RequestMapping(value="/checkImgCode")  
  50.     @ResponseBody  
  51.     public String checkImgCode(HttpServletRequest request, HttpServletResponse response) {  
  52.           
  53.         //1：获取用户输入的验证码(字符串)  
  54.         String inputValidateCode = request.getParameter("validateCode");  
  55.         //2：获取用户session中存储的本次生成的验证码信息(字符串)  
  56.         String sessionId = request.getSession().getId();  
  57.         String validateCode = (String) request.getSession().getAttribute(sessionId+"imageCode");  
  58.         //3：判断验证码是否输入的正确  
  59.         if(!StringUtil.isBlank(inputValidateCode) && inputValidateCode.equalsIgnoreCase(validateCode)) {  
  60.             //非空并且匹配上了  
  61.             return "ok";  
  62.         } else {  
  63.             return "error";  
  64.         }     
  65.     }  
  66.       
  67. }  

4:总结 
验证码在很多地方都会遇到，实现的方法和形式也有很多，主要的目的就是为了安全，防止一些恶意的攻击等。希望你可以从中学到一些东西，如果对里面的地方有不懂的地方，可以给我留言或者直接联系我！希望我们共同进步！

5：源码地址： 
点击进入springmvc生成验证码源码地址


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值