加/解密系列(二)-前端加密md5實現--CryptoJS v3.1.2+
阿新 • • 發佈：2019-01-23
一、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
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"><struts> <!-- 配置 Struts 2 應用中的常量 --> <constant name="struts.i18n.encoding" value="UTF-8"/> <package name="md5" extends="struts-default"> <action name="md5Action" class="com.md5.action.EncryptAction" method="encryptByMd5"> <result name="success">/success.jsp</result> </action> </package></struts>
(3) 修改web.xml檔案
web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"><!-- 設定struts 2過濾器 --><filter><filter-name>struts 2</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>struts 2</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- 設定歡迎頁面 --><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><!-- session超時定義,單位為分鐘 --><session-config> <session-timeout>30</session-timeout></session-config></web-app>
(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+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>首頁</title></head><body><a href="md5Demo.jsp">去測試md5例項</a></body></html>md5Demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>md5加密例項</title> <script type="text/javascript" src="js/core-min.js"></script> <script type="text/javascript" src="js/md5.js"></script> <scripttype="text/javascript"> //md5加密函式 function EncryptByMd5(){ //獲取表單中的密碼文字框的值 var password = document.getElementById("password").value; //用CryptoJS庫的md5加密演算法給密碼加密 var passwordMd5 = CryptoJS.MD5(password); //把加密後的密碼值重新賦值給表單中的密碼 document.getElementById("password").value = passwordMd5; } </script></head><body><form action="md5Action" method="post"> 使用者名稱：<input type="text" name="userName" id="userName" /><br /> 密碼：<input type="password" name="password" id="password" /><br /> <input type="submit" value="提交" onclick="EncryptByMd5()" /><br /></form></body></html>
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+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>成功跳轉</title></head><body> 使用者名稱：<s:property value="#request.userName" /><br /> 密碼：<s:property value="#request.password" /><br /></body></html>
完成以上所有的步驟後，把專案釋出到伺服器，用瀏覽器訪問md5Demo.jsp ，輸入使用者名稱、密碼後，提交，你會看到密碼加密後的資料
提交前（密碼輸入的是：123456789）
提交後
即把123456789通過md5演算法加了密後，就變成了 25f9e794323b453885f5181f1b624d0b
六、說明：
本例項只展示了CryptoJS v3.1.2實現md5資料加密的簡單用法。
在實際專案中，例如，在使用者註冊的時候，在密碼輸入框 用上以上的md5演算法，給密碼加密，通過表單提交給後臺，後臺處理後，就把表單的內容存入到資料庫（密碼是表單裡的屬性，加了密的密碼也存進資料庫）。 使用者註冊了之後，在登入的時候，使用者輸入密碼，這時候，只需要給使用者輸入的該密碼也用上以上加密演算法，然後再用表單提交給後臺。後臺就拿著表單中已經加了密的使用者輸入的密碼，跟資料庫中已經加了密的密碼匹配驗證就行了。而不是把資料庫裡的密碼先解密，然後再用使用者提交的沒有加密的密碼跟它匹配。
因為md5演算法是不可逆的，所以解密後的資料可能不是原來的資料，而是別的資料，而某一資料通過md5演算法加密後的密文是唯一的。所以採有以上方法才是適合的做法。