Java實現的驗證碼（Verification Code）

時間 2019-11-17

標籤 java 實現驗證碼 verification code 欄目 Java 简体版

原文原文鏈接

<p>目前，很多網站爲了防止用戶利用機器人自動註冊、登陸、灌水，都採用了驗證碼技術。Java中可由如下代碼生成驗證碼：</p> <p>編寫一個Servlet，用於生成驗證碼圖片： </p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:084fea2b-ea79-4959-9a7c-42e2f8836033" class="wlWriterEditableSmartContent"><pre class="brush: java; gutter: true; first-line: 1; tab-size: 4; toolbar: true; width: 894px; height: 575px;" style=" width: 894px; height: 575px;overflow: auto;">package flybug.hq.vcode;javascript

import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random;html

import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;java

public class GenImageServlet extends HttpServlet {web

private static final long serialVersionUID = 1L;


public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	this.doPost(request, response);
}

 
public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	request.setCharacterEncoding(&quot;UTF-8&quot;);
	response.setContentType(&quot;image/jpeg&quot;);
	
	//建立圖像
	int width = 80;
	int height = 40;
	
	BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
	
	//建立圖層，得到畫筆
	Graphics g = image.getGraphics();
	//設置顏色
	g.setColor(Color.BLACK);
	//畫出矩形
	g.fillRect(0, 0, width, height);
	//畫出邊框
	g.setColor(Color.WHITE);
	g.fillRect(1, 1, width-2, height-2);
	
	//填充字符
	String data = &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&quot;;
	//設置字體
	g.setFont(new Font(&quot;宋體&quot;, Font.BOLD, 30));
	Random random = new Random();
	StringBuffer buff = new StringBuffer();
	//隨機生成4個字符
	for (int i = 0; i &lt; 4; i++) {
		int index = random.nextInt(62);
		String str = data.substring(index, index + 1);
		g.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
		g.drawString(str, 20 * i, 30);
		buff.append(str);
	}
	
	//將獲得的字符串保存到session中
	HttpSession session = request.getSession();
	session.setAttribute(&quot;vCode&quot;, buff.toString());
	
	//畫出10條幹擾線
	for (int i = 0; i &lt; 10; i++) {
		g.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
		g.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));
	}
	
	g.dispose();
	
	ImageIO.write(image, &quot;jpg&quot;, response.getOutputStream());
	
	
	
	 
}

} </pre></div>瀏覽器

<p> </p>緩存

<p>編寫一個jsp頁面，用於顯示該驗證碼： </p>session

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:6e6bbe8a-a52f-4aad-bb8c-e4362cd8118c" class="wlWriterEditableSmartContent"><pre class="brush: xml; gutter: true; first-line: 1; tab-size: 4; toolbar: true; width: 936px; height: 575px;" style=" width: 936px; height: 575px;overflow: auto;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>app

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>">dom

&lt;title&gt;My JSP 'index.jsp' starting page&lt;/title&gt;

 &lt;script type=&quot;text/javascript&quot;&gt;
	function _changeImage() {
		var url = document.getElementById(&quot;img&quot;);
		url.src = &quot;&lt;c:url value='/GenImageServlet' /&gt;&quot;;
	}
	
&lt;/script&gt;

</head>jsp

<body> <form action="<c:url value='ValidateServlet' />" method="post"> <input type="text" name="vCode" /><img src="<c:url value='/GenImageServlet' />"> <a href="javascript:_changeImage();">看不清</a><br /> <input type="submit" value="提交" /> </form> </body>

</html> </pre></div>

<p>顯示結果樣例：</p>

<p>如上圖，點擊看不清，更換驗證碼。在上述jsp代碼中的js腳本，圖片請求的URL沒有變，瀏覽器默認緩存的狀況下，點擊看不清，驗證碼刷新不了；爲此能夠添加一個過濾器，用於設置瀏覽器不緩存該圖片，代碼以下： </p>

