登入介面是資訊系統提供的必備的功能，是提供給使用者提供維護資訊的介面。接下來，我來帶領大家打造一個漂亮、安全的登入介面，使用的技術是ASP.NET+jQuery

先來看看預覽效果

Ajax登入重點在Ajax，輸入使用者名稱和密碼後，使用Ajax方式將資訊提交到伺服器端，伺服器端判斷時候存在該使用者，存在則登入成功並轉向管理介面（有時需要寫cookie或是利用Session，此處不作討論），不存在則提示登入失敗。

基本流程圖如下

上面是主要思路，為了打造安全的登入，在使用ajax將密碼傳到伺服器端前，我們可以使用MD5對密碼進行加密，當然資料庫中儲存的也是加密後的字串。jQuery有一款這樣的MD5加密外掛，使用十分方便。

流程知道了，就可以方便實現了。以下是一些主要的程式碼

Default.aspx：主要是提供超連結，點選會呼叫thickbox，開啟彈出頁面。

1. <div style="margin-left:50px; margin-top:50px; ">
2. 歡迎使用後臺，
3. <a href="Login.htm?TB_iframe&height=180&width=350&modal=true" class="thickbox" id="myToolTip" title="點選登入，進入後臺管理" >
4. 點選登入！</a>
5.                 
6. 繼續瀏覽前臺，<a href="../Default.aspx">返回前臺</a>

login.htm：真正的登入介面，負責登入邏輯

1. <script type="text/javascript" src="js/jquery-1.3.2.js"
   ></script>
2. <script type="text/javascript">
3. $().ready(function () {
4. $('#Login').click(function () {
5. if ($('#username').val() == "" || $('#password').val() == "") {
6. alert("使用者名稱或密碼不能為空！");
7. }
8. else {
9. $.ajax({
10. type: "POST",
11. url: "Ajax/LoginHandler.ashx",
12. data: "username=" + escape($('#username').val()) + "&password=" + escape($('#password').val()),
13. beforeSend: function () {
14. $("#loading").css("display", "block"); //點選登入後顯示loading，隱藏輸入框
15. $("#login").css("display", "none");
16. },
17. success: function (msg) {
18. $("#loading").hide(); //隱藏loading
19. if (msg == "success") {
20. //parent.tb_remove();
21. parent.document.location.href = "admin.htm"; //如果登入成功則跳到管理介面
22. parent.tb_remove();
23. }
24. if (msg == "fail") {
25. alert("登入失敗！");
26. }
27. },
28. complete: function (data) {
29. $("#loading").css("display", "none"); //點選登入後顯示loading，隱藏輸入框
30. $("#login").css("display", "block");
31. },
32. error: function (XMLHttpRequest, textStatus, thrownError) {
33. }
34. });
35. }
36. });
37. });
38. </script>
39. <div id="loading" style="text-align: center; display: none; padding-top: 10%">
40. <img src="images/loadingajax.gif" alt="loading" />
41. </div>
42. <div id="login" style="text-align: center">
43. <div style="position:absolute; right:0; top:0"><img src="images/closebox.png" onclick="parent.tb_remove()" alt="點選關閉" style="cursor:pointer" /></div>
44. <table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;">
45. <tr>
46. <td style="text-align: right; padding: 10px">
47. <label>
48. 使用者名稱:</label>
49. </td>
50. <td>
51. <input id="username" type="text" size="20" />
52. </td>
53. </tr>
54. <tr>
55. <td style="text-align: right; padding: 10px">
56. <label>
57. 密碼:</label>
58. </td>
59. <td>
60. <input id="password" type="password" size="20" />
61. </td>
62. </tr>
63. <tr align="right">
64. <td colspan="2">
65. <input type="submit" id="Login" value="&nbsp;&nbsp;登&nbsp;錄&nbsp;&nbsp;" style="margin-right: 50px">&nbsp;
66. <input type="submit" id="LoginCancel" value="&nbsp;&nbsp;取&nbsp;消&nbsp;&nbsp;" onclick="parent.tb_remove()">
67. </td>
68. </tr>
69. </table>
70. </div>

LoginHandler.ashx：ajax處理類，簡單的邏輯

1. string username = context.Request["username"].ToString();
2. string password = context.Request["password"].ToString();
3. //context.Response.Write(password);如果使用加密，則寫入資料庫要加密後的欄位，然後登陸的時候就用加密後的字串匹配
4. //此處連線資料庫檢視是否有此使用者，此處為了方便起見，直接判斷
5. if (username == "admin" && password == "1")
6. {
7. context.Response.Write("success");
8. //儲存session
9. }
10. else
11. {
12. context.Response.Write("fail");
13. }

 ok，一個簡單的登入功能就完成了，當然此處在登入的時候沒有進行密碼加密。

下面我們來看看jQuery的加密外掛MD5外掛， 使用十分方便，加入md5.js的引用就可以使用$.md5()函式對字串進行加密，

如下對上述程式碼做稍微改變，即可看到加密後的字串， 

login.htm中： 

1. data: "username=" + escape($('#username').val()) + "&password=" + $.md5(escape($('#password').val())),
2. success: function (msg) {
3. $("#loading").hide(); //隱藏loading
4. alert(msg);
5. if (msg == "success") {
6. //parent.tb_remove();
7. parent.document.location.href = "admin.htm"; //如果登入成功則跳到管理介面
8. parent.tb_remove();
9. }
10. if (msg == "fail") {
11. alert("登入失敗！");
12. }
13. }

 LoginHandler.ashx中加密碼返回即可：

context.Response.Write(password); 

ok，再次執行程式會彈出 輸入密碼的MD5加密之後的字串。