页面验证码及刷新demo

你的名字 2022-08-06 07:15 139阅读 0赞

验证码：就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。   
作用：验证码一般是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方式进行不断的登陆、灌水。因为验证码是一个混合了数字或符号的图片，人眼看起来都费劲，机器识别起来就更困难。

直接看代码吧，这里我们有四个文件，一个前台验证码显示输入页面authCode.html，一个验证码校验页面checkCode.jsp，一个验证码请求的AuthCodeServlet.java，一个验证码生成类AuthCode.java

先看两个前台的页面

authCode.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
    <script>  
        function refresh() { 
            document.getElementById("authImg").src = "captcha.do?time=" + new Date().getTime();
        }  
    </script>  
      
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Insert title here</title>  
    </head>  
    <body>  
        <form action="checkCode.jsp" method="post">  
            <img src="captcha.do" id="authImg" /><a onClick="refresh()">看不清</a><br>  
            <input type="text" name="inputCode"> <input type="submit" value="提交"> <br>  
        </form>  
    </body>  
    </html>

checkCode.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  
        pageEncoding="UTF-8"%>  
      
    <%  
        if(request.getParameter("inputCode").equals(session.getAttribute("authCode"))) {  
            out.print("输入正确");  
        }else{  
            out.print("输入错误");  
        }  
    %>  
    <a href="javascript:history.go(-1)">返回</a>

再看后台的两个Java类文件

AuthCodeServlet.java

package com.captcha;
    
    import java.io.IOException;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class AuthCodeServlet
     */
    @WebServlet("/captcha.do")
    public class AuthCodeServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public AuthCodeServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		String authCode = AuthCode.getAuthCode(); 
    		
    		// 为方便查看，我们后台打印验证码出来
            System.out.println(authCode);
            request.getSession().setAttribute("authCode", authCode);    //将验证码保存到session中，便于以后验证  
              
            try {  
                //发送图片  
                ImageIO.write(AuthCode.getAuthImg(authCode), "JPEG", response.getOutputStream());  
            } catch (IOException e){  
                e.printStackTrace();  
            }  
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

AuthCode.java

package com.captcha;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    import java.util.Random;
    
    /**
     * 验证码生成类
     * @author zhangqi
     */
    public class AuthCode {
    
    	public static final int AUTHCODE_LENGTH = 7;        //验证码长度  
        public static final int SINGLECODE_WIDTH = 15;  //单个验证码宽度  
        public static final int SINGLECODE_HEIGHT = 30; //单个验证码高度  
        public static final int SINGLECODE_GAP = 4;     //单个验证码之间间隔  
        public static final int IMG_WIDTH = AUTHCODE_LENGTH * (SINGLECODE_WIDTH + SINGLECODE_GAP);  
        public static final int IMG_HEIGHT = SINGLECODE_HEIGHT;  
        
        /**
         * 获取验证码方法
         * @return 
         */
        public static String getAuthCode() {  
            String authCode = "";  
            for(int i = 0; i < AUTHCODE_LENGTH; i++) {  
                authCode += (new Random()).nextInt(10);  
            }  
            return authCode;  
        }  
        
        /**
         * 验证码图片流生成
         * @param authCode
         * @return
         */
        public static BufferedImage getAuthImg(String authCode) {  
            //设置图片的高、宽、类型  
            //RGB编码：red、green、blue  
            BufferedImage img = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, BufferedImage.TYPE_INT_BGR);  
            //得到图片上的一个画笔  
            Graphics g = img.getGraphics();  
            //设置画笔的颜色，用来做背景色  
            g.setColor(Color.YELLOW);  
            //用画笔来填充一个矩形，矩形的左上角坐标，宽，高  
            g.fillRect(0, 0, IMG_WIDTH, IMG_HEIGHT);  
            //将画笔颜色设置为黑色，用来写字  
            g.setColor(Color.black);  
            //设置字体：斜体、字号  
            g.setFont(new Font(null, Font.ITALIC, 30));  
              
            //输出数字  
            char c;  
            for(int i = 0; i < authCode.toCharArray().length; i++) {  
                //取到对应位置的字符  
                c = authCode.charAt(i);  
                //画出一个字符串：要画的内容，开始的位置，高度  
                g.drawString(c + "", i * (SINGLECODE_WIDTH + SINGLECODE_GAP)+ SINGLECODE_GAP / 2, IMG_HEIGHT);  
            }  
            Random random = new Random();  
            //干扰素  
            for(int i = 0; i < 20; i++) {  
                int x = random.nextInt(IMG_WIDTH);  
                int y = random.nextInt(IMG_HEIGHT);  
                int x2 = random.nextInt(IMG_WIDTH);  
                int y2 = random.nextInt(IMG_HEIGHT);  
                g.drawLine(x, y, x + x2, y + y2);  
            }  
            return img;  
        }  
    }

服务启动后验证结果

初始页面验证码

![SouthEast][]

点击看不清之后

![SouthEast 1][]

同时查看下后台的验证码打印情况

![SouthEast 2][]

说明验证码输出无误。

注意事项：

开发过程中，最初的验证码重刷的js方法如下

在点击看不清时，就是无法请求到后台的新验证码； 在查看网络请求时，发现js并未向后台发送请求。

搜查原因后发现，这种写法，每次都向后台发送同样的请求，浏览器会先从浏览器缓存中获取结果文件，由于页面初始化时向后台请求过一次验证码，导致后续的每次重刷都是取到前一次的验证码结果，即页面初始化的验证码结果。

解决此问题的根本，便是告诉浏览器，重刷时的请求和之前的请求是不同的请求，加一个时间戳或随机数便可以了。

所以，便有了上面的

好了，这个demo就到这里了，欢迎沟通学习。

[SouthEast]: /images/20220806/d1632cbb311347d983e8e03e26c0ba61.png
[SouthEast 1]: /images/20220806/9ff7073d25414c82862077775149f2a8.png
[SouthEast 2]: /images/20220806/20e9c6f9436e4218be36e6abb1d866ab.png