Web开发中的验证码图片的生成-基于Java的实现

时间 2019-11-29

标签 web 开发验证码图片生成基于 java 实现栏目 HTML 繁體版

原文原文链接

你们在使用Web网站的时候，常常会发现有个验证码须要输入，这里验证码用来作什么事情呢？其实很简单，验证码图片的做用是让用户经过肉眼来观察图片，把图片中的内容填写到输入框中，在登陆的时候，若是验证码内容输入不正确，就算你的登陆用户名和密码都正确也不行，这样能够很好的防治有人用程序不停的猜想别人的账号和密码，由于程序难以从一个图片中提取验证码的内容，从而难以使用程序来进行重复猜想，这样只是凭人工的办法，是很难在短期内猜出账号和密码的。因此验证码图片实际是为了保护用户的权益。那么到底如何在web开发中使用验证码图片呢？
html

验证码图片是由程序动态产生的，每次访问的内容都是随机的。那么如何采用程序动态产生图片，并可以显示在客户端页面中呢？原理很简单，对于java而言，咱们首先开发一个Servlet，这个Servlet的任务就是给客户端产生一个验证码图片的输入，示例代码以下：java

  
  
  
  
   
   
   
   package com.web.servlet; 
   
   
   
   import java.awt.Color; 
   
   
   
   import java.awt.Graphics; 
   
   
   
   import java.awt.p_w_picpath.BufferedImage; 
   
   
   
   import java.io.IOException; 
   
   
   
   import javax.servlet.ServletException; 
   
   
   
   import javax.servlet.ServletOutputStream; 
   
   
   
   import javax.servlet.http.HttpServletRequest; 
   
   
   
   import javax.servlet.http.HttpServletResponse; 
   
   
   
   import com.sun.p_w_picpath.codec.jpeg.JPEGCodec; 
   
   
   
   import com.sun.p_w_picpath.codec.jpeg.JPEGImageEncoder; 
   
   
   
   public class ValidateImgServlet extends javax.servlet.http.HttpServlet implements 
   
   
   
   javax.servlet.Servlet { 
   
   
   
       private static final long serialVersionUID = 1L; 
   
   
   
    
   
   
   
       protected void doGet(HttpServletRequest request, HttpServletResponse response) 
   
   
   
   throws ServletException, IOException { 
   
   
   
           response.setContentType("p_w_picpath/jpeg"); 
   
   
   
           
   
   
   
           //产生四位验证码 
   
   
   
           StringBuffer sb = new StringBuffer(4); 
   
   
   
           for(int i=0; i<4; i++) { 
   
   
   
               int n = (int)(Math.random() * 10); 
   
   
   
               sb.append(n); 
   
   
   
           } 
   
   
   
           String validateCode = sb.toString(); 
   
   
   
           //将验证码记录在session中，便于用户输入以后的验证 
   
   
   
           request.getSession().setAttribute("ValidateCode", validateCode); 
   
   
   
           
   
   
   
           //建立缓存图片 
   
   
   
           BufferedImage p_w_picpath = new BufferedImage(80, 25, BufferedImage.TYPE_INT_RGB); 
   
   
   
           Graphics g = p_w_picpath.getGraphics(); 
   
   
   
                       
   
   
   
           g.setColor(Color.LIGHT_GRAY); 
   
   
   
           g.fillRect(0, 0, 80, 25); 
   
   
   
           g.setColor(Color.BLACK); 
   
   
   
           g.drawString(validateCode, 10, 20); 
   
   
   
           g.dispose(); 
   
   
   
           ServletOutputStream outStream = response.getOutputStream(); 
   
   
   
           JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outStream); 
   
   
   
           encoder.encode(p_w_picpath); 
   
   
   
           outStream.close(); 
   
   
   
       }                      
   
   
   
   }

在web.xml中对这个Servlet进行配置，配置信息以下：web

  
  
  
  
   
   
   
   <servlet> 
   
   
   
           <description></description> 
   
   
   
           <display-name>ValidateImgServlet</display-name> 
   
   
   
           <servlet-name>ValidateImgServlet</servlet-name> 
   
   
   
           <servlet-class>com.web.servlet.ValidateImgServlet</servlet-class> 
   
   
   
       </servlet> 
   
   
   
       <servlet-mapping> 
   
   
   
           <servlet-name>ValidateImgServlet</servlet-name> 
   
   
   
           <url-pattern>/validateimg.jpg</url-pattern> 
   
   
   
       </servlet-mapping>

