一、工具: vs2013[因為我現在用的也是2013,版本隨便你自己開心] sql2008[準備過久升級] 二、用到的語言: HTML+CSS+Jquery+Ajax+sqlserver HTML[相當於一個人] css[要穿衣服] Jquery[人要做一些動作,Jquery是對js一些常用方法的封 ...
一、工具:
vs2013[因為我現在用的也是2013,版本隨便你自己開心]
sql2008[準備過久升級]
二、用到的語言:
HTML+CSS+Jquery+Ajax+sqlserver
HTML[相當於一個人]
css[要穿衣服]
Jquery[人要做一些動作,Jquery是對js一些常用方法的封裝]
Ajax[建立前端頁面與資料庫的交互]
sqlserver[資料庫]
三、過程
html部分代碼:
1 <body> 2 <div id="header"> 3 <div id="header_con"> 4 <a href="javascript:;" onclick="showRegBox()">註冊</a> 5 <a href="javascript:;" onclick="ShowLoginBox()">登錄</a> 6 </div> 7 </div> 8 <div id="loginBox"> 9 <div class="login_Item"> 10 <input type="text" id="TxtUserName" placeholder="手機郵箱/用戶名" /> 11 </div> 12 <div class="login_Item"><input type="password" id="TxtPwd" placeholder="請輸入密碼" /></div> 13 <div class="login_Item"><a href="javascript:;" onclick="login()">登錄</a></div> 14 </div> 15 <div id="Regbox"> 16 <div class="login_Item"><input type="text" id="TxtRegUserName" placeholder="手機郵箱/用戶名" /></div> 17 <div class="login_Item"><input type="password" id="TxtRegPwd" placeholder="請輸入密碼" /></div> 18 <div class="login_Item"><input type="text" id="TxtRegqq" placeholder="QQ號"/></div> 19 <div class="login_Item"><input type="text" id="TxtRegEmail" placeholder="郵箱" /></div> 20 <div class="login_Item"><a href="javascript:;" onclick="Reglogin()">註冊</a></div> 21 </div> 22 </body>
css代碼:
1 * { 2 margin:0px; 3 padding:0px; 4 } 5 #header { 6 height:40px; 7 width:100%; 8 background:#000000; 9 } 10 11 a { 12 text-decoration:none; 13 } 14 #header a { 15 float:right; 16 color:#ffffff; 17 line-height:40px; 18 margin-left:10px; 19 } 20 #header_con { 21 width:1200px; 22 margin:0px auto; 23 } 24 .login_Item { 25 margin-left:20px; 26 } 27 .login_Item input { 28 width:348px; 29 height:40px; 30 margin-top:10px; 31 border:solid 1px #04a6f9; 32 } 33 .login_Item a { 34 margin-top:20px; 35 width:350px; 36 height:40px; 37 display:block; 38 background:#04a6f9; 39 color:#ffffff; 40 line-height:40px; 41 text-align:center; 42 } 43 #loginBox { 44 display:none;/*//隱藏狀態*/ 45 margin:0px auto; 46 } 47 48 #Regbox { 49 display:none; 50 }
js代碼:[用了layer插件]
1 /// <reference path="_references.js" /> 2 /// <reference path="jquery.md5.js" /> 3 4 function ShowLoginBox() 5 { 6 layer.open({ 7 type: 1, 8 title: "用戶登錄", 9 //設置div大小 10 area: ["390px", "300px"], 11 content: $("#loginBox") 12 }); 13 } 14 15 function login() 16 { 17 //1.獲取到用戶名和密碼 18 var username = $.trim($("#TxtUserName").val()); 19 var pwd =$.md5( $.trim($("#TxtPwd").val())); 20 //2.判斷用戶名和密碼是否為空 21 if (username == "" || pwd == "") { 22 layer.alert("用戶名或密碼不能為空!", 23 { 24 title: "提示:", 25 icon: 5 26 }); 27 } 28 else 29 { 30 $.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"cmd":"login" }, function (data) 31 { 32 if (data == "登錄成功") { 33 //layer.alert("登錄成功!", 34 layer.msg("登錄成功!", 35 { 36 //title: "提示:", 37 icon: 6 38 }); 39 } 40 else 41 { 42 layer.msg("用戶名或密碼不正確", 43 { 44 //title: "提示:", 45 icon: 5 46 }); 47 } 48 }); 49 } 50 } 51 52 function showRegBox() 53 { 54 layer.open({ 55 type:1, 56 title:"註冊", 57 area: ["390px", "350px;"], 58 //div的內容 59 content:$("#Regbox") 60 }); 61 } 62 63 function Reglogin() 64 { 65 //1.獲取到輸入的內容 66 var username = $.trim($("#TxtRegUserName").val()); 67 var pwd =$.md5($.trim($("#TxtRegPwd").val())); 68 var qq = $.trim($("#TxtRegqq").val()); 69 var email = $.trim($("#TxtRegEmail").val()); 70 //並做判斷 71 if (username == "" || pwd == "") { 72 layer.msg("用戶名或密碼不能為空!"); 73 } 74 else 75 {//cmd用做標示,判斷是註冊還是登錄 76 $.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"qq":qq,"email":email,"cmd": "reg" }, function (data) 77 { 78 if (data == "註冊成功") { 79 layer.msg("恭喜你,註冊成功!", 80 { 81 icon: 6 82 }); 83 } 84 else 85 { 86 layer.msg(data, 87 { 88 icon:5 89 }); 90 } 91 }); 92 } 93 }
ajax代碼:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Data.SqlClient; 7 8 namespace baidu20160707 9 { 10 /// <summary> 11 /// Handler1 的摘要說明 12 /// </summary> 13 public class Handler1 : IHttpHandler 14 { 15 public HttpContext context; 16 public string strResult = ""; 17 public void ProcessRequest(HttpContext context) 18 { 19 this.context = context; 20 string cmd=context.Request.Form["cmd"]; 21 switch (cmd) 22 { 23 case "login": 24 strResult = loginAjax(); 25 break; 26 case "reg": 27 strResult = RegAjax(); 28 break; 29 } 30 context.Response.Write(strResult); 31 } 32 33 //登錄 34 public string loginAjax() 35 { 36 //1.接收傳過來的用戶名和密碼 37 string username = context.Request.Form["username"]; 38 //類名調用方法,32位,再做加鹽處理 39 string pwd =Md5Class.GetMD5( context.Request.Form["pwd"]+"傻逼玩意",32); 40 //所在對應的id是否存在 41 //string strsql = string.Format("select id from Users where UserName='{0}' and Pwd='{1}'", username, pwd); 42 //sql註入處理1.@傳參的方式,, username, pwd不要,'分號也不要' 43 string strsql = string.Format("select id from Users where UserName=@UserName and Pwd=@Pwd"); 44 //sql註入處理2.調用SqlParameter[]數組對數據進行過濾 45 SqlParameter[] paras = new SqlParameter[] 46 { 47 new SqlParameter("@UserName",SqlDbType.NVarChar), 48 new SqlParameter("@Pwd",SqlDbType.NVarChar) 49 }; 50 //sql註入處理3.指定它的值 51 paras[0].Value = username; 52 paras[1].Value = pwd; 53 //sql註入處理,4.不能忘記把數組對象傳進去 54 if (SqlHelper.Exists(strsql,paras)) 55 { 56 //context.Response.Write("登錄成功"); 57 return "登錄成功"; 58 } 59 else 60 { 61 //context.Response.Write("用戶名或密碼不正確"); 62 return "用戶名或密碼不正確"; 63 } 64 } 65 66 //註冊 67 public string RegAjax() 68 { 69 //接收傳過來的用戶名和密碼 70 string username=context.Request.Form["username"]; 71 string pwd=Md5Class.GetMD5(context.Request.Form["pwd"]+"傻逼玩意",32); 72 string qq=context.Request.Form["qq"]; 73 string email = context.Request.Form["email"]; 74 //string strsql1 = string.Format("select id from Users where UserName='{0}' ",username,pwd); 75 string strsql1 = string.Format("select id from Users where UserName=@UserName "); 76 SqlParameter[] paras1 = new SqlParameter[] 77 { 78 new SqlParameter("@UserName",SqlDbType.NVarChar) 79 }; 80 paras1[0].Value = username; 81 if (SqlHelper.Exists(strsql1, paras1)) 82 //if (SqlHelper.Exists(strsql1)) 83 { 84 return "該用戶已註冊,請重新輸入"; 85 } 86 else 87 { 88 //不存在就註冊 89 //string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values('{0}','{1}','{2}','{3}')", username, pwd, qq, email); 90 //, username, pwd, qq, email 91 string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values(@UserName,@Pwd,@QQ,@eMail)"); 92 SqlParameter[] paras2 = new SqlParameter[] 93 { 94 new SqlParameter("@UserName",SqlDbType.NVarChar), 95 new SqlParameter("@Pwd",SqlDbType.NVarChar), 96 new SqlParameter("@QQ",SqlDbType.NVarChar), 97 new SqlParameter("@eMail",SqlDbType.NVarChar), 98 }; 99 paras2[0].Value = username; 100 paras2[1].Value = pwd; 101 paras2[2].Value = qq; 102 paras2[3].Value = email; 103 //插入處理 104 if (SqlHelper.ExecteNonQueryText(strsql2, paras2) > 0) 105 { 106 return "註冊成功"; 107 } 108 else 109 { 110 return "註冊失敗"; 111 } 112 } 113 } 114 public bool IsReusable 115 { 116 get 117 { 118 return false; 119 } 120 } 121 } 122 }
效果:點擊登錄彈出登錄框,點擊註冊,彈出註冊框
四、MD5加密演算法
MD5加密演算法:大多數情況下,用戶的密碼是存儲在資料庫中的,如果不採取任何的保密措施,以明文的方式保存密碼,查找資料庫的人員就可以輕鬆獲取用戶的信息,所以為了增加安全性,對數據進行加密是必要的。MD5,是一種用於產生數字簽名的單項散列演算法,它以512位分組來處理輸入的信息,且每一分組又被劃分為16位子分組,經過一系列處理,演算法的輸入由4個32位分組級聯後生成一個128位散列值。
沒有加密之前的明文通過解析的效果:
註冊信息:
建議:從源頭解決這種問題,運用正則表達式從源頭入手,儘量設置一些含有特殊字元的密碼。
雖然MD5加密是單項加密,但其結構還是可以破解的。所以,通常情況下,我們後做[兩次md5加密,再做加鹽處理]。
用了sql註入處理+MD5兩次加密以及加鹽處理之後的效果:
資料庫顯示的該條數據:
五、sql註入
sql註入是指攻擊者利用資料庫數據的漏洞進行攻擊,特別是在登錄時,用戶常利用SQL語句中的特定字元創建一個恆等條件,從而不需要任何用戶名和密碼就可以訪問網站數據。
具體:http://www.cnblogs.com/wangwangwangMax/p/5551614.html