在網頁頁面的使用中為防止“非人類”的大量操作和防止一些的資訊備援，增加驗證碼校驗是許多網站常用的方式。

而讓使用者輸入字母和數字組合的驗證碼是最經典也是最常用的方式。

這一篇是純利用現有JDK提供的繪圖類(ImageIO)類制作,這個過程比較複雜且需要了解ImageIO類。

今天釋出的第二篇文章是利用Hutool工具類來實作的，該工具類已經封裝驗證碼所需的相關類等，使用起來較為簡單和友善。

驗證碼的生成和校驗過程均使用Servlet和JSP的結合來實作，Servlet的相關内容可以參閱

Servlet技術:https://mp.weixin.qq.com/s/__e_ef0SI6kVPiRaU0MXJw

如何利用基礎的JSP知識來實作網頁的驗證碼校驗呢？

驗證碼校驗分析

首先要驗證碼的校驗的過程。

驗證碼校驗分為三部分：

生成驗證碼
擷取使用者輸入的驗證碼
判斷驗證碼是否輸入正确

驗證碼的生成實際就是輸出一個圖像，是以在這裡使用ImageIO來生成圖檔，然後結合使用随機數（Random）來實作随機生成驗證上的内容，最後進而展示出來，然後利用Session對象存儲驗證碼的内容。在使用者輸入驗證碼的時候可以用request來擷取使用者輸入的内容，讓其餘Session對象中儲存的驗證碼内容進行比較，若一緻則驗證成功，不一緻就驗證失敗。

生成驗證碼

先建立一個圖檔的緩沖區：

BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);

建立畫布：

Graphics g=bi.getGraphics();

建立顔色：

Color c=new Color(200,150,255);

建立背景顔色：

g.setColor(c);

填充矩形：

g.fillRect(0, 0, 68,22);

将要顯示的驗證碼内容組成元素存入字元串數組：

char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();

建立随機的驗證碼内容：

Random r=new Random();
         int len=ch.length;
         int index; //index用于存放随機數字
         StringBuffer sb=new StringBuffer();
         for(int i=0;i<4;i++)
         {
             index=r.nextInt(len);//産生随機數字
             g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));  //設定顔色
             g.drawString(ch[index]+"",(i*15)+3, 18);//畫數字以及數字的位置
             sb.append(ch[index]);
         }

将驗證碼的内容存入Session及顯示在頁面上：

request.getSession().setAttribute("piccode",sb.toString()); 
 ImageIO.write(bi, "JPG", response.getOutputStream());

完整代碼：

public class ImageServlet  extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//建立圖像緩沖區
        Graphics g = bi.getGraphics(); //通過緩沖區建立一個畫布
        Color c = new Color(200, 150, 255); //建立顔色
        g.setColor(c);//為畫布建立背景顔色
        g.fillRect(0, 0, 68, 22); //填充矩形
        char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉化為字元型的數組
        Random r = new Random();
        int len = ch.length;
        int index; //index用于存放随機數字
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            index = r.nextInt(len);//産生随機數字
            g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));  //設定顔色
            g.drawString(ch[index] + "", (i * 15) + 3, 18);//畫數字以及數字的位置
            sb.append(ch[index]);
        }
        request.getSession().setAttribute("piccode", sb.toString());
        ImageIO.write(bi, "JPG", response.getOutputStream());
    }
}

測試驗證碼

在測試之前需要先在web.xml檔案中配置一下：

<servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>com.kailong.servlet.ImageServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/imageServlet</url-pattern>
    </servlet-mapping>

啟動伺服器後在浏覽器中輸入http://localhost:8080/工程名/imageServlet 即可

驗證碼的生成已經實作成功，下面實作驗證驗證碼的Servlet。

校驗驗證碼

先建立一個jsp使用者界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入界面</title>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
    驗證碼:<input  type="text" name="checkCode"/><br/>
    <img alt="驗證碼" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
    <input type="submit" value="送出">
</form>
</body>
</html>

校驗驗證碼過程：

将生成的驗證碼内容儲存在Session對象中
擷取使用者輸入的驗證碼内容
将兩個内容進行對照

代碼實作：

擷取Session中的驗證碼内容：

String piccode=(String) request.getSession().getAttribute("piccode");

擷取使用者輸入的驗證碼内容：

String checkCode=request.getParameter("checkCode");

驗證碼判斷（使用了PrintWriter将相關内容輸出）

response.setContentType("text/html;charset=utf-8");//解決亂碼問題
PrintWriter out=response.getWriter();
if(checkCode.equals(piccode))
{
    out.println("驗證碼輸入正确！");
}
else
{
    out.println("驗證碼輸入錯誤！！！");
}
out.flush();//将流重新整理
out.close();//将流關閉

完整代碼：

public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException
    //用于驗證驗證碼
    {
        String piccode = (String) request.getSession().getAttribute("piccode");
        String checkCode = request.getParameter("checkCode");
        response.setContentType("text/html;charset=utf-8");//解決亂碼問題
        PrintWriter out = response.getWriter();
        if (checkCode.equals(piccode)) {
            out.println("驗證碼輸入正确！");
        } else {
            out.println("驗證碼輸入錯誤！！！");
        }
        out.flush();//将流重新整理
        out.close();//将流關閉
    }
}

測試驗證碼校驗

測試前先在web.xml檔案中配置一下：

<servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>com.kailong.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/loginServlet</url-pattern>
    </servlet-mapping>

添加驗證碼重新整理

在驗證碼生成之後，使用者在識别的時候可能不能正确識别，這時候就需要重新整理一下重新生成。

添加超連結實作重新整理：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入界面</title>
    <script>
        function reloadCode() {
          var time=new Date().getTime();
          document.getElementById("imagecode").src="<%= request.getContextPath()%>/imageGenerate?d="+time;
        }
    </script>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
    驗證碼:<input  type="text" name="checkCode"/><br/>
    <img alt="驗證碼" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
    <a href="javascript:reloadCode();">看不清楚</a><br>
    <br/><input type="submit" value="送出">
</form>
</body>
</html>

js部分的Date相關是防止浏覽器緩存後不能正常重新整理，添加時間的唯一性來實作能夠及時重新整理和展示。

js 部分可以參閱：JavaScript 語言入門: https://mp.weixin.qq.com/s/37CaC25_1agb-aXBLhUKtg

也可以在ImageServlet中添加防止浏覽器緩存的語句：

response.setHeader("Pragma", "No-cache");

公衆号本文位址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw

歡迎關注公衆号：愚生淺末。

JSP頁面實作驗證碼校驗