當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web登陆过程总结

發(fā)布時(shí)間：2024/5/14 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 web登陆过程总结小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)前端這么久，登陸過程也簡單的練過（完全憑借自己的想象，然后成功了）

上周抽時(shí)間在網(wǎng)絡(luò)上學(xué)習(xí)了一下別人是如何做的。我覺得人家做的最好的一點(diǎn)就是函數(shù)的封裝。這樣就省去了很多重復(fù)的代碼，以后用到類似的功能就可以直接調(diào)用就好了。

下面說一下登錄過程的前前后后。

1 前端頁面

首先，登陸界面長什么樣子。就是給用戶一個(gè)輸用戶名密碼的地方。我給他寫成了這樣：

這里有登陸必須的三個(gè)元素：用戶名口令驗(yàn)證碼。先說一下這是怎么寫的吧。

就是三個(gè)input，要注意的是他們的name值，這個(gè)是要傳到后臺進(jìn)行驗(yàn)證的。將它們放在表單中，通過post方式提交到后臺。

注意到驗(yàn)證碼。這里調(diào)用了另外一個(gè)頁面“getVerify.php”，下面來介紹一下驗(yàn)證碼是怎么生成的。

2 驗(yàn)證碼

驗(yàn)證碼的原理就是，后臺產(chǎn)生一個(gè)字符串，然后把他畫成圖，呈現(xiàn)給用戶看。用戶識別后，填入自己認(rèn)為正確的結(jié)果，提交給后臺，與后臺產(chǎn)生的驗(yàn)證碼字符串進(jìn)行對比，如果匹配，就驗(yàn)證成功。這里做驗(yàn)證碼的設(shè)計(jì)主要是為了區(qū)分人機(jī)（本科畢業(yè)論文就是寫的這個(gè)方面），是一個(gè)值得研究的領(lǐng)域。

那么一步一步來，首先后臺產(chǎn)生字符串。

（再插一句，我說覺得教程好的地方是函數(shù)封裝，這里就是把與字符串相關(guān)的操作封裝在一個(gè)“string.func.php”的頁面中。相應(yīng)的，還有數(shù)據(jù)庫操作相關(guān)的“mysql.func.php”，圖像相關(guān)的“image.func.php”，分頁相關(guān)的“page.func.php”等等）

