会话技术之记住密码1、2、3

在前几篇文章中，我们详细的介绍了Cookie及其他会话相关的概念，我们知道Cookie是一种在客户端保存会话信息的技术，其出现大大简化了程序员的工作。Cookie作为一个简单、便捷、实用的客户端会话技术，其重要性是不言而喻的，今天我们就一起来看下Cookie的几种应用场景。

Cookie翻译成中文叫曲奇饼、小饼干，还是很贴切的，如上图一样，每个小饼干上可以有不同的花纹，表明存储一下小而重要的信息。

1.记住密码的简单实现

记住密码这个功能想必大家都应该体验过，比如QQ，在输入一次密码后，很长一段时间我们无需再次输入密码。下面我们来看下应该如何实现吧。

这部分的工作主要在于前端，下面给出前端代码，首先是Login.jsp。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/login.js"></script>

<title>Insert title here</title>
</head>
<body>
	<form id="loginForm" action="xxx" method="post">
		<input id="username" name="username" type="text"/>
		<br />
		<input id="password" name="password" type="password" />
		<br />
    	<!-- form提交前存储Cookie -->
		<button type="button" οnclick="loginSubmit()">提交</button>
	</form>
</body>
</html>

其中jquery.cookie.js的下载链接如下：https://github.com/carhartl/jquery-cookie/tree/master/src

//页面DOM加载完毕后执行
//如果本地存储了账号、密码，则将其填充到输入框中
$(document).ready(function(){
	const cookieName = $.cookie('loginName');
	const cookiePwd = $.cookie('loginPwd');
	console.log(cookieName + "," + cookiePwd);
	if(cookieName != '' && cookieName != null){
		$("#username").val(cookieName);
	}
	if(cookiePwd != '' && cookiePwd != null){
		$("#password").val(cookiePwd);
	}
})

//登录
function loginSubmit(){
	console.log("执行了js中的方法");
	//将账号名和密码存入Cookie中
	const userName = $("#username").val();
	$.cookie('loginName', userName);
	const password = $("#password").val();
	$.cookie('loginPwd', password);
  //阻断form表单提交，测试时使用
  //return false;
	$("#loginForm").submit();
}

这里我们就不给出测试的截图了，代码已经全部给出，可自行进行测试。对于记住密码功能而言，仅仅是登录时自动填充明显的功能不足，这里因为已经设置了Cookie，每次请求是都会自动携带账号密码信息，因此我们可以在后端增加一个拦截器，即使Session过期了，我们也可以在密码验证通过后再创建一个新的，做到无须重新登录。

2.使用token增强安全性

在上面的例子中，我们是将密码以明文的方式存储在浏览器端，虽然浏览器会将密码加密后存储，但是在网络传输中，密码还是以明文的方式进行传输的，因此安全性较低。为了解决此问题，一般我们存储时，不会直接将铭文密码存储在客户端，而是通过加密的技术，在客户端存储一个token。

Token我们可以理解成一个令牌，我们还是以上面的记住密码为例，当用户登录成功后，我们可以将密码等比较隐私的信息通过加密的方式得到一个加密后的字符串存储在客户端，等下次如有需要时（比如Session过期），直接校验token的有效性，而不是直接使用明文的账号密码来进行验证。

这里为了安全和简单，我们就简单的使用MD5来进行加密（这里推荐对称加密加密算法AES）。加密部分的工作我们也放在后端，在验证用户名密码正确后进行。

