时间:2023-12-07来源:系统城装机大师作者:佚名
一、工具:
vs2013[因为我现在用的也是2013,版本随便你自己开心]
sql2008[准备过久升级]
二、用到的语言
HTML+CSS+Jquery+Ajax+sqlserver
HTML[相当于一个人]
css[要穿衣服]
Jquery[人要做一些动作,Jquery是对js一些常用方法的封装]
Ajax[建立前端页面与数据库的交互]
sqlserver[数据库]
三、过程
html部分代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
< body > < div id = "header" > < div id = "header_con" > < a href = "javascript:;" onclick = "showRegBox()" >注册</ a > < a href = "javascript:;" onclick = "ShowLoginBox()" >登录</ a > </ div > </ div > < div id = "loginBox" > < div class = "login_Item" > < input type = "text" id = "TxtUserName" placeholder = "手机邮箱/用户名" /> </ div > < div class = "login_Item" >< input type = "password" id = "TxtPwd" placeholder = "请输入密码" /></ div > < div class = "login_Item" >< a href = "javascript:;" onclick = "login()" >登录</ a ></ div > </ div > < div id = "Regbox" > < div class = "login_Item" >< input type = "text" id = "TxtRegUserName" placeholder = "手机邮箱/用户名" /></ div > < div class = "login_Item" >< input type = "password" id = "TxtRegPwd" placeholder = "请输入密码" /></ div > < div class = "login_Item" >< input type = "text" id = "TxtRegqq" placeholder = "QQ号" /></ div > < div class = "login_Item" >< input type = "text" id = "TxtRegEmail" placeholder = "邮箱" /></ div > < div class = "login_Item" >< a href = "javascript:;" onclick = "Reglogin()" >注册</ a ></ div > </ div > </ body > |
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
* { 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 ; /*//隐藏状态*/ margin : 0px auto ; } #Regbox { display : none ; } |
js代码:[用了layer插件]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/// <reference path="_references.js" /> /// <reference path="jquery.md5.js" /> function ShowLoginBox() { layer.open({ type: 1, title: "用户登录" , //设置div大小 area: [ "390px" , "300px" ], content: $( "#loginBox" ) }); } function login() { //1.获取到用户名和密码 var username = $.trim($( "#TxtUserName" ).val()); var pwd =$.md5( $.trim($( "#TxtPwd" ).val())); //2.判断用户名和密码是否为空 if (username == "" || pwd == "" ) { layer.alert( "用户名或密码不能为空!" , { title: "提示:" , icon: 5 }); } else { $.post( "/Handler1.ashx" , { "UserName" : username, "Pwd" : pwd, "cmd" : "login" }, function (data) { if (data == "登录成功" ) { //layer.alert("登录成功!", layer.msg( "登录成功!" , { //title: "提示:", icon: 6 }); } else { layer.msg( "用户名或密码不正确" , { //title: "提示:", icon: 5 }); } }); } } function showRegBox() { layer.open({ type:1, title: "注册" , area: [ "390px" , "350px;" ], //div的内容 content:$( "#Regbox" ) }); } function Reglogin() { //1.获取到输入的内容 var username = $.trim($( "#TxtRegUserName" ).val()); var pwd =$.md5($.trim($( "#TxtRegPwd" ).val())); var qq = $.trim($( "#TxtRegqq" ).val()); var email = $.trim($( "#TxtRegEmail" ).val()); //并做判断 if (username == "" || pwd == "" ) { layer.msg( "用户名或密码不能为空!" ); } else { //cmd用做标示,判断是注册还是登录 $.post( "/Handler1.ashx" , { "UserName" : username, "Pwd" : pwd, "qq" :qq, "email" :email, "cmd" : "reg" }, function (data) { if (data == "注册成功" ) { layer.msg( "恭喜你,注册成功!" , { icon: 6 }); } else { layer.msg(data, { icon:5 }); } }); } } |
ajax代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; namespace baidu20160707 { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { 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); } //登录 public string loginAjax() { //1.接收传过来的用户名和密码 string username = context.Request.Form[ "username" ]; //类名调用方法,32位,再做加盐处理 string pwd =Md5Class.GetMD5( context.Request.Form[ "pwd" ]+ "傻逼玩意" ,32); //所在对应的id是否存在 //string strsql = string.Format("select id from Users where UserName='{0}' and Pwd='{1}'", username, pwd); //sql注入处理1.@传参的方式,, username, pwd不要,'分号也不要' string strsql = string .Format( "select id from Users where UserName=@UserName and Pwd=@Pwd" ); //sql注入处理2.调用SqlParameter[]数组对数据进行过滤 SqlParameter[] paras = new SqlParameter[] { new SqlParameter( "@UserName" ,SqlDbType.NVarChar), new SqlParameter( "@Pwd" ,SqlDbType.NVarChar) }; //sql注入处理3.指定它的值 paras[0].Value = username; paras[1].Value = pwd; //sql注入处理,4.不能忘记把数组对象传进去 if (SqlHelper.Exists(strsql,paras)) { //context.Response.Write("登录成功"); return "登录成功" ; } else { //context.Response.Write("用户名或密码不正确"); return "用户名或密码不正确" ; } } //注册 public string RegAjax() { //接收传过来的用户名和密码 string username=context.Request.Form[ "username" ]; string pwd=Md5Class.GetMD5(context.Request.Form[ "pwd" ]+ "傻逼玩意" ,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 "该用户已注册,请重新输入" ; } else { //不存在就注册 //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 SqlParameter( "@eMail" ,SqlDbType.NVarChar), }; paras2[0].Value = username; paras2[1].Value = pwd; paras2[2].Value = qq; paras2[3].Value = email; //插入处理 if (SqlHelper.ExecteNonQueryText(strsql2, paras2) > 0) { return "注册成功" ; } else { return "注册失败" ; } } } public bool IsReusable { get { return false ; } } } } |
效果:点击登录弹出登录框,点击注册,弹出注册框
四、MD5加密算法
MD5加密算法:大多数情况下,用户的密码是存储在数据库中的,如果不采取任何的保密措施,以明文的方式保存密码,查找数据库的人员就可以轻松获取用户的信息,所以为了增加安全性,对数据进行加密是必要的。MD5,是一种用于产生数字签名的单项散列算法,它以512位分组来处理输入的信息,且每一分组又被划分为16位子分组,经过一系列处理,算法的输入由4个32位分组级联后生成一个128位散列值。
没有加密之前的明文通过解析的效果:
注册信息:
建议:从源头解决这种问题,运用正则表达式从源头入手,尽量设置一些含有特殊字符的密码。
虽然MD5加密是单项加密,但其结构还是可以破解的。所以,通常情况下,我们后做[两次md5加密,再做加盐处理]。
用了sql注入处理+MD5两次加密以及加盐处理之后的效果:
数据库显示的该条数据:
五、sql注入
sql注入是指攻击者利用数据库数据的漏洞进行攻击,特别是在登录时,用户常利用SQL语句中的特定字符创建一个恒等条件,从而不需要任何用户名和密码就可以访问网站数据。
2023-12-07
SQL Server 2008 R2安装配置方法图文教程2023-12-07
卸载SQL2008遇到问题(重启计算机失败、找不到SQL卸载程序)的解决办法2023-12-07
图文详解Windows Server2012 R2中安装SQL Server2008其实大家稍微动下大脑,问题可以转化为,是求最小连续数组中的最大值,数组大小可以为1。=======================================================================做戏做全套,送...
2023-12-07
Visual Studio Express和SQL Server Express系列为基础型免费程序开发环境和SQL数据库,为广大的学习爱好者带来了福音,同时还可以利用它们进行一些比较简单的系统的开发,而不用担心版权问题。其中SQL SERVER EXPRESS版本...
2023-12-07