好了，如今咱们能够在登陆页面中使用这个动态的验证码图片了，login.jsp页面内容以下：
数组

  
  
  
  
   
   
   
   <%@ page language="java" contentType="text/html; charset=UTF-8" 
   
   
   
       pageEncoding="UTF-8"%> 
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
   
   
   
   loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>Insert title here</title> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       请输入登陆信息:<br /> 
   
   
   
       <form name="login_form" method="post" action="login.action"> 
   
   
   
       用户名称:<input type="text" name="username" /><br /> 
   
   
   
       用户密码:<input type="password" name="password" /><br /> 
   
   
   
       验证码:<input type="text" name="validatecode" /><img src="validateimg.jpg" border="0" />
   
   
   
   <br /> 
   
   
   
       <input type="submit" value="登陆" /> 
   
   
   
       </form> 
   
   
   
   </body> 
   
   
   
   </html>

到这里，若是你在web容器中运行这个jsp，你将会在浏览器中看见一个带有验证码图片的登陆表单，后续的验证任务就交给你了。祝你好运！
浏览器

可是这个验证码不是很美观，彻底有理由弄得更真实些。修改代码：缓存

  
  
  
  
   
   
   
   package com.servlet; 
   
   
   
    
   
   
   
   import java.awt.Color; 
   
   
   
   import java.awt.Font; 
   
   
   
   import java.awt.Graphics2D; 
   
   
   
   import java.awt.p_w_picpath.BufferedImage; 
   
   
   
   import java.util.Random; 
   
   
   
   import javax.p_w_picpathio.ImageIO; 
   
   
   
   import javax.servlet.ServletException; 
   
   
   
   import javax.servlet.ServletOutputStream; 
   
   
   
   import javax.servlet.http.HttpServlet; 
   
   
   
   import javax.servlet.http.HttpServletRequest; 
   
   
   
   import javax.servlet.http.HttpServletResponse; 
   
   
   
   import javax.servlet.http.HttpSession; 
   
   
   
    
   
   
   
   /** 
   
   
   
    * 生成随机验证码 
   
   
   
    *  
   
   
   
    * @author bitiliu 
   
   
   
    *  
   
   
   
    */ 
   
   
   
   public class ValidateCodeServlet extends HttpServlet { 
   
   
   
       private static final long serialVersionUID = 1L; 
   
   
   
       // 验证码图片的宽度。 
   
   
   
       private int width = 160; 
   
   
   
       // 验证码图片的高度。 
   
   
   
       private int height = 20; 
   
   
   
       // 验证码字符个数 
   
   
   
       private int codeCount = 4; 
   
   
   
    
   
   
   
       private int x = 0; 
   
   
   
       // 字体高度 
   
   
   
       private int fontHeight; 
   
   
   
       private int codeY; 
   
   
   
       char[] codeSequence = { '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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; 
   
   
   
    
   
   
   
       /** 
   
   
   
        * 初始化验证图片属性 
   
   
   
        */ 
   
   
   
       public void init() throws ServletException { 
   
   
   
           // 从web.xml中获取初始信息 
   
   
   
           // 宽度 
   
   
   
           String strWidth = this.getInitParameter("width"); 
   
   
   
           // 高度 
   
   
   
           String strHeight = this.getInitParameter("height"); 
   
   
   
           // 字符个数 
   
   
   
           String strCodeCount = this.getInitParameter("codeCount"); 
   
   
   
           // 将配置的信息转换成数值 
   
   
   
           try { 
   
   
   
               if (strWidth != null && strWidth.length() != 0) { 
   
   
   
                   width = Integer.parseInt(strWidth); 
   
   
   
               } 
   
   
   
               if (strHeight != null && strHeight.length() != 0) { 
   
   
   
                   height = Integer.parseInt(strHeight); 
   
   
   
               } 
   
   
   
               if (strCodeCount != null && strCodeCount.length() != 0) { 
   
   
   
                   codeCount = Integer.parseInt(strCodeCount); 
   
   
   
               } 
   
   
   
           } catch (NumberFormatException e) { 
   
   
   
           } 
   
   
   
           x = width / (codeCount + 1); 
   
   
   
           fontHeight = height - 2; 
   
   
   
           codeY = height - 4; 
   
   
   
       } 
   
   
   
    
   
   
   
       protected void service(HttpServletRequest req, HttpServletResponse resp) 
   
   
   
               throws ServletException, java.io.IOException { 
   
   
   
           // 定义图像buffer 
   
   
   
           BufferedImage buffImg = new BufferedImage(width, height, 
   
   
   
                   BufferedImage.TYPE_INT_RGB); 
   
   
   
           Graphics2D g = buffImg.createGraphics(); 
   
   
   
           // 建立一个随机数生成器类 
   
   
   
           Random random = new Random(); 
   
   
   
           // 将图像填充为白色 
   
   
   
           g.setColor(Color.WHITE); 
   
   
   
           g.fillRect(0, 0, width, height); 
   
   
   
           // 建立字体，字体的大小应该根据图片的高度来定。 
   
   
   
           Font font = new Font("Fixedsys", Font.PLAIN, fontHeight); 
   
   
   
           // 设置字体。 
   
   
   
           g.setFont(font); 
   
   
   
           // 画边框。 
   
   
   
           g.setColor(Color.BLACK); 
   
   
   
           g.drawRect(0, 0, width - 1, height - 1); 
   
   
   
           // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。 
   
   
   
           g.setColor(Color.BLACK); 
   
   
   
           for (int i = 0; i < 160; i++) { 
   
   
   
               int x = random.nextInt(width); 
   
   
   
               int y = random.nextInt(height); 
   
   
   
               int xl = random.nextInt(12); 
   
   
   
               int yl = random.nextInt(12); 
   
   
   
               g.drawLine(x, y, x + xl, y + yl); 
   
   
   
           } 
   
   
   
           // randomCode用于保存随机产生的验证码，以便用户登陆后进行验证。 
   
   
   
           StringBuffer randomCode = new StringBuffer(); 
   
   
   
           int red = 0, green = 0, blue = 0; 
   
   
   
           // 随机产生codeCount数字的验证码。 
   
   
   
           for (int i = 0; i < codeCount; i++) { 
   
   
   
               // 获得随机产生的验证码数字。 
   
   
   
               String strRand = String.valueOf(codeSequence[random.nextInt(36)]); 
   
   
   
               // 产生随机的颜色份量来构造颜色值，这样输出的每位数字的颜色值都将不一样。 
   
   
   
               red = random.nextInt(255); 
   
   
   
               green = random.nextInt(255); 
   
   
   
               blue = random.nextInt(255); 
   
   
   
               // 用随机产生的颜色将验证码绘制到图像中。 
   
   
   
               g.setColor(new Color(red, green, blue)); 
   
   
   
               g.drawString(strRand, (i + 1) * x, codeY); 
   
   
   
               // 将产生的四个随机数组合在一块儿。 
   
   
   
               randomCode.append(strRand); 
   
   
   
           } 
   
   
   
           // 将四位数字的验证码保存到Session中。 
   
   
   
           HttpSession session = req.getSession(); 
   
   
   
           session.setAttribute("validateCode", randomCode.toString()); 
   
   
   
           // 禁止图像缓存。 
   
   
   
           resp.setHeader("Pragma", "no-cache"); 
   
   
   
           resp.setHeader("Cache-Control", "no-cache"); 
   
   
   
           resp.setDateHeader("Expires", 0); 
   
   
   
           resp.setContentType("p_w_picpath/jpeg"); 
   
   
   
           // 将图像输出到Servlet输出流中。 
   
   
   
           ServletOutputStream sos = resp.getOutputStream(); 
   
   
   
           ImageIO.write(buffImg, "jpeg", sos); 
   
   
   
           sos.close(); 
   
   
   
       } 
   
   
   
   } 
  
  
  
  
web.xml 内容为：session
 app
   
   
   
   
    
    
    
    <body> 
    
    
    
        请输入登陆信息:<br /> 
    
    
    
        <form name="login_form" method="post" action="login.action"> 
    
    
    
        用户名称:<input type="text" name="username" /><br /> 
    
    
    
        用户密码:<input type="password" name="password" /><br /> 
    
    
    
        验证码:<input type="text" name="validatecode" /><img src="validateCodeServlet" 
    
    
    
    border="0" /><br /> 
    
    
    
        <input type="submit" value="登陆" /> 
    
    
    
        </form> 
    
    
    
    </body>