效果:
1,打開登錄頁面時,4位驗證碼的圖片位置,去后台加載圖片回來,其中生成了4位驗證碼放到session中,登錄時在session中獲取。
2,點擊登錄,在session中獲取驗證碼,進行驗證。
二、demo:
jsp代碼:
<p class="login_field"> <span> <input type="text" id="user_vcode" name="user_vcode" placeholder="驗證碼" maxlength="4" class="login_field_input login_input_code"> </span> <span class="code_img"> <img src="${ctx }/verify/verifyCode" width="110" height="40" id="verifyCodeImage"> <input id="user_des_code" name="user_des_code" type="hidden"> </span> <span> <a id="changeVerifImageRegister" onclick="javascript:changeImage();" class="code_change">換一張</a> </span> </p>
換一張的js方法:
// 驗證碼刷新控制 function changeImage() { $('#verifyCodeImage').attr('src', '${ctx }/verify/verifyCode?timestamp=' + Math.floor(Math.random() * 100)); }
后台java代碼:
@RequireNoLogin @RequestMapping(value = "/verifyCode") public void verifyCode(HttpServletRequest req, HttpServletResponse resp, String serialNo) throws ServletException, java.io.IOException { init(); // 定義圖像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 < 10; 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(10)]); // 產生隨機的顏色分量來構造顏色值,這樣輸出的每位數字的顏色值都將不同。 red = random.nextInt(198); green = random.nextInt(233); blue = random.nextInt(109); // 用隨機產生的顏色將驗證碼繪制到圖像中。 g.setColor(new Color(red, green, blue)); g.drawString(strRand, (i + 1) * x, codeY); // 將產生的四個隨機數組合在一起。 randomCode.append(strRand); } // 將四位數字的驗證碼保存到Session中。 HttpSession session = req.getSession(); session.setAttribute(UPSConstant.VALIDATECODE, randomCode.toString()); //indexRedisService.setMess2Reids(UPSConstant.VALIDATECODE + "-" + serialNo, randomCode.toString()); // 禁止圖像緩存。 resp.setHeader("Pragma", "no-cache"); resp.setHeader("Cache-Control", "no-cache"); resp.setDateHeader("Expires", 0); resp.setContentType("image/jpeg"); // 將圖像輸出到Servlet輸出流中。 ServletOutputStream sos = resp.getOutputStream(); ImageIO.write(buffImg, "jpeg", sos); sos.close(); }