Java实现在登录时验证验证码并在登录后记住用户名

最新推荐文章于 2024-07-23 14:03:28 发布

流浪的面包树丶

最新推荐文章于 2024-07-23 14:03:28 发布

阅读量5.2k

点赞数 2

文章标签：验证码 ajax servlet java jsp

本文链接：https://blog.csdn.net/qq_31462011/article/details/72486387

版权

1 验证码其实就是一张图片并且在点击时可以更改上面的数字

生成验证码的代码如下：

public class CodeServlet extends HttpServlet {
	String strs = "asdfjklqweruioptyghzxcvbnm1234567890一二三四五六七八九零";
	/**
	 * 
	 */
	private static final long serialVersionUID = -1750762605630626352L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		BufferedImage bufferImg = new BufferedImage(80, 40, BufferedImage.TYPE_INT_RGB);
		Graphics graphics = bufferImg.getGraphics();
		graphics.setColor(Color.gray);
		graphics.setFont(new Font("宋体",Font.PLAIN , 24));
		graphics.fillRect(0, 0, 80, 40);
		char codes[] = new char[4];
		Random rand = new Random();
		for(int i=0;i<4;i++){
			int index = rand.nextInt(strs.length());
			Character c = strs.charAt(index);
			codes[i] = c;
			graphics.setColor(Color.blue);
			graphics.drawString(c.toString(), i*20, 30);
		}
		req.getServletContext().setAttribute("code", new String(codes));
		graphics.dispose();
		ImageIO.write(bufferImg, "png", resp.getOutputStream());
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

登录界面的jsp代码如下：

<%@ 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>Insert title here</title>
</head>
<body>
	<form action="login.do" method="post">
		账号：<input id="username" type="text" name="username"/><br/>
		密码：<input id ="password" type="password" name="password"/><br/>
		验证码：<input id="code2" type="text" name="code1"/><img id="code" alt="点击刷新" src="code.do" οnclick="refreshcode()"><br/>
		<input type="submit" value="login"/>
	</form>
	<button οnclick="checkCodePost()">Ajax请求servlet</button>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		var cookie = document.cookie;
		console.log(cookie);
		var strs = cookie.split("=");
		var username = strs[1];
		var Tag = document.getElementById("username");
		Tag.value = username?username:"";
		
		function refreshcode(){
			var codeImg = document.getElementById("code");
			var rand = Math.random();
			codeImg.src="code.do?random="+rand;
		}
		
		function checkCodePost(){
			var code2=$("#code2").val();
			var username=$("#username").val();
			var password=$("#password").val();
			$.post("login.do",
					{
						code1:code2,
						username:username,
						password:password
					},
					function(data,status){
						if("cuccess"==data){
							$("form").submit();
						}else if("username or password is wrong"==data){
							alert("用户名或密码错误");
						}else{
							alert("验证码错误");
						}
					});
		}
	</script>
</body>
</html>

2 进行登录验证，先验证验证码是否正确

public class LoginServlet extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 4478755210056728092L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//		req.setCharacterEncoding("utf-8");
		String userName = req.getParameter("username");
		System.out.println(userName);
		String passWord = req.getParameter("password");
		String pwdString = formatMD5String(passWord);
		System.out.println(pwdString);
		String code1 = req.getParameter("code1");
		String codeJ = new String(code1.getBytes("iso-8859-1"),"utf-8");
		String code_src=(String) req.getServletContext().getAttribute("code");
		if(code_src.equals(codeJ)){
			if("zhangsan".equals(userName)&&"123".equals(passWord)){
				Cookie cookie = new Cookie("username", userName);
				cookie.setMaxAge(600);
				resp.addCookie(cookie);
				resp.getWriter().write("cuccess");
			}else{
				resp.getWriter().write("username or password is wrong");
			}
		}else{
			resp.getWriter().write("code is error");
		}
	}
	
	private String formatMD5String(String param){
		try {
			MessageDigest digest = MessageDigest.getInstance("MD5");
			byte miwen[] = digest.digest(param.getBytes());
			StringBuilder builder = new StringBuilder();
			for(byte b:miwen){
//				System.out.println(b);
				String hex = Integer.toHexString(b&0xFF);
				if(hex.length()==1){
					hex=0+hex;
				}
				builder.append(hex);
			}
			return builder.toString();
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		}
		return String.valueOf(param);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

验证的时候，先通过Ajax进行异步请求Servlet，根据返回的结果提示相应的信息给用户，验证通过则通过$("form").submit()提交表单

其中通过MD5对密码进行加密

web.xml配置如下：

<servlet>
  	<servlet-name>login</servlet-name>
  	<servlet-class>login.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>login</servlet-name>
  	<url-pattern>/login.do</url-pattern>
  </servlet-mapping>
  <servlet>
  	<servlet-name>code</servlet-name>
  	<servlet-class>login.CodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>code</servlet-name>
  	<url-pattern>/code.do</url-pattern>
  </servlet-mapping>
</web-app>