JavaWeb 登录实现图片验证码

缺乏、安全感 2022-04-10 03:25 546阅读 0赞

主要思路：

1） 打开页面生成随机验证码图片， 可更换图片，通过java后端实现。同时把生成的验证码保存在session作用域中。

2）用户输入验证码，提交

3）获取页面提交的验证码 和 保存在session作用域中的验证码，两者比较，相等后删除保存在session作用域中的验证码。

1、页面

<body>
    	<h4>登录页面 </h4>
    	<form action="<%=request.getContextPath() %>/login" method="post" id="loginForm">
        	用户名： <input type="text" id="username" name="username" required="required"/><br/>
        	密    码： <input type="password" id="password" name="password"/><br/>
        	验证码:<input type="text" name="verificationCode"/>
        			
        		  <img id="imgObj" alt="验证码" src="<%=request.getContextPath() %>/login" onclick="changeImg()">
        		  <a href="javascript: void(0)" onclick="changeImg()">换一张</a> <br/> 
        	<input type="submit" value="登录" id ="submitbtn"/>
        </form>
        <br/>
        <span style="color:red;">${errorMsg }</span>
    </body>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    	function changeImg(){
    		// 刷新图片 
    		var imgObj = $("#imgObj");
    		var src = imgObj.attr("src");
    		imgObj.attr("src", changeUrl(src));
    	};
    	//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳  
    	function changeUrl(url){
    		var timestamp  = (new Date()).valueOf();
    		var index = url.indexOf("?",url);
    		if (index > 0) {  
                url = url.substring(0, url.indexOf( "?"));   
            }  
            if ((url.indexOf("&") >= 0)) {  
                url = url + "×tamp=" + timestamp ;  
            } else {  
                url = url + "?timestamp=" + timestamp ;  
            }  
            return url; 
    	}
    </script>

2、servlet

public class LoginServlet extends HttpServlet{
    	private static final long serialVersionUID = 1L;
    	@Override
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//生成验证码
    		verificationCode(request, response);
    		doPost(request, response);
    	}
    	
    	@Override
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		response.setContentType("text/html;charset=UTF-8");
    		
    		//获得登录的账号和密码
    		String username = request.getParameter("username");
    		String password = request.getParameter("password");
    		String requestVerificationCode = request.getParameter("verificationCode");
    		System.out.println(requestVerificationCode);
    		HttpSession session = request.getSession();
    		String sessionVerificationCode = (String) session.getAttribute("verificationCode");
    		//验证验证码（忽略验证码大小写）
    		if(sessionVerificationCode.equalsIgnoreCase(requestVerificationCode)) {
    			session.removeAttribute("verificationCode"); 
                            if(username.equals("admin") && password.equals("admin123")){//登录成功
    				//重定向到index.jsp
    				response.sendRedirect(request.getContextPath() +"/index.jsp"); 
    			}else{//登录失败
    				request.setAttribute("errorMsg", "用户名或密码不正确");
    				request.getRequestDispatcher("/login.jsp").forward(request, response);
    			}
    		}else {
    			request.setAttribute("errorMsg", "验证码不正确！");
    			request.getRequestDispatcher("/login.jsp").forward(request, response);
    		}
    		
    	}
    	
    	public void verificationCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
    		//设置响应的类型格式为图片格式， 并禁止缓存
    		response.setContentType("image/jpg");
    		response.setHeader("Pragma", "no-cache");
    		response.setHeader("Cache-Control", "no-cache");
    		response.setDateHeader("Expires", 0);
    		
    		VerificationCodeImgUtil vCode = new VerificationCodeImgUtil(120,25,5,50);
    		//把随机产生的验证码保存在session作用域中
    		request.getSession().setAttribute("verificationCode", vCode.getValidateCode());
    		vCode.write(response.getOutputStream(), "jpg");
    	}
    	
    }

3、VerificationCodeImgUtil 类

[Java图片验证码生成工具类][Java]

4、测试

![2018122415434259.png][]    ![20181224154242696.png][]

[Java]: https://blog.csdn.net/qq_42402854/article/details/85234297
[2018122415434259.png]: https://img-blog.csdnimg.cn/2018122415434259.png
[20181224154242696.png]: /images/20220403/e9d9b4f3c1af48b3b8958030185c1dcd.png