Ajax實現安全登入

 

放暑假之前，在網上閑逛，不知怎麼的就逛到了CoolCode.CN，看到了andot老師的文章《安全登入系統的設計與實現方案》，深受啟發，決定將其進行實際應用。但是文章中僅僅指出了大致的流程，並沒有描述具體操作方法。經過一下午+一晚上的摸索，終於將其實現。本文就將介紹我在實踐過程中的一些感想和經驗。

平時我們在非SSL加密串連的網站上遞交登入表單都是使用明文提交密碼，伺服器收到用戶端遞交的密碼之後，用相應的密碼編譯演算法加密（比如MD5或者是SHA1，本文以MD5為例），與資料庫中MD5過的密碼進行比對，判斷使用者是否合法。但是在這種情況下，一旦使用者發送的純文字密碼被截獲，使用者的安全就受到了嚴重威脅。

依據andot老師的文章，使用Javascript+PHP實現安全登入的最簡便安全的方法就是伺服器提供隨機字串並將其儲存，Javascript在用戶端使用MD5將隨機數和密碼合并進行運算，將MD5過的字串提交給伺服器，伺服器方也作相同的運算，與用戶端提交的結果進行比對，就可以判斷使用者的身份了。這樣，就算截獲中途傳輸的資料，也只是一個MD5過的密碼和一個一次性的隨機字串再次MD5運算的產物而已，隨機字串一旦使用過就會被立即銷毀，無法再次驗證，沒有絲毫用處。而就算中途截獲隨機字串，若不知道密碼原文，依然無法向伺服器遞交合法的驗證字串。密碼原文只在用戶端瀏覽器上出現，不通過網路傳輸，每次提交的驗證用的密碼都不同，連伺服器都不知道原文是什麼，從而達到保護密碼原文的目的。
大致原理清楚之後，下面就是具體工作流程。

首先，使用者在用戶端填寫表單，點擊提交按鈕，觸發Javascript。Javascript非同步向伺服器端請求隨機字串，伺服器端產生字串，儲存於SESSION，同時作為XML發送回用戶端。用戶端的Javascript收到XML並進行解析，得到隨機字串。

隨後，Javascript取得使用者輸入的密碼原文，將其進行MD5。之後將MD5之後的密碼與伺服器發來的隨機字串再次進行MD5。

之後，Javascript將加密過後的密碼與使用者名稱提交給伺服器，伺服器用SESSION中的隨機字串與資料庫中的密碼進行MD5並銷毀SESSION中的隨機字串，將結果與使用者提交的結果進行比對，判斷使用者身份。如果通過驗證，伺服器將使用者的狀態、帳號等資訊儲存與SESSION。
最後，伺服器將登陸狀態再次通過XML返回給用戶端，如果返回成功，則用戶端顯示登陸成功，並將瀏覽器重新定向至相關頁面。至此登陸過程結束。

事實上，這個過程非常簡單，實現起來只需要5個Javascript函數，一個用來建立XMLHttpRequest對象，一個用來向伺服器申請隨機字串，一個用來取得隨即字串，一個用來向伺服器發送使用者提交的使用者名稱和密碼，一個用來取得登陸結果並判斷是否需要重新導向。如果還需要一個進度條或者是當前登入狀態的顯示，至需要再增加一到兩個控制頁面顯示的函數就可以了。

下面是AJAX代碼：

/*
* SAFE LOGIN
* Version 0.2 Copyright (C) Dgwxx 2006.
* See http://www.dgwxx.net for more info.
*/

var xmlHttp;

setStatus("準備...", "green");

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function requestRndCode() {
setStatus("正在請求驗證碼...", "green");
createXMLHttpRequest();

var url = "user.php?action=rnds&timeStamp=" + new Date().getTime();

xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = processRndcode;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}

function processRndcode(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
setStatus("正在處理驗證碼...", "green");
var rndcode = xmlHttp.responseXML.getElementsByTagName("rndcode")[0].firstChild.data;
sendVerifyRequest(rndcode);
}
}

function sendVerifyRequest(rndstr) {
setStatus("發送驗證請求...", "green");
createXMLHttpRequest();

var url = "user.php?action=verify&timeStamp=" + new Date().getTime();
var loginuser = document.getElementById("loginuser").value;
var loginpwd = document.getElementById("loginpwd").value;
var sendpwd = hex_md5(rndstr + hex_md5(loginpwd));

xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = processVerifyRequest;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("loginuser=" + loginuser + "&loginpwd=" + sendpwd);
setStatus("正在等待伺服器回應...", "green");
return false;
}

function processVerifyRequest() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
setStatus("正在處理驗證...", "green");
var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;

if (val == "true") {
setStatus("驗證成功...", "green");
setTimeout("window.location.href='config.php'",500);
} else {
setStatus("驗證失敗...", "red");
}
}
}

function setStatus(message, fontColor) {
document.getElementById("status").innerHTML = "<font color=" + fontColor + ">安全驗證狀態 : " + message + " </font>";
}

PHP分配隨機字串的代碼：

<?
$rnd_code = md5($nowtime_stamp . $sitename);
$_SESSION['rnd_user_key'] = $rnd_code;
header("Content-type:application/xml");
echo '<?xml version="1.0" encoding="UTF-8" ?>
<response>
<rndcode>'.$rnd_code.'</rndcode>
</response>';
?>

 

 

=========================================================

本文為轉載，轉載必須確保本文完整並完整保留原作者資訊和本文連結

E-mail: khler@163.com

QQ:     23381103

MSN:   pragmac@hotmail.com

原文：http://www.phpli.com/ajax/yingyong_30.html

=========================================================