PHP登录与防止数据注入实例演示

首先准备一张简单的用户数据表

编写database.php

  1. <?php
  2. return [
  3.     'type' => $type ?? 'mysql',
  4.     'username' => $username ?? 'root',
  5.     'password' => $password ?? 'root',
  6.     'host' => $host ?? 'localhost',
  7.     'port' => $port ?? '3308',
  8.     'charset' => $charset ?? 'utf8',
  9.     'dbname' => 'mydatabase'
  10. ];

编写connect.php

  1. <?php
  2. // 1. 把数据库连接配置文件引过来
  3. $config = require_once 'database.php';
  4. extract($config);
  5. // 2. 数据库的连接
  6. $dsn = sprintf('%s:host=%s;port=%s;charset=%s;dbname=%s', $type, $host, $port, $charset, $dbname);
  7. try {
  8.     $pdo = new PDO($dsn, $username, $password);
  9.     //var_dump($pdo);
  10. } catch (PDOException $e) {
  11.     die('Connection error : ' . $e->getMessage());
  12. }

编写login.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>系统登录</title>
  6. </head>
  7. <style type="text/css">
  8.     html {
  9.         overflow-y: scroll;
  10.         vertical-align: baseline;
  11.     }
  12.     body {
  13.         font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
  14.         font-size: 12px;
  15.         color: #fff;
  16.         height: 100%;
  17.         line-height: 1;
  18.         background: #999
  19.     }
  20.     * {
  21.         margin: 0;
  22.         padding: 0
  23.     }
  24.     ul,
  25.     li {
  26.         list-style: none
  27.     }
  28.     h1 {
  29.         font-size: 30px;
  30.         font-weight: 700;
  31.         text-shadow: 0 1px 4px rgba(0, 0, 0, .2)
  32.     }
  33.     .login-box {
  34.         width: 410px;
  35.         margin: 120px auto 0 auto;
  36.         text-align: center;
  37.         padding: 30px;
  38.         background: url('http://demo.mxyhn.xyz:8020/cssthemes6/11.20ZF8/images/mask.png');
  39.         border-radius: 10px;
  40.     }
  41.     .login-box .name,
  42.     .login-box .password,
  43.     .login-box .code,
  44.     .login-box .remember {
  45.         font-size: 16px;
  46.         text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
  47.     }
  48.     .login-box .remember input {
  49.         box-shadow: none;
  50.         width: 15px;
  51.         height: 15px;
  52.         margin-top: 25px
  53.     }
  54.     .login-box .remember {
  55.         padding-left: 40px
  56.     }
  57.     .login-box .remember label {
  58.         display: inline-block;
  59.         height: 42px;
  60.         width: 70px;
  61.         line-height: 34px;
  62.         text-align: left
  63.     }
  64.     .login-box label {
  65.         display: inline-block;
  66.         width: 100px;
  67.         text-align: right;
  68.         vertical-align: middle
  69.     }
  70.     .login-box #code {
  71.         width: 120px
  72.     }
  73.     .login-box .codeImg {
  74.         float: right;
  75.         margin-top: 26px;
  76.     }
  77.     .login-box img {
  78.         width: 148px;
  79.         height: 42px;
  80.         border: none
  81.     }
  82.     input[type=text],
  83.     input[type=password] {
  84.         width: 270px;
  85.         height: 42px;
  86.         margin-top: 25px;
  87.         padding: 0px 15px;
  88.         border: 1px solid rgba(255, 255, 255, .15);
  89.         border-radius: 6px;
  90.         color: #fff;
  91.         letter-spacing: 2px;
  92.         font-size: 16px;
  93.         background: transparent;
  94.     }
  95.     button {
  96.         cursor: pointer;
  97.         width: 100%;
  98.         height: 44px;
  99.         padding: 0;
  100.         background: #ef4300;
  101.         border: 1px solid #ff730e;
  102.         border-radius: 6px;
  103.         font-weight: 700;
  104.         color: #fff;
  105.         font-size: 24px;
  106.         letter-spacing: 15px;
  107.         text-shadow: 0 1px 2px rgba(0, 0, 0, .1)
  108.     }
  109.     input:focus {
  110.         outline: none;
  111.         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2)
  112.     }
  113.     button:hover {
  114.         box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2)
  115.     }
  116.     .screenbg {
  117.         position: fixed;
  118.         bottom: 0;
  119.         left: 0;
  120.         z-index: -999;
  121.         overflow: hidden;
  122.         width: 100%;
  123.         height: 100%;
  124.         min-height: 100%;
  125.     }
  126.     .screenbg ul li {
  127.         display: block;
  128.         list-style: none;
  129.         position: fixed;
  130.         overflow: hidden;
  131.         top: 0;
  132.         left: 0;
  133.         width: 100%;
  134.         height: 100%;
  135.         z-index: -1000;
  136.         float: right;
  137.     }
  138.     .screenbg ul a {
  139.         left: 0;
  140.         top: 0;
  141.         width: 100%;
  142.         height: 100%;
  143.         display: inline-block;
  144.         margin: 0;
  145.         padding: 0;
  146.         cursor: default;
  147.     }
  148.     .screenbg a img {
  149.         vertical-align: middle;
  150.         display: inline;
  151.         border: none;
  152.         display: block;
  153.         list-style: none;
  154.         position: fixed;
  155.         overflow: hidden;
  156.         top: 0;
  157.         left: 0;
  158.         width: 100%;
  159.         height: 100%;
  160.         z-index: -1000;
  161.         float: right;
  162.     }
  163.     .bottom {
  164.         margin: 8px auto 0 auto;
  165.         width: 100%;
  166.         position: fixed;
  167.         text-align: center;
  168.         bottom: 0;
  169.         left: 0;
  170.         overflow: hidden;
  171.         padding-bottom: 8px;
  172.         color: white;
  173.         word-spacing: 3px;
  174.         zoom: 1;
  175.     }
  176.     .bottom a {
  177.         color: #FFF;
  178.         text-decoration: none;
  179.     }
  180.     .bottom a:hover {
  181.         text-decoration: underline;
  182.     }
  183. </style>
  184. <script type="text/javascript" src="http://demo.mxyhn.xyz:8020/cssthemes6/11.20ZF8/js/jquery-1.8.2.min.js"></script>
  185. <script type="text/javascript">
  186.     $(function() {
  187.         $(".screenbg ul li").each(function() {
  188.             $(this).css("opacity", "0");
  189.         });
  190.         $(".screenbg ul li:first").css("opacity", "1");
  191.         var index = 0;
  192.         var t;
  193.         var li = $(".screenbg ul li");
  194.         var number = li.size();
  195.         function change(index) {
  196.             li.css("visibility", "visible");
  197.             li.eq(index).siblings().animate({
  198.                 opacity: 0
  199.             }, 3000);
  200.             li.eq(index).animate({
  201.                 opacity: 1
  202.             }, 3000);
  203.         }
  204.         function show() {
  205.             index = index + 1;
  206.             if (index <= number - 1) {
  207.                 change(index);
  208.             } else {
  209.                 index = 0;
  210.                 change(index);
  211.             }
  212.         }
  213.         t = setInterval(show, 8000);
  214.         //根据窗口宽度生成图片宽度
  215.         var width = $(window).width();
  216.         $(".screenbg ul img").css("width", width + "px");
  217.     });
  218. </script>
  219. <body>
  220.     <div class="login-box">
  221.         <h1>瓜子二手车系统后台登录</h1>
  222.         <form>
  223.             <div class="name">
  224.                 <label>管理员账号：</label>
  225.                 <input type="text" required name="username" id="" tabindex="1" autocomplete="off" />
  226.             </div>
  227.             <div class="password">
  228.                 <label>密 码：</label>
  229.                 <input type="password" required name="password" maxlength="16" id="" tabindex="2" />
  230.             </div>
  231.             <!-- <div class="code">
  232.                 <label>验证码：</label>
  233.                 <input type="text" name="" maxlength="4" id="code" tabindex="3" />
  234.                 <div class="codeImg">
  235.                     <img src="images/captcha.jpeg.jpg" />
  236.                 </div>
  237.             </div> -->
  238.             <div class="remember">
  239.                 <input type="checkbox" id="remember" tabindex="4">
  240.                 <label>记住密码</label>
  241.             </div>
  242.             <div class="login">
  243.                 <input type="button" name="btn" value="登录">
  244.             </div>
  245.         </form>
  246.     </div>
  247.     <div class="bottom">©2022php中文网 </div>
  248.     <div class="screenbg">
  249.         <ul>
  250.             <li><a href="javascript:;"><img src="http://demo.mxyhn.xyz:8020/cssthemes6/11.20ZF8/images/0.jpg"></a></li>
  251.             <li><a href="javascript:;"><img src="http://demo.mxyhn.xyz:8020/cssthemes6/11.20ZF8/images/1.jpg"></a></li>
  252.             <li><a href="javascript:;"><img src="http://demo.mxyhn.xyz:8020/cssthemes6/11.20ZF8/images/2.jpg"></a></li>
  253.         </ul>
  254.     </div>
  255.     <div style="text-align:center;">
  257.     </div>
  258.     <script type="text/javascript">
  259.         // 登录 
  260.         $('input[name="btn"]').click(function() {
  261.             var data = {};
  262.             data.username = $.trim($('input[name="username"]').val());
  263.             data.password = $.trim($('input[name="password"]').val());
  265.             $.post('submit.php', data, function(res) {
  266.                 console.log(res);
  267.             }, "json")
  268.         })
  269.     </script>
  270. </body>
  271. </html>

