全栈:Web 用户登录过程实例与Cookie管理

用户创建与使用cookie全过程

1.用户访问网站

当用户使用浏览器访问一个网站时,浏览器会向服务器发送一个HTTP请求。

2. 服务器响应请求

服务器接收到HTTP请求后,会处理请求并准备响应。如果服务器需要设置Cookie,它会在HTTP响应头中包含一个Set-Cookie指令。

3. 创建Cookie

服务器使用setcookie()函数(在PHP中)或等效的方法来创建Cookie。这个函数允许服务器设置Cookie的名称、值、过期时间、路径、域和其他属性。

PHP示例:

setcookie("user_id", "12345", time() + 3600, "/", "example.com", false, true);

  • "user_id" 是Cookie的名称。
  • "12345" 是Cookie的值。
  • time() + 3600 设置Cookie的过期时间为当前时间加1小时。
  • "/" 指定Cookie的Path属性,意味着Cookie对于example.com的所有页面都是可访问的。
  • "example.com" 指定Cookie的Domain属性,意味着Cookie仅在example.com域下有效。
  • false 表示不使用安全的传输层协议(HTTPS)。
  • true 设置Cookie为HttpOnly,这意味着Cookie不能通过JavaScript访问,增加了安全性。

4. 发送Cookie到浏览器

服务器将带有Set-Cookie指令的HTTP响应发送回浏览器。浏览器解析这些指令,并根据它们创建Cookie。

5. 浏览器存储Cookie

浏览器会将接收到的Cookie存储在内存中(会话Cookie)或磁盘上(持久Cookie)。存储的位置和方式由浏览器的隐私和安全设置决定。

6. 后续请求自动携带Cookie

当用户在同一个域和路径下进行后续请求时,浏览器会自动在HTTP请求头中包含之前存储的Cookie,通过Cookie指令发送回服务器。

示例:

Cookie: user_id=12345; other_cookie=value

7. 服务器接收Cookie

服务器接收到带有Cookie的HTTP请求后,可以从请求头中读取Cookie的值,并使用这些信息来识别用户的状态或偏好。

8. 使用Cookie信息

服务器可以使用Cookie中的信息来个性化用户的体验,例如,通过使用用户的ID来恢复他们的购物车内容,或者根据用户的偏好提供定制化的内容。

9. Cookie的生命周期结束

Cookie的生命周期可以是短暂的(会话Cookie),也可以是持久的(设置了过期时间的Cookie)。

  • 会话Cookie 在用户关闭浏览器时自动删除。
  • 持久Cookie 会在指定的过期时间到达后自动删除,或者用户可以手动清除它们。

10. 删除Cookie

可以通过两种方式删除Cookie:

  • 过期:当Cookie的过期时间到达时,浏览器会自动删除它。
  • 手动 :用户可以手动通过浏览器设置删除Cookie,或者服务器可以通过发送一个带有过去过期时间的Set-Cookie指令来指示浏览器删除特定的Cookie。

cookie:用户登录实例

登录流程:

  1. 用户输入信息:用户在登录页面输入用户名和密码。

  2. 提交验证:用户提交表单,这些信息以POST请求的形式发送到服务器。

  3. 服务器验证:服务器接收到请求,验证数据库中的用户名和密码是否与用户输入的匹配。

  4. 设置cookie :一旦验证成功,服务器使用setcookie()函数创建一个cookie来标识用户已登录

  5. 重定向:服务器通常会重定向用户到一个受保护的页面或用户的个人主页。

维持登录状态:

  1. 发送cookie:浏览器会在每次请求服务器时自动携带相关的cookie。

  2. 检查cookie:服务器检查请求中是否包含特定的cookie来确定用户是否已登录:

注销流程:

  1. 注销请求:用户点击注销链接,请求服务器结束会话。

  2. 删除cookie:服务器通过设置cookie的过期时间为过去的时间来删除它:

  3. 重定向到登录页面:注销后,通常将用户重定向回登录页面。

前端:进行用户登录,并提交post表单到指定脚本

html 复制代码
07.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="09.php" method="post" >
        用户名<input type="text" name="username">
        邮箱<input type="text" name="email">
        <input type="submit">
    </form>
</body>
</html>

后端登录验证,验证用户名密码后,创建cookie存储用户名

php 复制代码
09.php
<?php

    if(empty($_POST['uname']) || empty($_POST['passwd'])){

        if($_POST['uname'] == "zhangsan" && $_POST['passwd'] == 123456){
            
            setcookie("username",$_POST['uname'],time()+3600);
            
            echo '<a href="06.php" target="_blank" >access</a>';
            
        }else{
            echo '<script>alert("Invalid username or password")</script>';
        }

    }else{
        echo '<script>alert("The user name and password are empty")</script>';
    }

?>

