web登陆过程总结

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

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

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

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中的值。

他的效果是这样的：

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

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