编写submit.php

  1. // 后端接受前端穿过来的参数
  2. $name = isset($_POST['username']) ? $_POST['username'] : null;
  3. $pwd = isset($_POST['password']) ? $_POST['password'] : null;
  4. // 1.连接数据库
  5. require_once 'connect.php';
  6. // 检查密码的正确性
  7. $pwd = md5($pwd);
  8. $stmt = $pdo->query("SELECT * FROM `userinfo` WHERE `username`='{$name}' AND `password` = '{$pwd}' ");
  9. //var_dump($stmt);
  10. foreach ($stmt as $row) {
  11.     print $row['username'] . "\t";
  12.     print $row['password'] . "\t";
  13.     print $row['id'] . "\n";
  14. }

正常登录打印，但是当我们在用户名入' or 1=1#

就会发现…

数据全给打印出来了。。。

因此，重新编辑submit.php如下

  1. <?php
  2. // 后端接受前端穿过来的参数
  3. $name = isset($_POST['username']) ? $_POST['username'] : null;
  4. $pwd = isset($_POST['password']) ? $_POST['password'] : null;
  5. // 1.连接数据库
  6. require_once 'connect.php';
  7. // 检查密码的正确性
  8. $pwd = md5($pwd);
  9. $stmt = $pdo->query("SELECT * FROM `userinfo` WHERE `username`='{$name}' AND `password` = '{$pwd}' ");
  10. //var_dump($stmt);
  11. // foreach ($stmt as $row) {
  12. //     print $row['username'] . "\t";
  13. //     print $row['password'] . "\t";
  14. //     print $row['id'] . "\n";
  15. // }
  16. // pdo预处理
  17. // 准备一条预处理sql语句
  18. $sql = "SELECT * FROM `user` WHERE `username`= ? AND `password` = ? ";
  19. // 准备要执行的语句，并返回语句对象
  20. $stmt = $pdo->prepare($sql);
  21. // 绑定参数到指定的变量名
  22. $stmt->bindParam(1, $name);
  23. $stmt->bindParam(2, $pwd);
  24. // 执行一条预处理语句
  25. $stmt->execute();
  26. $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
  27. var_dump($result);

增加数据库预处理语句，大功告成！