请教了一下同事,学习一下后端关于登录的设计然后练习一下。重新写了一个比较简单的版本来模拟这种登录,返回token的过程。由于接口发送安全性,带上token验证是一种用户的凭证。相当于进去电影院手上拿到一张票。
先把一个简化思路版本记录下来先,再优化一下token验证的设计。
1.建一个登录页面。
登录页面比较简单,采用html方式拼写,把两个输入框填写进去。期间没有把验证码加上去。js用了jquery框架,使用ajax post 方式把帐号和密码发送到指定的接口处理。由于在登录之前,需要建立一个token的存储,所以在前端使用本地缓存缓存这个token,下次发送接口的时候,知道是来自该客户端传输过去的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录练习</title>
</head>
<body>
<div>
姓名:<input id="userName" placeholder="输入姓名" />
密码:<input id="userPwd" placeholder="输入密码" />
<button onclick="login()" >登录</button>
<button onclick="showToken()" >查看Token</button>
</div>
<script type="text/javascript">
function login(){
var param ={userName:$('#userName').val(),
userPwd:$('#userPwd').val()};
$.post("login.php",param,function(data){
if(data.code == 200)
{
localStorage.setItem("token",data.token);//保存token
window.location = "my.php";//跳转到
}
alert(data.msg);
},"json");
}
function showToken()
{
var token = localStorage.getItem("token");
alert(token);
}
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
保存本地token,下次请求其他接口的时候,附带上这个token值。
2.登录login.php
建立一个登录接口,在接口接受变量后,密码采用md5的校验,非明文的方式去处理。然后查询用户表,匹配是否满足检索用户是否存在。如果存在建立起session状态,缓存用户id,并返回一个随机token缓存下来。
<?php
//1.验证接口,接收数据,过滤数据合法性
//2.构建数据库链接
//3.md5 验证数据库用户密码
//4.生成session,返回token,带时长,或者使用数据库插入token,每次用数据库检索
//5.前端localStore 保存token,接口请求发送需要带上验证token匹配
header('Content-Type: application/json');
header('Content-Type: text/html;charset=utf-8');
$userName = $_POST['userName'];
$userPwd = md5($_POST['userPwd']);
$conn = mysql_connect("localhost","root","") or die('Could not connect: ' . mysql_error());
mysql_select_db("test",$conn);
mysql_query("set name utf-8");
//查询结果验证
$sql = "select * from user where name ='$userName' and pwd = '$userPwd'";
$result = mysql_query($sql);
if($data=mysql_fetch_array($result))
{
session_start();//启动session
$_SESSION['name'] = $data['name'];
$_SESSION['uid'] = $data['id'];
//生成token 返回给前端
$token = createToken();
$_SESSION['token'] = $token;
//返回一个结果
output(200,$token,'success');
}
else
{
output(400,'','密码或帐号出错');
}
mysql_close($conn);
//生成不重复的token,利用网上一个算法
function createToken()
{
$token = md5(uniqid(md5(microtime(true)),true));
$token = sha1($token);
return $token;
}
function output($code,$token,$msg='')
{
$outputData = array();
$outputData['code'] = $code;
$outputData['token'] = $token;
$outputData['msg'] = $msg;
echo json_encode($outputData);
}
?>
用户表 user
目前token方案在讨论后有两种:
1.采用session,对每一个用户记录
2.采用一个token 表。这张表有id ,token ,expire_time (过期时间), 维护好这张表,检索接口用户凭证。每次会通过session 或者表去检索,登录后会重新刷新时效性。
返回状态码说明:200 成功,400失败
3.logout.php 退出页面
当退出的时候,释放session变量,并返回到登录页面。设计简单一点。
<?php
session_start();
unset($_SESSION['name']); //释放session
unset($_SESSION['uid']); //释放session
echo "<script>window.location ='login.html'</script>";
?>
4.my.php 我的中心
<?php
//1用户中心
session_start();//启动session
echo "用户名的名字:".$_SESSION['name']."</br>";
echo "接口token:".$_SESSION['token']."</br>";
echo "<a href='logout.php'>退出</a>";
?>
我的中心主要输出用户的变量,还有查看一下token的值是多少。
5.小结
这次练习,主要是查看token和session是如何生成和使用。在登录成功后返回的token,前端保存起来使用,提供每次发送的接口凭证。还有密码过去采取明文,现在采用md5的匹配确保密码不用那么容易猜测到。