給JSP頁面新增驗證碼

阿新 • • 發佈：2019-02-09

前段時間學習Struts2做了個驗證碼的小例子，今天在火狐下檢視遇到點問題，在這裡記錄一下。

製作圖形驗證碼關鍵在於編寫生成圖形的Servlet

package com.petrochina.servlet; 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; 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; public class AuthImg extends HttpServlet { // 設定圖形驗證碼中字串的字型和大小 private Font myFont = new Font("Arial Black", Font.PLAIN, 16); @Override public void init() throws ServletException { super.init(); } // 生成隨機顏色 Color getRandColor(int fc, int bc) { Random random = new Random(); if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } @Override public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 阻止生成的頁面內容被快取，保證每次重新生成隨機驗證碼 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); // 指定圖形驗證碼圖片的大小 int width = 100, height = 20; // 生成一張新圖片 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 在圖片中繪製內容 Graphics g = image.getGraphics(); Random random = new Random(); g.setColor(getRandColor(200, 250)); g.fillRect(1, 1, width - 1, height - 1); g.setColor(new Color(102, 102, 102)); g.drawRect(0, 0, width - 1, height - 1); g.setFont(myFont); // 隨機生成線條，讓圖片看起來更加雜亂 g.setColor(getRandColor(160, 200)); for (int i = 0; i < 155; i++) { int x = random.nextInt(width - 1);// 起點的x座標 int y = random.nextInt(height - 1);// 起點的y座標 int x1 = random.nextInt(6) + 1;// x軸偏移量 int y1 = random.nextInt(12) + 1;// y軸偏移量 g.drawLine(x, y, x + x1, y + y1); } // 隨機生成線條，讓圖片看起來更加雜亂 for (int i = 0; i < 70; i++) { int x = random.nextInt(width - 1); int y = random.nextInt(height - 1); int x1 = random.nextInt(12) + 1; int y1 = random.nextInt(6) + 1; g.drawLine(x, y, x - x1, y - y1); } // 該變數用來儲存系統生成的隨機字串 String sRand = ""; for (int i = 0; i < 6; i++) { // 取得一個隨機字元 String tmp = getRandomChar(); sRand += tmp; // 將系統生成的隨機字元新增到圖形驗證碼圖片上 g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); g.drawString(tmp, 15 * i + 10, 15); } // 取得使用者Session HttpSession session = request.getSession(true); // 將系統生成的圖形驗證碼新增 session.setAttribute("rand", sRand); g.dispose(); // 輸出圖形驗證碼圖片 ImageIO.write(image, "JPEG", response.getOutputStream()); } // 隨機生成一個字元 private String getRandomChar() { int rand = (int) Math.round(Math.random() * 2);// 將0～2的小數四捨五入生成整數 long itmp = 0; char ctmp = '/u0000'; // 根據rand的值來決定是生成一個大寫字母、小寫字母和數字 switch (rand) { // 生成大寫字母的情形 case 1: itmp = Math.round(Math.random() * 25 + 65); ctmp = (char) itmp; return String.valueOf(ctmp); // 生成小寫字母 case 2: itmp = Math.round(Math.random() * 25 + 97); ctmp = (char) itmp; return String.valueOf(ctmp); // 生成數字 default: itmp = Math.round(Math.random() * 9); return String.valueOf(itmp); } } }

在web.xml中新增Servlet配置

<servlet> <servlet-name>authImg</servlet-name> <servlet-class>com.petrochina.servlet.AuthImg</servlet-class> </servlet> <servlet-mapping> <servlet-name>authImg</servlet-name> <url-pattern>/authImg</url-pattern> </servlet-mapping>

註冊頁面regist.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>註冊頁面</title> <mce:script type="text/javascript" src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <form action="registe.action" method="post" id="registe"> <table> <caption><h2>使用者註冊</h2></caption> <tr> <td>用戶名：</td><td><input type="text" name="username" id="username"/></td> </tr> <tr> <td>密碼：</td><td><input type="text" name="password" id="password"/> </td> </tr> <tr> <td>確認密碼：</td><td><input type="text" name="chkpassword"/> </td> </tr> <tr> <td>Email：</td><td><input type="text" name="email"/> </td> </tr> <tr> <td>驗證碼：</td><td valign="bottom"><input type="text" name="vercode" size="10"/> <img alt="" src="authImg" mce_src="authImg" id="authImg" align="absmiddle"><a href="#" mce_href="#" onclick="refresh()"><span style="font-size:12px" mce_style="font-size:12px">重新整理驗證碼</span></a></td> </tr> <tr> <td colspan="2"><input type="submit" value="提交"/><input type="reset" value="重填"/></td> </tr> </table> </form> </body> </html>

後臺RegistAction

@Override public String execute() throws Exception { Map session = ActionContext.getContext().getSession(); String ver2 = (String) session.get("rand"); session.put("rand", null); // 判斷驗證碼是否正確 if (vercode.equals(ver2)) { if (userManager.validName(username)) { if (userManager.addUser(username, password, email) > 0) return SUCCESS; else addActionError("註冊失敗，請重試！"); } else { addActionError("該使用者名稱已存在，請重新輸入！"); } } else { addActionError("驗證碼不匹配，請重新輸入"); } return INPUT; }

結果如下：

到這裡就完成了。但是今天在FireFox3.6下使用firedebug除錯時發現會再請求一次驗證碼，這樣導致session中的驗證碼重新整理之後和頁面上的不一致，問題截圖如下：

在關閉firedebug的情況下只請求一次驗證碼，在IE下也正常，尋思可能是firedebug的問題，但是在網上查詢不到相關內容。折騰了半天發現滑鼠展開GET authImg的URL時才會第二次請求驗證碼，所以明白是因為驗證碼圖片沒有快取造成在firedebug除錯視窗檢視時需要再次請求的緣故。

給JSP頁面新增驗證碼

給JSP頁面新增驗證碼

JSP頁面中驗證碼的調用方法

java spring 實現登入頁面新增驗證碼

javaweb頁面中新增驗證碼功能

JSP登入頁面包括驗證碼的驗證

jsp頁面常用代碼

如何把後臺的復選框值傳給jsp頁面？

Jsp制作驗證碼

登陸頁面的驗證碼生成與驗證

Java使用SSM框架實現登錄頁面的驗證碼功能

phpcms v9表單嚮導新增驗證碼

laravel 新增驗證碼

cas server (4.2.7) 新增驗證碼

JSP頁面新增播放視訊功能

【SpringSecurity系列】SpringBoot整合SpringSecurity新增驗證碼登入

CAS5.1.8新增驗證碼

手動給爬取的驗證碼貼標籤

vue給單獨頁面新增背景顏色

Vue給單獨頁面新增背景色

輕鬆把玩HttpClient之封裝HttpClient工具類(七)，新增驗證碼識別功能

給JSP頁面新增驗證碼

相關推薦