One, tools:
vs2013[because I now use is also 2013, version of your own happy.
Sql2008[ready for too long upgrade]
Second, the language used
Html+css+jquery+ajax+sqlserver
Html[is equivalent to a person]
css[to wear clothes]
jquery[people want to do some action, jquery is to JS some common methods of encapsulation]
ajax[Building front-end pages interacting with the database]
sqlserver[Database]
Third, the process
HTML Section Code:
<body> <div id= "header" > <div id= "Header_con" > <a href= "javascript:;" onclick= "Showregbo X () "> Registration </a> <a href=" javascript:; "onclick=" Showloginbox () "> Login </a> </div> </div& Gt <div id= "Loginbox" > <div class= "Login_item" > <input type= "text" id= "txtUserName" placeholder= "mobile Mail Box/user name "/> </div> <div class=" Login_item "><input type=" password "id=" txtpwd "placeholder=" Please enter password " /></div> <div class= "Login_item" ><a href= "javascript:;" onclick= "Login ()" > Login </a></ div> </div> <div id= "Regbox" > <div class= "login_item" ><input type= "text" id= "Txtregusernam E "placeholder=" Mobile Mailbox/username "/></div> <div class=" Login_item "><input type=" password "id=" txtregpwd "pl aceholder= "Please enter password"/></div> <div class= "Login_item" ><input type= "text" id= "TXTREGQQ" placeholder= " QQ Number "/></div> <div class= "Login_item" ><input type= "text" id= "Txtregemail" placeholder= "Mailbox"/></div> <div class= " Login_item "><a href=" javascript:; "onclick=" RegLogin () "> Registration </a></div> </div> </body >
CSS code:
* {
margin:0px;
padding:0px;
}
#header {
height:40px;
width:100%;
Background: #000000;
}
a {
text-decoration:none;
}
#header a {
float:right;
Color: #ffffff;
line-height:40px;
margin-left:10px;
}
#header_con {
width:1200px;
margin:0px Auto;
Login_item {
margin-left:20px
}
. Login_item input {
width:348px;
height:40px;
margin-top:10px;
Border:solid 1px #04a6f9;
}
. Login_item a {
margin-top:20px;
width:350px;
height:40px;
Display:block;
Background: #04a6f9;
Color: #ffffff;
line-height:40px;
Text-align:center;
}
#loginBox {
display:none;/*//hidden state *
/margin:0px auto;
}
#Regbox {
display:none;
}
JS code: [With the layer plugin]
<reference path= "_references.js"/>///<reference path= "jquery.md5.js"/> Function Showloginbox () {L
Ayer.open ({type:1, title: "User Login",//Set div size area: ["390px", "300px"], Content: $ ("#loginBox")});
function login () {//1. Get to User name and password var username = $.trim ($ ("#TxtUserName"). Val ());
var pwd =$.md5 ($.trim ($ ("#TxtPwd"). Val ()); 2. Determine if the username and password are empty if (username = = "" | | PWD = = "") {Layer.alert ("User name or password cannot be empty!")
", {title:" Hint: ", icon:5});
else {$.post ("/handler1.ashx", {"UserName": UserName, "Pwd": Pwd, "cmd": "Login"}, function (data) { if (data = "Login Successful") {//layer.alert ("Login successful!") ", Layer.msg (" Login successful!)
", {//title:" Hint: ", icon:6});
else {layer.msg ("User name or password is incorrect", {//title: "Hint:", Icon:5
});
}
}); }} function Showregbox () {Layer.open ({tyPe:1, Title: "Register", Area: ["390px", "350px;"],//div content content:$ ("#Regbox")});
The function RegLogin () {//1. Gets to the input content var username = $.trim ($ ("#TxtRegUserName"). Val ());
var pwd =$.md5 ($.trim ($ ("#TxtRegPwd"). Val ());
var QQ = $.trim ($ ("#TxtRegqq"). Val ());
var email = $.trim ($ ("#TxtRegEmail"). Val ()); And make a judgment if (username = = "" | | PWD = = "") {layer.msg ("User name or password cannot be empty!")
"); else {//cmd used for marking, judge is registered or login $.post ("/handler1.ashx", {"UserName": UserName, "Pwd": PWD, "QQ": QQ, "email": Email, "cmd ":" Reg "}, function (data) {if (data = =" Registered successfully ") {layer.msg (" Congratulations, registration success! ")
", {icon:6});
else {layer.msg (data, {icon:5});
}
});
}
}
Ajax code:
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Data;
Using System.Data.SqlClient; namespace baidu20160707 {///<summary>///Handler1 Summary description///</summary> public class Handler1:ihtt
Phandler {public HttpContext context;
public string strresult = "";
public void ProcessRequest (HttpContext context) {This.context = context; String Cmd=context.
request.form["cmd"];
Switch (CMD) {case "login": strresult = Loginajax ();
Break
Case "Reg": strresult = Regajax ();
Break } context.
Response.Write (Strresult); //Login public string Loginajax () {//1. Receive incoming username and password string username = context.
request.form["username"]; Class Name invocation method, 32 bits, then add salt to handle string pwd =md5class.getmd5 (context.
request.form["pwd"]+ "silly Thing", 32); Whether the corresponding ID exists//string strSQL = string. Format ("SELECT ID from Us"ers where username= ' {0} ' and pwd= ' {1} ', UserName, PWD); The way SQL injection handles 1.@, username, pwd, ' semicolon nor ' string strSQL = string.
Format ("Select ID from Users where username= @UserName and pwd= @Pwd"); SQL injection processing 2. Call the sqlparameter[] array to filter the data sqlparameter[] paras = new sqlparameter[] {new SqlParameter ("@U
Sername ", SqlDbType.NVarChar), New SqlParameter (" @Pwd ", SqlDbType.NVarChar)}; SQL injection Processing 3. Specify its value paras[0].
Value = Username; PARAS[1].
Value = pwd; SQL injection processing, 4. You can't forget to pass the array object in if (Sqlhelper.exists (Strsql,paras)) {//context.
Response.Write ("Login Successful");
Return "Login Successful"; else {//context.
Response.Write ("Incorrect username or password");
Return "User name or password is incorrect"; }//Register public string Regajax () {///Receive incoming username and password string username=context.
request.form["username"]; String Pwd=md5class.getmd5 (context.
request.form["pwd"]+ "silly Thing", 32); String Qq=context. Request.forM["QQ"]; string email = context.
request.form["email"]; String strsql1 = String.
Format ("Select ID from Users where username= ' {0} '", username,pwd); String strsql1 = String.
Format ("Select ID from Users where username= @UserName");
sqlparameter[] paras1 = new sqlparameter[] {new SqlParameter ("@UserName", SqlDbType.NVarChar)}; Paras1[0].
Value = Username;
if (Sqlhelper.exists (STRSQL1, PARAS1))//if (Sqlhelper.exists (STRSQL1)) {return "The user is registered, please re-enter"; else {//does not exist to register//string STRSQL2 = string.
Format (INSERT into Users (username,pwd,qq,email) VALUES (' {0} ', ' {1} ', ' {2} ', ' {3} '), UserName, PWD, QQ, EMail); , username, pwd, QQ, email string strsql2 = string.
Format (INSERT into Users (Username,pwd,qq,email) VALUES (@UserName, @Pwd, @QQ, @eMail) ");
sqlparameter[] Paras2 = new sqlparameter[] {new SqlParameter ("@UserName", SqlDbType.NVarChar), New SqlParameter ("@Pwd", SqlDbType.NVarChar), New SqlParameter ("@QQ", SqlDbType.NVarChar), new SQL
Parameter ("@eMail", SqlDbType.NVarChar),}; Paras2[0].
Value = Username; PARAS2[1].
Value = pwd; PARAS2[2].
Value = QQ; PARAS2[3].
Value = email;
Insert Processing if (Sqlhelper.exectenonquerytext (STRSQL2, PARAS2) > 0) {return "registered successfully";
else {return "registration failed";
}} public bool IsReusable {get {return false;
}
}
}
}
Effect: Click on the Login pop-up login box, click Register, pop-up registration box
Four, MD5 encryption algorithm
MD5 encryption algorithm: In most cases, the user's password is stored in the database, if you do not take any security measures to save the password in plaintext, the person looking for the database can easily get the user's information, so in order to increase security, the data encryption is necessary. MD5, is a single hash algorithm for generating digital signatures, which deals with input information in 512-bit groupings, and each grouping is divided into 16-bit subgroups, and after a series of processing, the input of the algorithm is represented by 4 32-bit subgroups into a 128-bit hash value.
The effect of parsing before plaintext is not encrypted:
Registration information:
Suggestion: From the source to solve this problem, the use of regular expressions from the source, try to set some contain special characters password.
Although MD5 encryption is a single encryption, its structure can still be cracked. So, normally, after we do [two times MD5 encryption, then add salt treatment].
Using SQL injection to process +MD5 two encryption and the effect of salt treatment:
The data displayed by the database:
Five, SQL injection
SQL injection is an attacker exploiting database data vulnerabilities, especially when logging on, users often use specific characters in SQL statements to create an identity condition so that Web site data can be accessed without requiring any user name and password.
Specific: http://www.cnblogs.com/wangwangwangMax/p/5551614.html
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Author: Wangwangwangmax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
