简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >登录功能实战

登录功能实战

王佳祥
王佳祥原创
2020年07月18日 15:49:40612浏览

登录功能实战

一、前端表单页面login.php

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>登录</title>
  8.     <style>
  9.         body{
  10.             padding:0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.             display: flex;
  14.             justify-content: center;
  15.             background-image: url('apic3595.jpg');
  16.             background-size: 100%;
  17.             font-size: 30px;
  18.         }
  19.         .table{
  20.            width: 600px;
  21.            height: 400px;
  22.            background: #fff;
  23.            align-self: center;
  24.            border-radius: 10px;
  25.            box-shadow: 0 0 10px #888;
  26.            position: absolute;
  27.            top:30%;
  28.            padding: 20px;
  29.            text-align: center;
  30.         }
  31.         #username,#password{
  32.             width: 100%;
  33.             height: 40px;
  34.             font-size: 20px;
  35.         }
  36.         #remember{
  37.             width: 20px;
  38.             height: 20px;
  39.             border: 1px solid red;
  40.         }
  41.         .td-1{
  42.             text-align: start;
  43.         }
  44.         #submit{
  45.             width: 80%;
  46.             height: 40px;
  47.             font-size: 25px;
  48.             border: 0;
  49.         }
  50.         #submit:hover{
  51.             background: #66CC99;
  52.             cursor:pointer;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <table class="table">
  58.         <form action="enter.php" method="POST" onsubmit="return checkForm()">
  59.             <tr>
  60.                 <td>账号：</td>
  61.                 <td><input type="text" name="username" id="username" placeholder="请输入您的账号" onblur="checkUser()"></td>
  62.             </tr>
  63.             <tr>
  64.                 <td>密码：</td>
  65.                 <td><input type="password" name="password" id="password" placeholder="请输入您的密码" onblur="checkPwd()"></td>
  66.             </tr>
  67.             <tr>
  68.                 <td><input type="checkbox" name="remember" value="1" id="remember"></td>
  69.                 <td class="td-1">记住密码</td>
  70.             </tr>
  71.             <tr>
  72.                 <td colspan="2"><input type="submit" value="登录" id="submit"></td>
  73.             </tr>
  74.         </form>
  75.     </table>
  76. </body>
  77. <script>
  78. function checkUser(){
  79.     $username = document.getElementById("username");
  80.     if($username.value == ''){
  81.         alert('请输入您的账号');
  82.         return false;
  83.     }else{
  84.         return true;
  85.     }
  86. }
  87. function checkPwd(){
  88.     $password = document.getElementById("password");
  89.     if($password.value == ''){
  90.         alert('请输入您的密码');
  91.         return false;
  92.     }else{
  93.         return true;
  94.     }
  95. }
  96. function checkForm(){
  97.     if(checkUser() == true && checkPwd() == true){
  98.         return true;
  99.     } else{
  100.         return false;
  101.     }
  102. }
  103. </script>
  104. </html>
  108. <?php
  109. //如果退出的话就清除cookie
  110. if($_GET['action'] == 'out'){
  111.     setcookie('username','',time()-3600);
  112.     setcookie('auth','',time()-3600);
  113. }else{
  114.     $user = $_COOKIE['username'];
  115.     //echo $user;
  116.     $pwd = $_COOKIE['password'];
  117.     if($user != ''){
  118.     require "check.php";
  119.     //print_r($res);
  120.     //如果数据库中查询到了相应数据，就生成令牌
  121.     if($stmt->rowCount() == 1){
  122.         $username =$res['username'];
  123.         $password = $res['password'];
  124.         $string = "php.cn";
  125.         $auth = md5($username.$password.$string);
  126.     //var_dump($auth);
  127.     //如果在数据库中查询到的数据生成令牌后和cookie中的令牌不一样
  128.     //说明数据库已经被修改过，不能让他登录
  129.     if($auth_real == $auth){
  130.         exit("
  131.         <script>
  132.         if(confirm('你已经登录，是否直接登录?')){
  133.             location.href='index.php';
  134.         }else{
  135.             location.href='login.php';
  136.         }
  137.         </script>
  138.         ");
  139.     }
  140.     }
  141.     }
  142. }
  143. ?>

二、验证提交数据的页面enter.php

  1. <?php
  2. require "config.php";
  3. //设置页面字符集
  4. header("Content-Type:text/html;charset=utf-8");
  5. //获取到表单传过来的账号密码
  6. $username = $_POST['username'];
  7. $password = md5($_POST['password']);
  8. //查看传过来的账号密码
  9. //echo '账号：'.$username.'<br>密码：'.$password.'<br>';
  10. //判断是否有勾选记住密码
  11. $remember = $_POST['remember'];
  12. echo '<br>'.$remember.'<br>';
  13. //连接数据库，把写好的数据库文件直接引入过来
  14. try{
  15.     //连接数据库
  16.     $pdo = new PDO(DB_DSN,DB_USER,DB_PWD,[PDO::ATTR_ERRMODE=>PDO::ERRMODE_WARNING]);
  17. }catch(PDOException $e){
  18. //输出连接错误
  19. echo $e->getMessage();
  20. }catch(Throwable $e){
  21. //输出接口错误
  22. echo $e->getMessage();
  23. }
  24. //要执行的SQL语句
  25. $sql = "SELECT * FROM `user` WHERE `username` = ? AND `password` = ?";
  26. //执行sql语句,因为要返回一个PDOStatemet对象，所以用prepare()
  27. $stmt = $pdo->prepare($sql);
  28. //绑定参数到变量用bindParam()
  29. $stmt->bindParam(1,$username);
  30. $stmt->bindParam(2,$password);
  31. //用ecxute()来执行sql预处理语句
  32. $stmt->execute();
  33. $res = $stmt->fetch(PDO::FETCH_ASSOC);
  34. //查看返回结果
  35. //print_r($res);
  36. //如果返回行数=1的话，代表账号密码输入正确
  37. if($stmt->rowCount() == 1){
  38.    //把正确的账号密码存储到cookie中
  39.    //先清除上次的cookie
  40.    setcookie("username","",time()-3600);
  41.    setcookie("auth","",time()-3600);
  42.    //如果勾选了记住密码，把账号密码保存7天
  43.    if(!empty($remember)){
  44.      //用cookie存储账号密码7天
  45.      setcookie("username",$username,strtotime("+1 week"));
  46.      /*为了密码的安全性，要给密码加密后再放到cookie中存储
  47.      盐：在密码学中，是指通过在密码任意固定位置插入特定的字符串，
  48.      让散列后的结果和使用原始密码的散列结果不相符，这种过程称之为“加盐”*/
  49.      //加盐
  50.      $string = 'php.cn';
  51.      //生成令牌
  52.      $auth = md5($username.$password.$string).",".$res['id'];
  53.      setcookie("auth",$auth,strtotime("+1 week"));
  54.    }else{
  55.        //没有勾选记住密码
  56.        setcookie("username",$username);
  57.        //加盐
  58.        $string = 'php.cn';
  59.        //生成令牌
  60.        $auth = md5($username.$password.$string).",".$res['id'];
  61.        setcookie("auth",$auth);
  62.    }
  63.    //存储完cookie后跳转到Index.php
  64.    exit("
  65.     <script>
  66.     location.href='index.php';
  67.     </script>
  68.     ");
  69. }else{
  70.     //账号密码输入错误的话，用js弹框并提示用户账号密码输入错误，然后返回登录页面
  71.     exit("
  72.     <script>
  73.     alert('账号或密码输入错误');
  74.     location.href='login.php';
  75.     </script>
  76.     ");
  77. }

三、后端首页面index.php

  1. <?php
  2. require "check.php";
  3. if($stmt->rowCount() == 1){
  4. $username =$res['username'];
  5. $password = $res['password'];
  6. $string = "php.cn";
  7. $auth = md5($username.$password.$string);
  8. //var_dump($auth);
  9. //如果在数据库中查询到的数据生成令牌后和cookie中的令牌不一样
  10. //说明数据库已经被修改过，不能让他登录
  11.     if($auth_real != $auth){
  12.         exit("
  13.         <script>
  14.         alert('请您先登录');
  15.         location.href='login.php';
  16.         </script>
  17.         ");
  18.     }
  19. }else{
  20.     exit("
  21.     <script>
  22.     alert('请您先登录');
  23.     location.href='login.php';
  24.     </script>
  25.     ");  
  26. }
  27. ?>
  28. <!DOCTYPE html>
  29. <html lang="en">
  30. <head>
  31.     <meta charset="UTF-8">
  32.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.     <title>后台首页</title>
  34.     <style>
  35.         body{
  36.             padding: 0px;
  37.             margin:0px;
  38.             box-sizing: border-box;
  39.         }
  40.         body > ul{
  41.             list-style: none;
  42.             display: flex;
  43.             width: 100%;
  44.             height: 50px;
  45.             background:#66CCFF;
  46.         }
  47.        ul > li{
  48.            width: 200px;
  49.            height: 50px;
  50.            text-align: center;
  51.            line-height: 50px;
  52.            font-size: 30px;
  54.        }
  55.        ul>li:hover{
  56.         background:#0066FF;
  57.        }
  58.        ul > li:last-of-type{
  59.           margin-left: auto;
  60.           margin-right:50px;
  62.        }
  63.        a{
  64.            text-decoration: none;
  65.            color:#000;
  66.        }
  67.        #personal{
  68.            width: 150px;
  69.            font-size: 25px;
  71.        }
  72.        li:nth-of-type(4){
  73.            width: 400px;
  74.        }
  75.        ul > li:last-of-type >ul{
  76.         padding:0;
  77.         margin: 0;
  78.         list-style: none;
  79.         border: 1px solid #000;
  80.         display: flex;
  81.         flex-direction: column;
  82.         position:absolute;
  83.         display: none; 
  84.        }
  85.        ul > li:last-of-type >ul>li{
  86.            width: 200px;
  87.            height: 50px;
  88.        }
  89.        ul > li:hover .ul-1{
  90.            display: block;
  91.        }
  92.     </style>
  93. </head>
  94. <body>
  95.     <ul>
  96.         <li><a href="">首页</a></li>
  97.         <li><a href="">购物</a></li>
  98.         <li><a href="">学习</a></li>
  99.         <li>欢迎<?php echo $_COOKIE['username'] ?>用户回来</li>
  100.         <li>
  101.             <a href="">个人中心</a>
  102.             <ul class="ul-1">
  103.                 <li><a href="">换肤</a></li>
  104.                 <li><a href="">设置</a></li>
  105.                 <li><a href="login.php?action=out">退出</a></li>
  106.             </ul>
  107.         </li>
  108.     </ul>
  109. </body>
  110. </html>

四、cookie与数据库对比公共页面check.php`

  • 因为这段代码重复了，所以我直接拿出来放到一个页面，直接引入
  1. <?php
  2. //引入数据库常量
  3. require "config.php";
  4. try{
  5.     //连接数据库
  6.     $pdo = new PDO(DB_DSN,DB_USER,DB_PWD,[PDO::ATTR_ERRMODE=>PDO::ERRMODE_WARNING]);
  7. }catch(PDOException $e){
  8. //输出连接错误
  9. echo $e->getMessage();
  10. }catch(Throwable $e){
  11. //输出接口错误
  12. echo $e->getMessage();
  13. }
  14. //
  15. //从cookie中获取auth
  16. $auth = $_COOKIE["auth"];
  17. //把字符串打散为数组
  18. $res = explode(",",$auth);
  19. //var_dump($res);
  20. //拿到数组中的最后一个元素
  21. $id = end($res);
  22. //var_dump($id);
  23. //获取id前面的内容赋值给一个变量
  24. $auth_real = $res[0];
  25. //var_dump($auth_real);
  27. //从数据库中获取
  28. $sql = "SELECT `username`,`password`,`id` FROM `user` WHERE `id` =?";
  29. $stmt = $pdo->prepare($sql);
  30. $stmt->bindParam(1,$id);
  31. $stmt->execute();
  32. $res = $stmt->fetch(PDO::FETCH_ASSOC);

五、视频演示

1.不保存密码

2.不保存密码，关掉浏览器，重新打开

3.保存密码，关掉浏览器，再次访问

4.直接访问index.php页面

5.直接访问enter.php页面

6.在勾选密码的情况下修改数据库后直接访问

六、学习总结

1.提交表单数据给enter.php，并验证现在是否是退出操作，是的话清除cookie;不是的话就验证cookie是否存在并且和数据库中的内容一致，一致的话就提示用户账户已登陆是否直接登录；否则就重新登录

2.enter.php验证数据是否和数据库中的数据一致，一样的话，存储到cookie,这里如果勾选了保存密码，就要设置保存时间，没勾选就不设置时间，然后跳到后端首页index.php;如果数据不一致的话，就提示用户账号或密码输入错误，并跳转到登录页面login.php重新登录。

3.当跳转到index.php后，会验证数据库的数据和cookie存储的数据是否一致，不一致说明数据库内容被修改，不能让他登录；一致的话说明没有问题。

上一条：会话控制7天自动登录，防cookie欺骗下一条：PHP 数组函数、栈与队列
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
灭绝师太2020-07-18 15:56:491楼
作业的做的很炫酷，看得出有自己的思路在里面。我来提几个点，让我们的代码更简练完美点：1.在登录页面，检测用户输入为空，return false,可以直接在input标签中，加required属性。2. php代码与html代码共存，建议php代码放在上面，代码由上往下读。3.密码不用存cookie,同样可以验证数据库密码是否被篡改（参考0717课件）。

相关文章

查看更多