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>