加/解密系列(二)-前端加密md5实现--CryptoJS v3.1.2+

一、CryptoJS v3.1.2下载地址：

https://code.google.com/p/crypto-js/downloads/list 或   http://www.oschina.net/p/crypto-js/

二、项目结构

三、项目需要导入的jar包

本项目后台用的是struts2，所以需要导入struts2的jar包。把下面的包导入到项目的WebRoot/WEB-INF/lib目录下

四、项目需要导入的js文件

下载CryptoJS v3.1.2后，解压，解压后的文件夹的根目录下有两个目录，其中core-min.js 在components目录下，md5.js在rollups目录下。找到这两个js文件，然后在项目的WebRoot根目录下新建js文件夹，把这两个js文件放在WebRoot/js目录下

五、各个文件的源码

(1) 在src根目录下新建包com.md5.action  ， 在该包下建立EncryptAction.java

EncryptAction.java

package com.md5.action;import com.opensymphony.xwork2.ActionContext;public class EncryptAction {	private String userName;	private String password;		public String getUserName() {		return userName;	}	public void setUserName(String userName) {		this.userName = userName;	}	public String getPassword() {		return password;	}	public void setPassword(String password) {		this.password = password;	}		public StringencryptByMd5() {		ActionContext context = ActionContext.getContext();		context.put("userName", this.userName);		context.put("password", this.password);		return "success";	}	}

(2)  在src根目录下新建xml文件struts.xml

struts.xml

	  	  	 	 	 				/success.jsp	 		

(3) 修改web.xml文件

web.xml

struts 2org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilterstruts 2/*index.jsp	30

(4) 在WebRoot根目录下建立分别index.jsp 、md5Demo.jsp、success.jsp

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>去测试md5实例

md5Demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>				//md5加密函数	function EncryptByMd5(){	//获取表单中的密码文本框的值		var password = document.getElementById("password").value;		//用CryptoJS库的md5加密算法给密码加密		var passwordMd5 = CryptoJS.MD5(password);		//把加密后的密码值重新赋值给表单中的密码		document.getElementById("password").value = passwordMd5;	}	
 	用户名：
	密码：
	

success.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>	用户名：
	密码：

完成以上所有的步骤后，把项目发布到服务器，用浏览器访问md5Demo.jsp ，输入用户名、密码后，提交，你会看到密码加密后的数据

提交前（密码输入的是：123456789）

提交后

即把123456789通过md5算法加了密后，就变成了 25f9e794323b453885f5181f1b624d0b

六、说明： 

  本实例只展示了CryptoJS v3.1.2实现md5数据加密的简单用法。

  在实际项目中，例如，在用户注册的时候，在密码输入框 用上以上的md5算法，给密码加密，通过表单提交给后台，后台处理后，就把表单的内容存入到数据库（密码是表单里的属性，加了密的密码也存进数据库）。 用户注册了之后，在登录的时候，用户输入密码，这时候，只需要给用户输入的该密码也用上以上加密算法，然后再用表单提交给后台。后台就拿着表单中已经加了密的用户输入的密码，跟数据库中已经加了密的密码匹配验证就行了。而不是把数据库里的密码先解密，然后再用用户提交的没有加密的密码跟它匹配。

  因为md5算法是不可逆的，所以解密后的数据可能不是原来的数据，而是别的数据，而某一数据通过md5算法加密后的密文是唯一的。所以采有以上方法才是适合的做法。