这里我们来看下LoginServlet中的doGet方法的代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {
  request.setCharacterEncoding("UTF-8");
  response.setContentType("text/html;charset=utf-8");

  String userName = request.getParameter("username");
  String password = request.getParameter("password");
 
  UserService userService = UserService.getInstance();
  try {
    String result = userService.loginByNameAndPassword(userName, password);
    boolean isSuccess = false;
    // 登录成功
    if ("Success".equals(result)) {
      isSuccess = true;
      // 创建Session
      HttpSession session = request.getSession();
      // 生成一个token,当Session过期时，可以通过此token来验证是否登录过
      // 规则，userName-password 的md5值
      String token = MD5Util.encodeByMD5(userName + "-" + password);
      Cookie loginCookie = new Cookie("loginToken", token);
      Cookie nameCookie = new Cookie("userName", userName);
      // 将Cookie添加到response中
      response.addCookie(loginCookie);
      response.addCookie(nameCookie);
    } else {
      // 登录失败
      System.out.println("登录失败的原因为：" + result);
      // 跳转登录失败页面
      // response.sendRedirect("/FirstProject/index.jsp");
    }

    // 输出页面
    // ...
}

其中省略的部分和Service的具体实现可以参考上文。在上例中，我们将用户名和密码拼接起来后进行加密，因为MD5加密的不可解密，因此我们还创建一个保存用户名的cookie。在下次需要验证token信息时，只需根据cookie中的loginName，查询到数据库中的密码，拼接后计算MD5加密后的值，与token进行比对即可。简单的示例代码如下：

/**
	 * 根据登录名校验token是否正确
	 * 
	 * @param loginName
	 * @param loginToekn
	 * @return true || false
	 * @throws ClassNotFoundException
	 * @throws SQLException
	 */
public boolean checkToken(String loginName, String loginToekn) throws ClassNotFoundException, SQLException {
  UserDao userDao = new UserDao();
  User user = userDao.findUserByName(loginName);
  String password = user.getPassword();
  String newToken = MD5Util.encodeByMD5(loginName + "-" + password);
  if (newToken.equals(loginToekn)) {
    System.out.println("token检验正确");
    return true;
  }
  System.out.println("token检验错误");
  return false;
}

MD5Util的代码如下：

package xxx;

import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class MD5Util {

  /**
	 * 对传入的字符串进行MD5加密
	 * 
	 * @param str
	 * @return 加密后的字符串
	 */
  public static String encodeByMD5(String str) {
    byte[] bytes = null;
    try {
      MessageDigest md5 = MessageDigest.getInstance("MD5");
      bytes = md5.digest(str.getBytes("utf-8"));
    } catch (NoSuchAlgorithmException e) {
      e.printStackTrace();
    } catch (UnsupportedEncodingException e) {
      e.printStackTrace();
    }
    return bytesTo16BString(bytes);
  }

  /**
	 * 将字节数组转换为16进制格式的字符串
	 * 
	 * @param bytes
	 * @return
	 */
  private static String bytesTo16BString(byte[] bytes) {
    StringBuffer res = new StringBuffer();
    int num = 0;
    for (int i = 0; i < bytes.length; i++) {
      num = bytes[i] > 0 ? bytes[i] : 255 + bytes[i];
      String hex = Integer.toHexString(num);
      res.append(hex.length() < 2 ? 0 + hex : hex);
    }
    return res.toString();
  }

}

3.借鉴JWT的思想

JWT(JSON Web Token)技术是一种开放的行业标准RFC 7519方法，是一种紧凑的，URL安全的方法，用于表示要在两方之间转移的声明。JWT中的声明被编码为JSON对象，用作JWS（JSON Web Signature）结构的有效负载或JWE (JSON Web Encryption)结构的纯文本，从而使声明可以进行数字签名或完整性保护带有消息验证码（MAC）和/或加密的消息。

一句话，JWT就是将敏感信息放入JSON对象中，并添加header、签名等信息，再通过加密的方式将整个对象转为字符串，存储在客户端。本文也参考JWT的思想，简单的手动实现一下。

首先我们来简单的定义一个对象，来存储信息（也可直接new一个JSONObject），代码如下：

public class JwtDataPojo {

	//登录用户
	private String name;
	
	// 其他信息...
	
	//登录时间
	private Date loginDate;

	// Getter、Setter方法
	// ...
}

我们将LoginServlet中登录成功的代码修改如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {
  //...
 
  UserService userService = UserService.getInstance();
  try {
    String result = userService.loginByNameAndPassword(userName, password);
    boolean isSuccess = false;
    // 登录成功
    if ("Success".equals(result)) {
      isSuccess = true;
      JwtDataPojo dataPojo = new JwtDataPojo();
      dataPojo.setName(userName);
      dataPojo.setLoginDate(new Date());
      // 生成加密后的字符串
      String jwtToken = AESUtil.encrypt(JSON.toJSONString(dataPojo), "123456");
      Cookie cookie = new Cookie("JwtToken", jwtToken);
      // 将Cookie添加到response中
      response.addCookie(cookie);
    } else {
      // 登录失败
      System.out.println("登录失败的原因为：" + result);
      // 跳转登录失败页面
      // response.sendRedirect("/FirstProject/index.jsp");
    }

    // 输出页面
    // ...
}

因为JwtDataPojo中有登录时间，所以我们可以具体来在服务器端验证是否超时。上面代码中的resolveJwtToken方法如下：

/**
	 * 根据传入的字符换和密码，解析为JwtToken对象
	 * 
	 * @param content
	 * @param key
	 * @return JwtDataPojo
	 * @throws Exception
	 */
public JwtDataPojo resolveJwtToken(String content, String key) throws Exception {
  String jsonString = AESUtil.decrypt(content, key);
  if(StringUtils.isNullOrEmpty(jsonString)) {
    throw new Exception("token错误");
  }
  JwtDataPojo dataPojo = JSON.parseObject(jsonString, JwtDataPojo.class);
  // 超过三十分钟过期
  if (System.currentTimeMillis() - dataPojo.getLoginDate().getTime() > 1000 * 60 * 30) {
    throw new Exception("登录过期");
  }
  return dataPojo;
}