防机器登录验证码的实现与输入匹配验证

迈不过友情╰ 2022-06-13 14:40 221阅读 0赞

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录验证</title>
    <script type="text/javascript">
    function changeImage() {
    var img = document.getElementsByTagName("img")[0];
    img.src="${pageContext.request.contextPath }/ImageServlet?time="+new Date().getTime();//这个目的是防止缓存不刷新验证码
    } 
    
    function check(){
    	var uname = document.getElementById("uname").value;
    	var upassword = document.getElementById("upassword").value;
    	var verifycode = document.getElementById("verifycode").value;
    	 var validateCode = '<%=session.getAttribute("validateCode")%>'
    	if(uname==""){
    		alert("用户名为空！");
    		return false;
    	}
    	if(upassword==""){
    		alert("密码为空！");
    		return false;
    	}
    	if(verifycode==""){
    		alert("请填写验证码！");
    		return false;
    	}
    	if(validateCode.equals(verifycode)){
    		alert("验证码错误！");
    		return false;
    	}
    }
    if(window.top!=window){
    	 window.top.location = "Login";
    }
    </script>
    </head>
    <body>
      <center>
         <h1>用户登录</h1>
         <hr/>
         <%
            Object validateCode = session.getAttribute("validateCode");
            System.out.println("你的验证码是："+validateCode);
         %>
         <form action="Login" method="post" οnsubmit="return check()">
            <table border="0" width="360px">
               <tr>
                 <td align="right">用户名:</td>
                 <td><input type="text" id="uname" name="username" style="width: 180px"/></td>
               </tr>
               <tr>
                 <td align="right">密    码:</td>
                 <td><input type="password" id="upassword" name="password" style="width: 180px"/></td>
               </tr>
               <tr>
                 <td align="right">验证码:</td>
                 <td><input type="text" id="verifycode" style="width: 180px" name="verifycode"/></td>
                 <td><img alt="换一张看看" src="/Siemens/ImageServlet"  align="left" οnclick="changeImage()" /></td>
               </tr>
               <tr>
                  <td><input type="radio" name="kind" value="员工" checked="checked">员工</td>
                  <td><input type="radio" name="kind" value="管理员">管理员</td>
               </tr>
               <tr>
                 <td align="right"><input type="submit" value="登录"/></td>
                 <td><input type="reset" value="重置"/></td>
               </tr>
               <tr>
                 <td></td>
                 <td><font color="red">${message}</font></td>
               </tr>
               <tr>
                  <td></td>
                  <td><font color="red">${verify}</font></td>
               </tr>
            </table>
         </form>
      </center>
    </body>
    </html>

ImageServlet.java (生成验证码图片的servlet)

package com.servlet;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics2D;
    import java.awt.image.BufferedImage;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    @WebServlet("/ImageServlet")
    public class ImageServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
    	 // 验证码图片的宽度。 
        private int width = 100; 
        // 验证码图片的高度。 
        private int height = 25; 
        // 验证码字符个数 
        private int codeCount = 4; 
     
        private int x = 0; 
        // 字体高度 
        private int fontHeight; 
        private int codeY; 
        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' }; 
     
        /** 
         * 初始化验证图片属性 
         */ 
        public void init() throws ServletException { 
            // 从web.xml中获取初始信息 
            // 宽度 
            String strWidth = this.getInitParameter("width"); 
            // 高度 
            String strHeight = this.getInitParameter("height"); 
            // 字符个数 
            String strCodeCount = this.getInitParameter("codeCount"); 
            // 将配置的信息转换成数值 
            try { 
                if (strWidth != null && strWidth.length() != 0) { 
                    width = Integer.parseInt(strWidth); 
                } 
                if (strHeight != null && strHeight.length() != 0) { 
                    height = Integer.parseInt(strHeight); 
                } 
                if (strCodeCount != null && strCodeCount.length() != 0) { 
                    codeCount = Integer.parseInt(strCodeCount); 
                } 
            } catch (NumberFormatException e) { 
            	e.printStackTrace();
            } 
            x = width / (codeCount + 1); 
            fontHeight = height - 2; 
            codeY = height - 4; 
        } 
     
        protected void service(HttpServletRequest req, HttpServletResponse resp) 
                throws ServletException, java.io.IOException { 
            // 定义图像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 < 160; 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(36)]); 
                // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。 
                red = random.nextInt(255); 
                green = random.nextInt(255); 
                blue = random.nextInt(255); 
                // 用随机产生的颜色将验证码绘制到图像中。 
                g.setColor(new Color(red, green, blue)); 
                g.drawString(strRand, (i + 1) * x, codeY); 
                // 将产生的四个随机数组合在一起。 
                randomCode.append(strRand); 
            } 
            // 将四位数字的验证码保存到Session中。 
            HttpSession session = req.getSession(); 
            session.setAttribute("validateCode", 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(); 
        } 
    }

登录验证

package com.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import com.bean.User;
    import com.dao.UserDao;
    @WebServlet("/Login")
    public class Login extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        public Login() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doPost(request, response); 
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		//设置编码  
            request.setCharacterEncoding("utf-8");  
            response.setCharacterEncoding("utf-8");  
            response.setHeader("Content-Type","text/html; charset=utf-8");  
            HttpSession session = request.getSession();
            String validation_code = (String)session.getAttribute("validateCode");
            
            String user_name = request.getParameter("username");
            String user_password = request.getParameter("password");
            String user_kind = request.getParameter("kind");
            String verifycode = request.getParameter("verifycode");
            
            UserDao dao = new UserDao();
            User user = dao.login(user_name, user_password, user_kind);
            System.out.println("用户"+user+user_name+user_password+user_kind);
            //request.getSession().setAttribute("username", user_name);
            if(!verifycode.equalsIgnoreCase(validation_code)){
            	request.getSession().setAttribute("verify", "验证码错误，请重新输入！");  //输入的验证码与图片的验证码不一致
            	response.sendRedirect(request.getContextPath()+"/login.jsp");
            }
            else{
            if(user != null){
            	request.getSession().setAttribute("user", user);
            	if(user_kind.equals("管理员")){
            		request.getRequestDispatcher("jsp/ManagerMainPage.jsp").forward(request, response);
            		//response.sendRedirect("jsp/ManagerMainPage.jsp");
    				return; 
            	}
            	else{
            		request.getRequestDispatcher("jsp/EmployeeMainPage.jsp").forward(request, response);
            		//response.sendRedirect("jsp/EmployeeMainPage.jsp");
    				return;
            	}
            }
            else{
            	request.getSession().setAttribute("message", "用户名或密码错误！");   //登录信息验证错误
    			//response.getWriter().write("<script language='javascript'>alert('用户名或密码不正确！')</script>");
    			//request.getRequestDispatcher("/login.jsp").forward(request, response);
    			response.sendRedirect(request.getContextPath()+"/login.jsp");
            }
    	 }
      }
    }

截图：

![Center][]

![Center 1][]

![Center 2][]

\#密码正确，验证码匹配，登录成功

![Center 3][]

[Center]: /images/20220613/8db9ccc02d7c491db422af9d50580c17.png
[Center 1]: /images/20220613/5e94bbae02e14edd83f126b241a444c4.png
[Center 2]: /images/20220613/e3dd7acd2c874bd0b30cfe170a91e318.png
[Center 3]: /images/20220613/e09a889223b14300868a2328bfb18c3c.png