准备工作
在数据库创建存储用户的表
填入数据要保存

从ai写的页面要自己添加提交方式
<form method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
主要了解session cookie token之间的区别
先总结一下
-
session
:服务器存储状态,依赖cookie
传递session_id
。 -
cookie
:客户端存储机制,可被服务器设置。 -
token
:无状态验证机制,客户端存储,服务器仅验证(如 JWT
cookie代码如下
admin-c文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
text-align: center;
}
.login-title {
font-size: 24px;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #409eff;
outline: none;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #66b1ff;
}
.footer {
margin-top: 20px;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="login-container">
<h1 class="login-title">后台登录</h1>
<form method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
<div class="footer">
©2023 系统后台管理
</div>
</div>
</body>
</html>
<?php
//包含文件 建立数据库连接
include "../config.php";
//接受账号密码
$user = $_POST["username"];
$pass = $_POST["password"];
$sql = "select * from admin where username = '$user' and password = '$pass';";
$data = mysqli_query($con, $sql);//执行sql语句
if ($_SERVER["REQUEST_METHOD"] == "POST") {//判断有没有post传参行为 避免出现刚打开就弹失败的情况
if (mysqli_num_rows($data) > 0) {//判断sql语句执行情况
$expire = time() + 3600 * 24 * 30;//一个月过期
setcookie("username", $user, $expire, "/");//写cookie 有了后不需要密码就可以登录
setcookie("password", $pass, $expire, "/");
header("location:index-c.php");
} else {
echo '<script>alert("登录失败")</script>';
}
}
// 查询成功,检查结果
数据用户名 密码成功后跳转一下代码
index-c.php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后台首页</title>
</head>
<body>
<h1>后台首页</h1>
<p>欢迎您, <?php echo $_COOKIE['username']; ?>!</p>
<p><a href="./logout-c.php">退出登录</a></p>
</body>
</html>
<?php
//判断传递的数值
if($_COOKIE['username'] == 'admin' and $_COOKIE['password'] == '123456'){
//不正确跳转到登录页面
}else{
header("Location: ./admin-c.php");
}
?>
登录成功
接下来点击后 进入超链接 执行logout-c.php代码 删除cookie 同时跳转页面到初始页面
logout-c.php代码如下
<?php
setcookie("username", "", time() - 360, "/");//写cookie 有了后不需要密码就可以登录
setcookie("password", "", time() - 3600, "/");
//跳转登录页面
header("Location: ./admin-c.php");
session代码和cookie代码大同小异 差一点为保存的位置
session在服务器保存 因为我们是在本地运行 所有文件保存在本地
admin-s.php代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
text-align: center;
}
.login-title {
font-size: 24px;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #409eff;
outline: none;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #66b1ff;
}
.footer {
margin-top: 20px;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="login-container">
<h1 class="login-title">后台登录</h1>
<form method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
<div class="footer">
©2023 系统后台管理
</div>
</div>
</body>
</html>
<?php
//包含文件 建立数据库连接
include "../config.php";
//接受账号密码
$user = $_POST["username"];
$pass = $_POST["password"];
$sql = "select * from admin where username = '$user' and password = '$pass';";
$data = mysqli_query($con, $sql);//执行sql语句
if ($_SERVER["REQUEST_METHOD"] == "POST") {//判断有没有post传参行为 避免出现刚打开就弹失败的情况
if (mysqli_num_rows($data) > 0) {//判断sql语句执行情况
session_start();//开启session
$_SESSION['username'] = $user;//都是拿去session的变量
$_SESSION['password'] = $pass;
header("Location: ./index-s.php");//跳转页面进行判断
} else {
echo '<script>alert("登录失败")</script>';
}
}
// 查询成功,检查结果
输入数据正确 转移到index-s.php页面
index-s.php代码如下
<?php
session_start();//开启session
//判断书否存在于数据库
if($_SESSION['username'] == 'admin' and $_SESSION['password'] == '123456'){
}else{//不存在 跳转页面
header("Location: ./admin-s.php");
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后台首页</title>
</head>
<body>
<h1>后台首页</h1>
<p>欢迎您, <?php echo $_SESSION['username']; ?>!</p>
<p><a href="./logout-s.php">退出登录</a></p>
</body>
</html>
到这一步 会产生session文件
点击退出后会跳转页面并且删除session
logout-s.php代码如下
<?php
session_start();//开启session
session_unset();//关闭session
session_destroy();//释放变量
header("Location: ./admin-s.php");//跳转页面
token也是一种认证方式 只不过其安全性高一点 不能重复提交
token每一次的数值会变化 所以 一定程度上避免的使用bp爆破
token.php代码如下
<?php
session_start();//启动session 存储token值
$token = bin2hex(random_bytes(16));//生成token
$_SESSION['token'] = $token;//将token保存在session
setcookie('token', $token, time() + 3600);//将token保存在cookie
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
text-align: center;
}
.login-title {
font-size: 24px;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #409eff;
outline: none;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #66b1ff;
}
.footer {
margin-top: 20px;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="login-container">
<h1 class="login-title">后台登录</h1>
<form method="post" action="token_check.php">
<input type="hidden" name="token" value="<?php echo $token; ?>">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
<div class="footer">
©2023 系统后台管理
</div>
</div>
</body>
</html>
登录后会产生token同时本地会出现文件
没有出现明码
以下是验证token的代码 token_check.php
<?php
//session_start();
$token = $_COOKIE['token'];//从cookie拿到session
//同时对用户名 密码 token值进行判断
if ($_POST['username'] == 'admin' && $_POST['password'] == '123456' && $_POST['token'] == $token) {
echo '登录成功';
}else{
echo '登录失败';
}