检查用户提交的用户名和密码,如果用户名是"zhangsan"且密码是123456,则会设置一个名为"username"的cookie,并将用户重定向到名为"06.php"的页面。如果用户名或密码不正确,或者两者都为空,会弹出一个警告框提示用户。

  1. 代码检查前端表单,使用empty函数检查$_POST['uname']属性,和``$_POST['passwd']属性是否为空,并使用逻辑与进行运算。最后使用逻辑非取反

  2. 如果用户名和密码不为空,脚本继续检查用户名是否是"zhangsan"且密码是否是123456。

  3. 如果用户名和密码都正确,脚本使用setcookie函数设置一个名为"username"的cookie,该cookie的值为用户提交的用户名,并且有效期为1小时(3600秒)。

  4. 然后会输出一个a标签,链接到"06.php"页面的超链接,用户可以通过点击这个链接继续访问。

  5. 如果用户名或密码不正确,脚本会输出一个JavaScript的alert函数,弹出提示框,提示用户"Invalid username or password"。

  6. 如果前端传递表单中,用户名和密码其一,或都为空,脚本会输出一个JavaScript的alert函数,弹出提示框,提示用户"The user name and password are empty"。

测试登录状态

检查cookie中是否有用户登录参数,并且根据检查结果提供不同的响应。

php 复制代码
06.php
<?php    
    header("content-type:text/html;charset=utf8");

    if(!(empty($_COOKIE['username']))){
        echo '欢迎用户:' . $_COOKIE['username'];
    }else{
        echo "<script >";
        echo "alert('未登录,即将重定向');";
        echo "window.location.href='08.html';";
        echo "</script>";
        
    }
    // echo '<a href="10.php">点击清除登录信息</a>';
    echo'<form action="10.php" method="get">';
    echo'<button type="submit">点击清除登录信息</button>';
    echo'</form>';
    
?>

1.使用empty()函数检查$_COOKIE['username']是否为空。

$_COOKIE是一个超全局变量,它包含了所有由客户端发送到服务器的cookie信息。

如果username cookie不为空,说明用户已经登录。

2.如果用户已经登录,输出欢迎信息,并将用户名(存储在username cookie中的值)展示给用户。

如果username cookie为空,表示用户尚未登录。

3.在用户未登录的情况下,代码将执行以下操作:

  • 使用<script>标签内联定义一个JavaScript脚本。
  • 使用alert()函数弹出一个警告框,提示用户未登录。
  • 使用window.location.href='08.html';将用户重定向到08.html页面。

4.无论用户是否登录,接下来的代码提供了一个表单,其中包含一个按钮。

当用户点击这个按钮时,表单会以GET方法提交并跳转到10.php,用于清除登录信息,例如删除相关的cookie。

用户退出登录状态,清除cookie值

php 复制代码
10.php
<?php

    setcookie("username",$_COOKIE['username'],time()-3600);
    header("Location:08.html");
?>

清除cookie,并重定向到前端登录页面:

  1. setcookie("username", $_COOKIE['username'], time() - 3600);

    • setcookie()函数用于设置cookie。
    • 第一个参数"username"是要设置的cookie的名称。
    • 第二个参数$_COOKIE['username']是从客户端发送到服务器的现有cookie的值。这意味着即使用户之前没有设置username cookie,这段代码也不会产生错误,因为$_COOKIE['username']在没有对应cookie时为null。
    • 第三个参数time() - 3600设置了cookie的过期时间。time()函数返回当前的Unix时间戳,减去3600(一个小时的秒数)意味着cookie会在设置后的一个小时前过期,这实际上会立即删除这个cookie。
  2. header("Location: 08.html");

    • header()函数用于发送原始的HTTP头部到客户端。在这里,它发送的是一个Location头部,这会告诉浏览器服务器希望客户端重定向到另一个URL。
    • "08.html"是服务器上的目标页面的路径,用户将被重定向到这个页面。

setcookie扩展

在PHP中,创建一个同名的cookie并立即设置其过期时间,实际上是一个删除该cookie的技巧。这是因为HTTP协议没有直接提供删除cookie的方法,但你可以通过设置一个过期时间来间接删除它。

创建并删除同名cookie的步骤和原因:

  1. 创建同名cookie :使用setcookie()函数创建一个同名的cookie,意味着你正在创建一个新的cookie来覆盖之前存在的同名cookie。

  2. 设置过期时间:将新cookie的过期时间设置为当前时间减去一个较大的数值(例如3600秒,即1小时)。这样,新cookie的过期时间实际上是在过去,这告诉浏览器该cookie已经不再有效。

  3. 浏览器响应:浏览器接收到这个带有过去过期时间的cookie后,会认为它已经过期,并从用户的系统中删除它。

相关推荐
一点媛艺1 小时前
Kotlin函数由易到难
开发语言·python·kotlin
姑苏风1 小时前
《Kotlin实战》-附录
android·开发语言·kotlin
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
奋斗的小花生2 小时前
c++ 多态性
开发语言·c++
魔道不误砍柴功2 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
闲晨2 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
老猿讲编程2 小时前
一个例子来说明Ada语言的实时性支持
开发语言·ada
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Chrikk3 小时前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*3 小时前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go