准备工作
在数据库创建存储用户的表
填入数据要保存
从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 '登录失败'; }