<?php function buildRandomString( $type=1,$length=4){if ($type==1) {$chars=join("",range(0,9));}elseif($type==2){$chars=join("",array_merge(range("a", "z"),range("A", "Z")));}elseif ($type==3) {$chars=join("",array_merge(range("a", "z"),range("A","Z"),range(0, 9)));}if ($length>strlen($chars)) {exit("字符串長度不夠");}$chars=str_shuffle($chars); //打亂字符串return substr($chars,0,$length); } ?>

解釋一下，這里是產(chǎn)生一個(gè)隨機(jī)字符串，函數(shù)名命名為buildRandomString，這里產(chǎn)生了三種類型的字符串，一種是只有數(shù)字，一種是只有字母（大小寫），還有一種是大小寫和數(shù)字都有的。將類型作為參數(shù)，在調(diào)用函數(shù)的時(shí)候可選。字符串的長度也是可選的。記得要把產(chǎn)生的字符串打亂。

接下來就用產(chǎn)生的這個(gè)字符串畫驗(yàn)證碼圖片。這里用到的是GD庫，這是php處理圖像的一個(gè)庫。這些擴(kuò)展庫默認(rèn)是關(guān)閉的，要在php.ini里開啟才可以使用。

<?php require_once('string.func.php'); //通過GD庫做驗(yàn)證碼 function verifyImage($type=1 ,$length=4, $pixel=5,$line=3,$sess_name="verify"){session_start(); //創(chuàng)建畫布$width=80;$height=28;$image=imagecreatetruecolor($width,$height);$white=imagecolorallocate($image, 255, 255, 255);$black=imagecolorallocate($image, 0, 0, 0);//用填充矩形填充畫布imagefilledrectangle($image, 1, 1, $width-2, $height-2, $white);$chars=buildRandomString($type,$length);//因?yàn)橐?yàn)證，所以放在session中$_SESSION[$sess_name]=$chars;$fontfiles=array("msyh.ttf","msyhbd.ttf","segoesc.ttf","segoescb.ttf","STLITI.TTF","STXIHEI.TTF","STXINWEI.TTF");for ($i=0; $i < $length ; $i++) {$size=mt_rand(14,18); //隨機(jī)大小$angle=mt_rand(-15,15); //隨機(jī)角度$x=5+$i*$size;$y=mt_rand(20,26);$fontfile="../fonts/".$fontfiles[mt_rand(0,count($fontfiles)-1)];$color = imagecolorallocate($image, mt_rand(50,90),mt_rand(80,200), mt_rand(90,180));$text=substr($chars, $i,1);imagettftext($image, $size, $angle, $x, $y, $color, $fontfile, $text);}//干擾元素if ($pixel) {for ($i=0; $i <$pixel ; $i++) { imagesetpixel($image, mt_rand(0,$width-1), mt_rand(0,$height-1), $black);}}if ($line) {for ($i=0; $i < $line ; $i++) { $color = imagecolorallocate($image, mt_rand(50,90),mt_rand(80,200), mt_rand(90,180));imageline($image, mt_rand(0,$width-1), mt_rand(0,$height-1),mt_rand(0,$width-1), mt_rand(0,$height-1), $color);}}header("content-type:image/gif");imagegif($image);imagedestroy($image); }?>
首先引入之前產(chǎn)生字符串的文件，然后開啟session。

創(chuàng)建一個(gè)畫布，定義長寬，定義黑色白色，然后用矩形填充畫布。

這時(shí)候把寫好的字符串拿過來用，要記得放在session中，用來驗(yàn)證。

字體文件，把要包含的字體放在一個(gè)數(shù)組里。

現(xiàn)在開始畫，第一個(gè)字符，選擇大小，角度，字體，顏色，位置。imagettftext函數(shù)用來把字變成圖。

再加一些干擾元素。pixel是點(diǎn)，line是線，隨機(jī)產(chǎn)生多少也是你說了算。

這樣一個(gè)驗(yàn)證碼圖片就畫好了。

那么怎么用呢，在前端代碼里就是getVerify.php，其實(shí)它里面就是調(diào)用了驗(yàn)證碼的函數(shù)（記得要包含之前的庫文件）。

這樣就可以在指定的位置顯示我們自己畫出來的驗(yàn)證碼了。

3 驗(yàn)證過程

驗(yàn)證過程當(dāng)然是在后臺機(jī)進(jìn)行，說白了就是把用戶提交的信息與后臺數(shù)據(jù)庫中用戶的信息進(jìn)行對比，對上了就證明你是真實(shí)用戶，對不上你就是冒充的唄（當(dāng)然也有可能忘密碼了）。那來看一下驗(yàn)證過程。

<?php require_once ('include.php'); session_start(); $username = $_POST['username']; $password = md5($_POST['password']); $verify = $_POST['verify']; $verify_sess = $_SESSION['verify']; $autoFlag = $_POST['autoFlag'];if ($verify==$verify_sess) {$sql = "select * from user where username = '{$username}' and password = '{$password}' ";$row = checkAdmin($sql);if ($row) {if ($autoFlag) {setcookie("adminId",$row['id'],time()+7*24*3600);setcookie("adminName",$row['username'],time()+7*24*3600);}$_SESSION['adminName'] = $row['username'];header("location:index.php");}else{alertMes("登陸失敗","login.php");} }else{alertMes("驗(yàn)證碼錯(cuò)誤","login.php"); } ?>

首先接收POST過來的參數(shù)。這里的密碼要進(jìn)行加密。然后最先對比的是驗(yàn)證碼，驗(yàn)證碼正確之后再來看用戶名密碼。

這里要去數(shù)據(jù)庫找相對應(yīng)的這條用戶信息，就用到了數(shù)據(jù)庫查詢。這里他把數(shù)據(jù)庫的內(nèi)容也封裝了。

function checkAdmin($sql){return fetchOne($sql); }

而fetchOne函數(shù)是在另一個(gè)文件中封裝的，其實(shí)就是數(shù)據(jù)庫查詢語句

<?php mysql_connect("localhost","root","test123") or die("數(shù)據(jù)庫連接失敗Error:".mysql_errno().":".mysql_error()); mysql_set_charset("utf8"); mysql_select_db("shop") or die("指定數(shù)據(jù)庫打開失敗");<pre name="code" class="php">function fetchOne($sql){$result = mysql_query($sql);$row = mysql_fetch_array($result);return $row; }

查到了對比正確就可以登陸成功。

4 設(shè)置自動(dòng)登錄

自動(dòng)登錄的核心就是cookie。在驗(yàn)證用戶信息的時(shí)候設(shè)置cookie。時(shí)間設(shè)置為一周。

看到了一個(gè)alertMes函數(shù)，就是在輸入錯(cuò)誤或者驗(yàn)證失敗的時(shí)候彈出提示，并跳轉(zhuǎn)到另一個(gè)頁面。

<?php function alertMes($mes,$url){echo "<script>alert('{$mes}');</script>";echo "<script>window.location='{$url}';</script>"; }

5 退出

退出就是在點(diǎn)擊“退出”之后執(zhí)行一個(gè)退出的操作。他這里是這樣操作的：

退出按鈕是這樣的，他跳轉(zhuǎn)到一個(gè)操作的頁面，帶一個(gè)logout參數(shù)。操作頁面：

<?php require_once('include.php'); $act=$_REQUEST['act']; if ($act=="logout") {logout(); }

而logout函數(shù)是在另一個(gè)文件中，

主要干了兩件事，就是清空session和cookie。

6 小細(xì)節(jié)

注意到有的網(wǎng)站，他登陸之后就有“美少女，歡迎你來京東”。可是他怎么知道你叫美少女呢。這里我們在登陸的時(shí)候就把session中的username傳給前端頁面，顯示出來。

在主頁，可以這樣寫：

<div class="rightArea"><?phpif (isset($_SESSION['adminName'])) {echo $_SESSION['adminName']." ";}elseif (isset($_COOKIE['adminName'])) {echo $_COOKIE['adminName'];}?>歡迎來來到慕課網(wǎng)!<a href="login.php">[登陸]</a><a href="register.php">[免費(fèi)注冊]</a><a href="doAction.php?act=logout">[退出]</a></div>

就是說如果在session中取到值，就用這個(gè)，如果cookie中設(shè)置了值，就用cookie中的值。

他的效果是這樣的：

到這里登陸過程應(yīng)該介紹的比較完整了。

不足就是因?yàn)楹瘮?shù)封裝的便利造成了函數(shù)分散在各個(gè)文件，引用來引用去在這里介紹的時(shí)候就很零散，沒有一個(gè)整體的概念。

總結(jié)

以上是生活随笔為你收集整理的web登陆过程总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Web
过程

上一篇： try(){}catch(){}
下一篇： PAP认证