專案案例 || 註冊中驗證碼實現
阿新 • • 發佈：2019-01-08
今天，給大家介紹驗證碼的相關配置問題。
眾所周知，對傳統驗證碼而言，便捷和安全長期以來一直是魚與熊掌的關係。
這可從12306與黃牛的博弈中看出端倪。
最先開始，只是簡單的數字英文組合，再後來有了加減法，相信一般人也可以應付。
直到出現一閃一閃的動態驗證碼和變形字母，第一次體會到眼睛都快看瞎了，還有輸不對的情況~
但這些與後來的圖片驗證碼相比，還只是小兒科，不信你看：
網友戲稱：不懂娛樂圈，沒資格買票回家。
驗證碼相關配置
不過對於我們一般小型系統而言，那麼複雜的驗證碼確實沒必要，簡單的英文數字組合肯定夠了。
今天就給大家介紹如何配置英文數字組合驗證碼。首先我們看效果圖:
配置比較簡單，首先在JSP介面引入驗證碼：
<div class="form-group"> <label for="yanzheng" class="col-sm-2 control-label">驗證碼</label> <div class="col-sm-6"> <input name="inputCode" value=""/> <img border="0" src="${pageContext.request.contextPath }/checkCode" /> <input type="button" value="換一張" onclick="history.go(0) "/> </div> </div>
然後引入工具類CheckCode：
public class CheckCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); HttpSession session = request.getSession(); int width = 60; int height = 20; //設定瀏覽器不要快取此圖片 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); //建立記憶體影象並獲得其圖形上下文 BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); // 產生隨機驗證碼 //定義驗證碼的字元表 String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; char[] rands = new char[4]; for(int i = 0; i < 4; i++) { int rand = (int) (Math.random() * 36); rands[i] = chars.charAt(rand); } // 產生影象 //畫背景 g.setColor(new Color(0xDCDCDC)); g.fillRect(0, 0, width, height); //隨機產生120個干擾點 for(int i = 0; i < 120; i++) { int x = (int)(Math.random() * width); int y = (int)(Math.random() * height); int red = (int)(Math.random() * 255); int green = (int)(Math.random() * 255); int blue = (int)(Math.random() * 255); g.setColor(new Color(red, green, blue)); g.drawOval(x, y, 1, 0); } g.setColor(Color.BLACK); g.setFont(new Font(null, Font.ITALIC|Font.BOLD, 18)); //在不同的高度上輸出驗證碼的不同字元 g.drawString("" + rands[0], 1, 17); g.drawString("" + rands[1], 16, 15); g.drawString("" + rands[2], 31, 18); g.drawString("" + rands[3], 46, 16); g.dispose(); //將影象輸出到客戶端 ServletOutputStream sos = response.getOutputStream(); ByteArrayOutputStream baos = new ByteArrayOutputStream(); ImageIO.write(image, "JPEG", baos); byte[] buffer = baos.toByteArray(); response.setContentLength(buffer.length); sos.write(buffer); baos.close(); sos.close(); //將驗證碼放到 session 中 session.setAttribute("checkCode", new String(rands)); } }
驗證碼放到session中後，在Controller中獲取session，然後與前臺輸入對比：
String sc=(String)session.getAttribute("checkCode");
if(sc.equals(inputCode)){
//對比驗證碼即可
}以上就是驗證碼的全部程式碼實現。如果你有任何問題，歡迎留言，我們共同交流討論。
還可以微信關注和置頂我的公眾號“SL社群”(slshequ)，獲取原始碼資源及眾多專案案例。