web登陆过程总结

1 篇文章 0 订阅

学前端这么久,登陆过程也简单的练过(完全凭借自己的想象,然后成功了)

上周抽时间在网络上学习了一下别人是如何做的。我觉得人家做的最好的一点就是函数的封装。这样就省去了很多重复的代码,以后用到类似的功能就可以直接调用就好了。

下面说一下登录过程的前前后后。


1 前端页面

首先,登陆界面长什么样子。就是给用户一个输用户名密码的地方。我给他写成了这样:


这里有登陆必须的三个元素:用户名口令验证码。先说一下这是怎么写的吧。

就是三个input,要注意的是他们的name值,这个是要传到后台进行验证的。将它们放在表单中,通过post方式提交到后台。

<div class="login_cotent">
	  <form action="doLogin.php" method="post">
	  <ul class="login">
		<li class="notice">邮箱/用户名/手机号</li>
		<li class="mb_10"><input type="text"class="login_input" name="username" placeholder="请输入用户名"></li>
		<li class="notice">密码</li>
		<li class="mb_10"><input type="password" class="login_input" name="password" placeholder="请输入密码"></li>
		<li class="notice">验证码</li>
		<li class="mb_10"><input type="text" class="login_input" name="verify" placeholder="请输入验证码"></li>
		<img src="admin/getVerify.php">
		<li class="auto_login"><input type="checkbox" id="a1" class="checked" name="autoFlag" ><label for="a1">自动登录</label></li>
		<li><input type="submit" value=""  class="login_btn" ></li>
	</ul>
	  </form>
</div>

注意到验证码。这里调用了另外一个页面“getVerify.php”,下面来介绍一下验证码是怎么生成的。


2 验证码

验证码的原理就是,后台产生一个字符串,然后把他画成图,呈现给用户看。用户识别后,填入自己认为正确的结果,提交给后台,与后台产生的验证码字符串进行对比,如果匹配,就验证成功。这里做验证码的设计主要是为了区分人机(本科毕业论文就是写的这个方面),是一个值得研究的领域。

那么一步一步来,首先后台产生字符串。

(再插一句,我说觉得教程好的地方是函数封装,这里就是把与字符串相关的操作封装在一个“string.func.php”的页面中。相应的,还有数据库操作相关的“mysql.func.php”,图像相关的“image.func.php”,分页相关的“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);
}
?>

解释一下,这里是产生一个随机字符串,函数名命名为buildRandomString,这里产生了三种类型的字符串,一种是只有数字,一种是只有字母(大小写),还有一种是大小写和数字都有的。将类型作为参数,在调用函数的时候可选。字符串的长度也是可选的。记得要把产生的字符串打乱。

接下来就用产生的这个字符串画验证码图片。这里用到的是GD库,这是php处理图像的一个库。这些扩展库默认是关闭的,要在php.ini里开启才可以使用。

<?php
require_once('string.func.php');
//通过GD库做验证码
function verifyImage($type=1 ,$length=4, $pixel=5,$line=3,$sess_name="verify"){
	session_start();
//创建画布
	$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);
	//因为要验证,所以放在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);   //随机大小
		$angle=mt_rand(-15,15);    //随机角度
		$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);
}

?>

首先引入之前产生字符串的文件,然后开启session。

创建一个画布,定义长宽,定义黑色白色,然后用矩形填充画布。

这时候把写好的字符串拿过来用,要记得放在session中,用来验证。

字体文件,把要包含的字体放在一个数组里。

现在开始画,第一个字符,选择大小,角度,字体,颜色,位置。imagettftext函数用来把字变成图。

再加一些干扰元素。pixel是点,line是线,随机产生多少也是你说了算。

这样一个验证码图片就画好了。

那么怎么用呢,在前端代码里就是getVerify.php,其实它里面就是调用了验证码的函数(记得要包含之前的库文件)。

这样就可以在指定的位置显示我们自己画出来的验证码了。


3 验证过程

验证过程当然是在后台机进行,说白了就是把用户提交的信息与后台数据库中用户的信息进行对比,对上了就证明你是真实用户,对不上你就是冒充的呗(当然也有可能忘密码了)。那来看一下验证过程。

<?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("验证码错误","login.php");
}
?>

首先接收POST过来的参数。这里的密码要进行加密。然后最先对比的是验证码,验证码正确之后再来看用户名密码。

这里要去数据库找相对应的这条用户信息,就用到了数据库查询。这里他把数据库的内容也封装了。

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

而fetchOne函数是在另一个文件中封装的,其实就是数据库查询语句

<?php
mysql_connect("localhost","root","test123") or die("数据库连接失败Error:".mysql_errno().":".mysql_error());
mysql_set_charset("utf8");
mysql_select_db("shop") or die("指定数据库打开失败");<pre name="code" class="php">function fetchOne($sql){
	$result = mysql_query($sql);
	$row = mysql_fetch_array($result);
	return $row;
}

 

查到了对比正确就可以登陆成功。


4 设置自动登录

自动登录的核心就是cookie。在验证用户信息的时候设置cookie。时间设置为一周。

看到了一个alertMes函数,就是在输入错误或者验证失败的时候弹出提示,并跳转到另一个页面。

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

5 退出

退出就是在点击“退出”之后执行一个退出的操作。他这里是这样操作的:

<a href="doAction.php?act=logout">[退出]</a>

退出按钮是这样的 ,他跳转到一个操作的页面,带一个logout参数。操作页面:

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

而logout函数是在另一个文件中,

function logout(){
	//清空session
	$_SESSION = array();
	//清空cookie
	if(isset($_COOKIE[session_name()])){
		setcookie(session_name(),"",time()-1);
	}
	if (isset($_COOKIE['adminId'])) {
		setcookie("adminId","",time()-1);
	}
	if (isset($_COOKIE['adminName'])) {
		setcookie("adminName","",time()-1);
	}
	session_destroy();
	header("location:login.php");
}

主要干了两件事,就是清空session和cookie。


6 小细节

注意到有的网站,他登陆之后就有“美少女,欢迎你来京东”。可是他怎么知道你叫美少女呢。这里我们在登陆的时候就把session中的username传给前端页面,显示出来。

在主页,可以这样写:

<div class="rightArea">
				<?php
				if (isset($_SESSION['adminName'])) {
					echo $_SESSION['adminName']." ";
				}elseif (isset($_COOKIE['adminName'])) {
					echo $_COOKIE['adminName'];
				}
				 ?>
				 欢迎来来到慕课网!<a href="login.php">[登陆]</a><a href="register.php">[免费注册]</a><a href="doAction.php?act=logout">[退出]</a>
			</div>


就是说如果在session中取到值,就用这个,如果cookie中设置了值,就用cookie中的值。

他的效果是这样的:


到这里登陆过程应该介绍的比较完整了。

不足就是因为函数封装的便利造成了函数分散在各个文件,引用来引用去在这里介绍的时候就很零散,没有一个整体的概念。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值