一個(gè)簡單的后臺(tái)與數(shù)據(jù)庫交互的登錄與注冊(cè)[sql注入處理、以及MD5加密]

更新時(shí)間：2024年09月18日 17:29:34 作者：wangwangwangMax

這篇文章主要介紹了一個(gè)簡單的后臺(tái)與數(shù)據(jù)庫交互的登錄與注冊(cè)，包含sql注入處理、以及MD5加密知識(shí)點(diǎn)介紹

一、工具：
vs2013[因?yàn)槲椰F(xiàn)在用的也是2013，版本隨便你自己開心]
sql2008[準(zhǔn)備過久升級(jí)]

二、用到的語言

HTML+CSS+Jquery+Ajax+sqlserver

HTML[相當(dāng)于一個(gè)人]

css[要穿衣服]

Jquery[人要做一些動(dòng)作,Jquery是對(duì)js一些常用方法的封裝]

Ajax[建立前端頁面與數(shù)據(jù)庫的交互]
sqlserver[數(shù)據(jù)庫]

三、過程
html部分代碼：

<body>
  <div id="header">
    <div id="header_con">
      <a href="javascript:;" onclick="showRegBox()">注冊(cè)</a>
      <a href="javascript:;" onclick="ShowLoginBox()">登錄</a>
    </div>
  </div>
  <div id="loginBox">
    <div class="login_Item">
      <input type="text" id="TxtUserName" placeholder="手機(jī)郵箱/用戶名" />
    </div>
    <div class="login_Item"><input type="password" id="TxtPwd" placeholder="請(qǐng)輸入密碼" /></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="手機(jī)郵箱/用戶名" /></div>
    <div class="login_Item"><input type="password" id="TxtRegPwd" placeholder="請(qǐng)輸入密碼" /></div>
    <div class="login_Item"><input type="text" id="TxtRegqq" placeholder="QQ號(hào)"/></div>
    <div class="login_Item"><input type="text" id="TxtRegEmail" placeholder="郵箱" /></div>
    <div class="login_Item"><a href="javascript:;" onclick="Reglogin()">注冊(cè)</a></div>
    </div>
</body>

css代碼：

* {
  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;/*//隱藏狀態(tài)*/
  margin:0px auto;
}

#Regbox {
  display:none;
}

js代碼：[用了layer插件]

/// <reference path="_references.js" />
/// <reference path="jquery.md5.js" />

function ShowLoginBox()
{
  layer.open({
    type: 1,
    title: "用戶登錄",
    //設(shè)置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:"注冊(cè)",
    area: ["390px", "350px;"],
    //div的內(nèi)容
    content:$("#Regbox")
  });
}

function Reglogin()
{
  //1.獲取到輸入的內(nèi)容
  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用做標(biāo)示，判斷是注冊(cè)還是登錄
    $.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"qq":qq,"email":email,"cmd": "reg" }, function (data)
    {
      if (data == "注冊(cè)成功") {
        layer.msg("恭喜你，注冊(cè)成功！",
          {
            icon: 6
          });
      }
      else
      {
        layer.msg(data,
          {
            icon:5
          });
      }
    });
  }
}

ajax代碼：

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"];
      //類名調(diào)用方法，32位，再做加鹽處理
      string pwd =Md5Class.GetMD5( context.Request.Form["pwd"]+"玩意",32);
      //所在對(duì)應(yīng)的id是否存在
      //string strsql = string.Format("select id from Users where UserName='{0}' and Pwd='{1}'", username, pwd);
      //sql注入處理1.@傳參的方式,, username, pwd不要，'分號(hào)也不要'
      string strsql = string.Format("select id from Users where UserName=@UserName and Pwd=@Pwd");
      //sql注入處理2.調(diào)用SqlParameter[]數(shù)組對(duì)數(shù)據(jù)進(jìn)行過濾
      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.不能忘記把數(shù)組對(duì)象傳進(jìn)去
      if (SqlHelper.Exists(strsql,paras))
      {
        //context.Response.Write("登錄成功");
        return "登錄成功";
      }
      else
      {
        //context.Response.Write("用戶名或密碼不正確");
        return "用戶名或密碼不正確";
      }
    }

    //注冊(cè)
    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 "該用戶已注冊(cè)，請(qǐng)重新輸入";
      }
      else
      {
        //不存在就注冊(cè)
        //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 "注冊(cè)成功";
        }
        else
        {
          return "注冊(cè)失敗";
        }
      }
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

效果：點(diǎn)擊登錄彈出登錄框，點(diǎn)擊注冊(cè)，彈出注冊(cè)框

四、MD5加密算法

MD5加密算法：大多數(shù)情況下，用戶的密碼是存儲(chǔ)在數(shù)據(jù)庫中的，如果不采取任何的保密措施，以明文的方式保存密碼，查找數(shù)據(jù)庫的人員就可以輕松獲取用戶的信息，所以為了增加安全性，對(duì)數(shù)據(jù)進(jìn)行加密是必要的。MD5,是一種用于產(chǎn)生數(shù)字簽名的單項(xiàng)散列算法，它以512位分組來處理輸入的信息，且每一分組又被劃分為16位子分組，經(jīng)過一系列處理，算法的輸入由4個(gè)32位分組級(jí)聯(lián)后生成一個(gè)128位散列值。

沒有加密之前的明文通過解析的效果：