HttpSession实现图片验证码

主要思路：

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"/>
    			<!-- src 此时使用loginServlet的get提交方法， 使用框架时，对应验证方法名的路径 -->
    		  <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图片验证码生成工具类

4、测试

HttpSession实现图片验证码

猜你喜欢