登入時生成驗證碼和後臺驗證詳解(驗證碼圖片用jsp顯示出來的)
阿新 • • 發佈:2019-02-01
登入視窗程式碼HTML
<section class="mainlogin"> <div class="container"> <div class="col-md-4 col-md-offset-7 logincontent"> <h4>員工登入</h4> <form class="form-horizontal" id="loginform" name="loginform" method="post" action=""> <div class="form-group" id="idInputLine"> <label for="inputPassword3" class="col-sm-3 control-label">賬號</label> <div class="col-sm-8"> <input id="loginform:idInput" type="text" name="username" class="form-control" placeholder="請輸入手機號/郵箱/使用者名稱"> </div> </div> <div class="form-group" id="pwdInputLine"> <label id="loginform:pwdInput" class="col-sm-3 control-label">密碼</label> <div class="col-sm-8"> <input for="pwdInput" type="password" name="password" class="form-control" id="inputaccount" placeholder="請輸入您的密碼"> </div> </div> <div class="form-group"> <label for="inputvalidate" class="col-sm-3 control-label">驗證碼</label> <div class="col-sm-4"> <input type="text" class="form-control" id="inputaccount" placeholder="請輸入驗證碼"> </div> <div class="col-sm-4"> <img id="loginform:vCode" src="validatecode.jsp" onclick="javascript:document.getElementById('loginform:vCode'). src='validatecode.jsp?'+Math.random();" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-4"> <input type="checkbox"><span class="size12"> 記住使用者名稱</span> </div> <div class="col-sm-4"> <a href="#"><span class="size12 forget">忘記密碼</span></a> </div> </div> <div class="col-md-offset-3 col-md-8"> <a href="./index.html" id="loginform:j_id19" name="loginform:j_id19" class="btn btn-danger" target="_blank">立即登入</a> </div> </form> </div> </div> </section>
validatecode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.Random"%> <%@ page import="java.io.OutputStream"%> <%@ page import="java.awt.Color"%> <%@ page import="java.awt.Font"%> <%@ page import="java.awt.Graphics"%> <%@ page import="java.awt.image.BufferedImage"%> <%@ page import="javax.imageio.ImageIO"%> <% int width = 100; int height = 32; //create the image BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); // set the background color g.setColor(new Color(0xDCDCDC)); g.fillRect(0, 0, width, height); // draw the border g.setColor(Color.black); g.drawRect(0, 0, width - 1, height - 1); // create a random instance to generate the codes Random rdm = new Random(); String hash1 = Integer.toHexString(rdm.nextInt()); // make some confusion for (int i = 0; i < 50; i++) { int x = rdm.nextInt(width); int y = rdm.nextInt(height); g.drawOval(x, y, 0, 0); } // generate a random code String capstr = hash1.substring(0, 4); session.setAttribute("key", capstr);//將驗證碼儲存到session中 g.setColor(new Color(0, 100, 0)); g.setFont(new Font("Candara", Font.BOLD, 24)); g.drawString(capstr, 8, 24); g.dispose(); response.setContentType("image/jpeg"); out.clear(); out = pageContext.pushBody(); OutputStream strm = response.getOutputStream(); ImageIO.write(image, "jpeg", strm); strm.close(); %>
後臺對驗證碼的驗證
// 判斷驗證碼 是否正確 String key = (String) ServletActionContext.getRequest().getSession().getAttribute("key");// session中驗證碼 if (key == null || !key.equals(ServletActionContext.getRequest().getParameter("checkcode"))) { // 驗證碼無效 ServletActionContext.getRequest().setAttribute("msg", "驗證碼錯誤"); return "input"; }