登陸註冊-帶圖片的驗證碼
阿新 • • 發佈:2019-02-12
登陸註冊時的驗證碼。 使用的是SpringMVC。 你如果用的其他框架,只需要getCode這個方法就行。
業務邏輯:載入登陸註冊頁,生成驗證碼,把生成的驗證碼返回到前臺頁面展示,使用者輸入驗證碼進行登陸操作,把前臺使用者輸入的驗證碼和後臺生成的驗證碼進行比對。 成功進行登陸,失敗返回錯誤和新的驗證碼。
控制器程式碼:
package com.shopping.view.web.tools; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import com.shopping.core.mv.JModelAndView; import com.shopping.foundation.service.ISysConfigService; import com.shopping.foundation.service.IUserConfigService; /** * 登陸註冊圖片驗證碼 * @author 黑夜 * 現在都是用簡訊,已經很少有人會用這種了。 */ @Controller public class CodeController { //配置【可以去掉】 @Autowired private ISysConfigService configService; //當前使用者【可以去掉】 @Autowired private IUserConfigService userConfigService; // 定義圖片的width private int width = 90; // 定義圖片的height private int height = 40; // 定義圖片上顯示驗證碼的個數,改的話要把寬度加長 private int codeCount = 4; private int xx = 15; private int fontHeight = 35; private int codeY = 30; char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; @RequestMapping("/code.htm") public void getCode(HttpServletRequest req, HttpServletResponse resp) throws IOException { // 定義影象buffer BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics gd = buffImg.getGraphics(); // 建立一個隨機數生成器類 Random random = new Random(); // 將影象填充為白色 gd.setColor(Color.WHITE); gd.fillRect(0, 0, width, height); // 建立字型,字型的大小應該根據圖片的高度來定。 Font font = new Font("Fixedsys", Font.BOLD, fontHeight); // 設定字型。 gd.setFont(font); // 畫邊框。 gd.setColor(Color.BLACK); gd.drawRect(0, 0, width - 1, height - 1); // 隨機產生40條幹擾線,使圖象中的認證碼不易被其它程式探測到。 gd.setColor(Color.BLACK); for (int i = 0; i < 20; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); gd.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 code = String.valueOf(codeSequence[random.nextInt(36)]); // 產生隨機的顏色分量來構造顏色值,這樣輸出的每位數字的顏色值都將不同。 red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); // 用隨機產生的顏色將驗證碼繪製到影象中。 gd.setColor(new Color(red, green, blue)); gd.drawString(code, (i + 1) * xx, codeY); // 將產生的四個隨機數組合在一起。 randomCode.append(code); } // 將四位數字的驗證碼儲存到Session中。 HttpSession session = req.getSession(); System.out.println(randomCode); session.setAttribute("code", 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(); } //跳轉到登陸頁 @RequestMapping({"/log4j.htm"}) public ModelAndView log4j(HttpServletRequest request, HttpServletResponse response) throws IOException { ModelAndView mv = new JModelAndView("log4j.html", this.configService.getSysConfig(), this.userConfigService.getUserConfig(), 1, request, response); return mv; } }
前臺頁面程式碼:log4j.html
<form id="login_form" action="" method="post" class="login-form"> <div class="form-group"> <label class="sr-only" for="userName">使用者名稱</label> <input type="text" name="userName" placeholder="使用者名稱" class="form-username form-control" id="userName" maxlength="20" required> </div> <div class="form-group"> <label class="sr-only" for="password">密碼</label> <input type="password" name="password" placeholder="密碼" required class="form-password form-control" id="password" maxlength="16"> </div> <div class="form-group code_div"> <input type="text" name="code" placeholder="驗證碼" maxlength="4" class="form-password form-control" id="code"> <img class="pull-right" src="$!webPath/code.htm" id="img_in" onclick="this.src='$!webPath/code.htm?'+Math.random()" /> </div> <div class="form-group"> <button id="submit_btn" type="submit" class="btn">登入</button> </div> </form>