import java.io.IOException;

import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse;

public class CacheCtrlFilter implements Filter {

public void destroy() {

}

public void doFilter(ServletRequest req, ServletResponse resp,
		FilterChain chain) throws IOException, ServletException {
	//強轉
	HttpServletResponse response = (HttpServletResponse)resp;
	//設置不緩存的響應頭
	response.setHeader(&quot;expires&quot;, &quot;-1&quot;);
	response.setHeader(&quot;pragma&quot;, &quot;no-cache&quot;);
	response.setHeader(&quot;cache-control&quot;, &quot;no-cache, no-store,must-revalidate&quot;);

	//放行
	chain.doFilter(req, resp);

}

public void init(FilterConfig config) throws ServletException {

}

} </pre></div>

<p>在web.xml文件中配置：</p>

<filter> <filter-name>CacheCtrlFilter</filter-name> <filter-class>flybug.hq.vcode.CacheCtrlFilter</filter-class> </filter>

<filter-mapping> <filter-name>CacheCtrlFilter</filter-name> <url-pattern>/GenImageServlet</url-pattern> </filter-mapping> <servlet> <description> </description> <display-name> </display-name> <servlet-name>GenImageServlet</servlet-name> <servlet-class>flybug.hq.vcode.GenImageServlet</servlet-class> </servlet> <servlet> <description> </description> <display-name> </display-name> <servlet-name>ValidateServlet</servlet-name> <servlet-class>flybug.hq.vcode.ValidateServlet</servlet-class> </servlet>

<servlet-mapping> <servlet-name>GenImageServlet</servlet-name> <url-pattern>/GenImageServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ValidateServlet</servlet-name> <url-pattern>/ValidateServlet</url-pattern> </servlet-mapping>

<welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> </pre></div>

<ul> <li>web.xml中還配置了用來驗證輸入的驗證碼是否正確的ValidateServlet，且每一個驗證碼只能用一次，返回就應該失效： </li> </ul>

import java.io.IOException; import java.io.PrintWriter;

import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;

public class ValidateServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	this.doPost(request, response);
	
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	request.setCharacterEncoding(&quot;UTF-8&quot;);
	response.setContentType(&quot;text/html; charset=utf-8&quot;);
	PrintWriter out = response.getWriter();
	//得到用戶填寫的驗證碼
	String userVCode = request.getParameter(&quot;vCode&quot;);
	//得到session中驗證碼
	HttpSession session = request.getSession();
	String genVCode = (String)session.getAttribute(&quot;vCode&quot;);
	//判斷是否相同
	if(genVCode != null) {
		if(genVCode.equalsIgnoreCase(userVCode)) {
			out.println(&quot;驗證經過！&quot;);
		} else {
			out.println(&quot;驗證碼錯誤！&quot;);
		}
		//驗證碼只容許用一次
		session.removeAttribute(&quot;vCode&quot;);
		
	} else {
		out.println(&quot;驗證碼失效！&quot;);
	}

}

} </pre></div>

<blockquote> <p>注：該過濾器中設置的頭信息在Firefox中有些問題，在網上查了好久也沒有找到有效設置Firefox不緩存的頭信息。若要達到更換驗證碼的效果，能夠將js腳本改成：</p>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:80641dd0-423b-4def-a994-3546477ef682" class="wlWriterEditableSmartContent"><pre class="brush: xml; gutter: true; first-line: 1; tab-size: 4; toolbar: true; width: 936px; height: 128px;" style=" width: 936px; height: 128px;overflow: auto;"> <script type="text/javascript"> function _changeImage() { var url = document.getElementById("img"); url.src = "<c:url value='/GenImageServlet' />?" + new Date().getMilliseconds(); } </script></pre></div>

<p>但這樣作的話，可能會使瀏覽器緩存膨脹。菜鳥一枚，bug衆多，努力，學習中……如有好的解決方法，歡迎指點！</p></blockquote>