博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4373
积分:0
P豆:52

基于会话控制的用户登录与验证(0114php开发)

2020年01月17日 14:16:07阅读数:229博客 / 小辰/ php开发学习

1.先来老夫创建过程手写图

2.页面的效果的实现图

主要是以下几个页面
1.未登录的首页

2.登录页面

3.注册页面

4.登录后效果

主页代码
  1. <?php
  2. // 判断是否已登录?
  3. if (filter_has_var(INPUT_COOKIE, 'user')) {
  4. $user = unserialize(filter_input(INPUT_COOKIE, 'user'));
  5. // print_r($user);
  6. }
  7. ?>
  8. <!DOCTYPE html>
  9. <html lang="en">
  10. <head>
  11. <meta charset="UTF-8">
  12. <title>首页</title>
  13. <link rel="stylesheet" type="text/css" href="../css/index.css">
  14. </head>
  15. <body>
  16. <nav>
  17. <a href="">我的首页</a>
  18. <?php if (isset($user)) : ?>
  19. <a href="" id="logout">
  20. <span><?php echo $user['name'] ?></span>
  21. 退出
  22. </a>
  23. <?php else : ?>
  24. <a href="login.php">登录</a>
  25. <?php endif ?>
  26. </nav>
  27. <script>
  28. // 为退出按钮创建事件监听器
  29. if (document.querySelector('#logout') !== null) {
  30. document.querySelector('#logout').addEventListener('click', function(event) {
  31. if (confirm('是否退出')) {
  32. // 禁用默认行为, 其实就是禁用原<a>标签的点击跳转行为,使用事件中的自定义方法处理
  33. event.preventDefault();
  34. // 跳转到退出事件处理器
  35. window.location.assign('handle.php?action=logout');
  36. }
  37. });
  38. }
  39. </script>
  40. </body>
  41. </html>
登录页面
  1. <?php
  2. // 判断是否已登录
  3. if (filter_has_var(INPUT_COOKIE, 'user')) {
  4. exit('<script>alert("请不要重复登录");location.href="index.php"</script>');
  5. }
  6. ?>
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <title>用户登录</title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. <meta charset="utf-8">
  13. <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  14. <meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />
  15. <link href="css/style.css" rel='stylesheet' type='text/css' />
  16. </head>
  17. <body>
  18. <script>
  19. // $(document).ready(function(c) {
  20. // $('.close').on('click', function(c){
  21. // $('.login-form').fadeOut('slow', function(c){
  22. // $('.login-form').remove();
  23. // });
  24. // });
  25. // });
  26. </script>
  27. <!--SIGN UP-->
  28. <h1>用户登录</h1>
  29. <div class="login-form">
  30. <div class="close"> </div>
  31. <div class="head-info">
  32. <label class="lbl-1"> </label>
  33. <label class="lbl-2"> </label>
  34. <label class="lbl-3"> </label>
  35. </div>
  36. <div class="clear"> </div>
  37. <div class="avtar">
  38. <img src="images/avtar.png" />
  39. </div>
  40. <form action="handle.php?action=login" method="post">
  41. <input type="text" class="text" name="name" id="name" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'zhangheng';}" >
  42. <div class="key">
  43. <input type="password" name="password" id="password"value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
  44. </div>
  45. <div class="signin">
  46. <input type="submit" value="登录" >
  47. </div>
  48. </form>
  49. <a href="register.php">还没有帐号, 注册一个吧</a>
  50. </div>
  51. </body>
  52. </html>
注册页面代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>用户注册</title>
  6. </head>
  7. <body>
  8. <h3>用户注册</h3>
  9. <form action="handle.php?action=register" method="post" onsubmit="return compare()">
  10. <div>
  11. <label for="name">账号名称:</label>
  12. <input type="text" name="name" id="name" placeholder="不少于3个字符" required autofocus>
  13. </div>
  14. <div>
  15. <label for="email">邮箱:</label>
  16. <input type="email" name="email" id="email" placeholder="demo@email.com" required>
  17. </div>
  18. <div>
  19. <label for="p1">密码:</label>
  20. <input type="password" name="p1" id="p1" placeholder="不少于6位" required>
  21. </div>
  22. <div>
  23. <label for="p2">重复:</label>
  24. <input type="password" name="p2" id="p2" placeholder="必须与上面一致" required>
  25. </div>
  26. <div>
  27. <button>提交</button><span id="tips" style="color: red"></span>
  28. </div>
  29. </form>
  30. <a href="login.php">我有帐号,直接登录</a>
  31. <script>
  32. // 验证二次密码是否相等?
  33. function compare() {
  34. if (document.forms[0].p1.value.trim() !== document.forms[0].p2.value.trim()) {
  35. document.querySelector('#tips').innerText = '二次密码不相等';
  36. return false;
  37. }
  38. }
  39. </script>
  40. </body>
  41. </html>
对话控制文件代码
  1. <?php
  2. // 用户资料库, 实际项目中,应该用数据库
  3. $users = [
  4. [
  5. 'id' => 1,
  6. 'name' => '1',
  7. 'email' => 'admin@php.cn',
  8. 'password' => '123456',
  9. ],
  10. [
  11. 'id' => 2,
  12. 'name' => 'peter',
  13. 'email' => 'peter@php.cn',
  14. 'password' => '7c4a8d09ca3762af61e59520943dc26494f8941b',
  15. ],
  16. ];
  17. // 1. 验证请求来源的合法性
  18. // 设置合法请求地址的白名单
  19. $allowUrls = ['index.php', 'login.php', 'register.php'];
  20. // 获取当前的请求入口地址
  21. $currentUrl = basename(filter_input(INPUT_SERVER, 'HTTP_REFERER'));
  22. if (!in_array($currentUrl, $allowUrls)) {
  23. exit('非法来源');
  24. }
  25. // 2. 请求的分发处理
  26. // 获取到当前的请求
  27. $action = filter_input(INPUT_GET, 'action', FILTER_SANITIZE_STRING);
  28. $action = strtolower($action);
  29. switch ($action) {
  30. // 1. 登录
  31. case 'login':
  32. // (1) 判断请求的合法性
  33. if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST') {
  34. // (2)获取到当前请求的数据
  35. $name = filter_input(INPUT_POST, 'name');
  36. // echo $name;
  37. // 密码不要过滤
  38. $password = filter_input(INPUT_POST, 'password');
  39. // echo $email, $password;
  40. $results = array_filter($users, function ($user) use ($name, $password) {
  41. return $name === $user['name'] && $password === $user['password'];
  42. });
  43. print_r(count($results));
  44. if (count($results) === 1) {
  45. // setcookie('user', serialize($results[0]));
  46. setcookie('user', serialize(array_pop($results)));
  47. // print_r(unserialize($_COOKIE['user']));
  48. exit('<script>alert("验证通过");location.href="index.php"</script>');
  49. } else {
  50. exit('<script>alert("用户名或密码错误,或没有帐号");location.href="register.php"</script>');
  51. }
  52. } else {
  53. exit('非法请求');
  54. }
  55. break;
  56. // 2. 退出
  57. case 'logout':
  58. if (filter_input(INPUT_COOKIE, 'user')) {
  59. setcookie('user', null, time()-3600);
  60. exit('<script>alert("退出成功");location.href="index.php"</script>');
  61. }
  62. break;
  63. // 3.注册
  64. case 'register':
  65. $name = filter_var(filter_input(INPUT_POST, 'name'), FILTER_SANITIZE_SPECIAL_CHARS);
  66. $email = filter_var(filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL), FILTER_SANITIZE_EMAIL);
  67. $password = filter_input(INPUT_POST, 'p1');
  68. $id = 3;
  69. $data = compact('id', 'name', 'password');
  70. // $users[] = $data;
  71. // 这下面的弹窗没有
  72. if (array_push($users, $data) == 1) {
  73. exit('<script>alert("注册成功");location.assign("index.php");</script>');
  74. }
  75. print_r($users);
  76. break;
  77. // 未定义操作
  78. default:
  79. exit('未定义操作');
  80. }
对css效果代码,此处省略100行,蟹蟹。

4.通过session实现会话控制

主页面代码
  1. <?php
  2. session_start();
  3. if (isset($_SESSION['user'])) {
  4. $user = $_SESSION['user'];
  5. }
  6. ?>
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10. <meta charset="UTF-8">
  11. <title>首页</title>
  12. <link rel="stylesheet" type="text/css" href="../css/index.css">
  13. </head>
  14. <body>
  15. <nav>
  16. <a href="">我的首页</a>
  17. <?php if (isset($user)) : ?>
  18. <a href="" id="logout">
  19. <span><?php echo $user['name'] ?></span>
  20. 退出
  21. </a>
  22. <?php else : ?>
  23. <a href="logins.php">登录</a>
  24. <?php endif ?>
  25. </nav>
  26. <script>
  27. // 为退出按钮创建事件监听器
  28. if (document.querySelector('#logout') !== null) {
  29. document.querySelector('#logout').addEventListener('click', function(event) {
  30. if (confirm('是否退出')) {
  31. // 禁用默认行为, 其实就是禁用原<a>标签的点击跳转行为,使用事件中的自定义方法处理
  32. event.preventDefault();
  33. // 跳转到退出事件处理器
  34. window.location.assign('handles.php?action=logout');
  35. }
  36. });
  37. }
  38. </script>
  39. </body>
  40. </html>
登录页面代码
  1. <?php
  2. // 开启会话
  3. session_start();
  4. // 判断是否已登录
  5. if (isset($_SESSION['user'])) {
  6. exit('<script>alert("请不要重复登录");location.href="indexs.php"</script>');
  7. }
  8. ?>
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>用户登录</title>
  13. <meta name="viewport" content="width=device-width, initial-scale=1">
  14. <meta charset="utf-8">
  15. <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  16. <meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />
  17. <link href="css/style.css" rel='stylesheet' type='text/css' />
  18. </head>
  19. <body>
  20. <script>
  21. // $(document).ready(function(c) {
  22. // $('.close').on('click', function(c){
  23. // $('.login-form').fadeOut('slow', function(c){
  24. // $('.login-form').remove();
  25. // });
  26. // });
  27. // });
  28. </script>
  29. <!--SIGN UP-->
  30. <h1>用户登录</h1>
  31. <div class="login-form">
  32. <div class="close"> </div>
  33. <div class="head-info">
  34. <label class="lbl-1"> </label>
  35. <label class="lbl-2"> </label>
  36. <label class="lbl-3"> </label>
  37. </div>
  38. <div class="clear"> </div>
  39. <div class="avtar">
  40. <img src="images/avtar.png" />
  41. </div>
  42. <form action="handles.php?action=login" method="post">
  43. <input type="text" class="text" name="name" id="name" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'zhangheng';}" >
  44. <div class="key">
  45. <input type="password" name="password" id="password"value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
  46. </div>
  47. <div class="signin">
  48. <input type="submit" value="登录" >
  49. </div>
  50. </form>
  51. <a href="registers.php">还没有帐号, 注册一个吧</a>
  52. </div>
  53. </body>
  54. </html>
注册页面代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>用户注册</title>
  6. </head>
  7. <body>
  8. <h3>用户注册</h3>
  9. <form action="handle.php?action=registers" method="post" onsubmit="return compare()">
  10. <div>
  11. <label for="name">账号名称:</label>
  12. <input type="text" name="name" id="name" placeholder="不少于3个字符" required autofocus>
  13. </div>
  14. <div>
  15. <label for="email">邮箱:</label>
  16. <input type="email" name="email" id="email" placeholder="demo@email.com" required>
  17. </div>
  18. <div>
  19. <label for="p1">密码:</label>
  20. <input type="password" name="p1" id="p1" placeholder="不少于6位" required>
  21. </div>
  22. <div>
  23. <label for="p2">重复:</label>
  24. <input type="password" name="p2" id="p2" placeholder="必须与上面一致" required>
  25. </div>
  26. <div>
  27. <button>提交</button><span id="tips" style="color: red"></span>
  28. </div>
  29. </form>
  30. <a href="login.php">我有帐号,直接登录</a>
  31. <script>
  32. // 验证二次密码是否相等?
  33. function compare() {
  34. if (document.forms[0].p1.value.trim() !== document.forms[0].p2.value.trim()) {
  35. document.querySelector('#tips').innerText = '二次密码不相等';
  36. return false;
  37. }
  38. }
  39. </script>
  40. </body>
  41. </html>
会话控制文件代码
  1. <?php
  2. // 开启会话
  3. session_start();
  4. // 用户资料库, 实际项目中,应该用数据库
  5. $users = [
  6. [
  7. 'id' => 1,
  8. 'name' => '1',
  9. 'email' => 'admin@php.cn',
  10. 'password' => '123456',
  11. ],
  12. [
  13. 'id' => 2,
  14. 'name' => 'peter',
  15. 'email' => 'peter@php.cn',
  16. 'password' => '7c4a8d09ca3762af61e59520943dc26494f8941b',
  17. ],
  18. ];
  19. // 1. 验证请求来源的合法性
  20. // 设置合法请求地址的白名单
  21. $allowUrls = ['indexs.php', 'logins.php', 'registers.php'];
  22. // 获取当前的请求入口地址
  23. $currentUrl = basename(filter_input(INPUT_SERVER, 'HTTP_REFERER'));
  24. if (!in_array($currentUrl, $allowUrls)) {
  25. exit('非法来源');
  26. }
  27. // 2. 请求的分发处理
  28. // 获取到当前的请求
  29. $action = filter_input(INPUT_GET, 'action', FILTER_SANITIZE_STRING);
  30. $action = strtolower($action);
  31. switch ($action) {
  32. // 1. 登录
  33. case 'login':
  34. // (1) 判断请求的合法性
  35. if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST') {
  36. // (2)获取到当前请求的数据
  37. $name = filter_input(INPUT_POST, 'name');
  38. // echo $name;
  39. // 密码不要过滤
  40. $password = filter_input(INPUT_POST, 'password');
  41. // echo $email, $password;
  42. $results = array_filter($users, function ($user) use ($name, $password) {
  43. return $name === $user['name'] && $password === $user['password'];
  44. });
  45. print_r(count($results));
  46. if (count($results) === 1) {
  47. // setcookie('user', serialize($results[0]));
  48. // setcookie('user', serialize(array_pop($results)));
  49. // print_r(unserialize($_COOKIE['user']));
  50. $_SESSION['user'] = array_pop($results);
  51. exit('<script>alert("验证通过");location.href="indexs.php"</script>');
  52. } else {
  53. exit('<script>alert("用户名或密码错误,或没有帐号");location.href="registers.php"</script>');
  54. }
  55. } else {
  56. exit('非法请求');
  57. }
  58. break;
  59. // 2. 退出
  60. case 'logout':
  61. if (isset($_SESSION['user'])) {
  62. // setcookie('user', null, time()-3600);
  63. session_destroy();
  64. exit('<script>alert("退出成功");location.href="indexs.php"</script>');
  65. }
  66. break;
  67. // 3.注册
  68. case 'register':
  69. $name = filter_var(filter_input(INPUT_POST, 'name'), FILTER_SANITIZE_SPECIAL_CHARS);
  70. $email = filter_var(filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL), FILTER_SANITIZE_EMAIL);
  71. $password = filter_input(INPUT_POST, 'p1');
  72. $id = 3;
  73. $data = compact('id', 'email', 'name', 'password');
  74. // $users[] = $data;
  75. // array_push($users, $data);
  76. if (array_push($users, $data) == 1) {
  77. exit('<script>alert("注册成功");location.assign("indexs.php");</script>');
  78. }
  79. print_r($users);
  80. break;
  81. // 未定义操作
  82. default:
  83. exit('未定义操作');
  84. }

5.小结

通过这次实战,我对过滤器、cookie、session,有了进一步的了解,两者相差不大,主要是数据存储的地方不同,获取传输的数据方式基本相同,如果做好了通过cookie验证的文件,只要对此文件稍加修改就可以实现,值得注意的是session要开启会话。做个验证的时候,过程基本都正确,就是登录的时候总是密码不对,通过尝试才发现,密码是对的,但是控制会话文件对文件进行了加密,两个密码(库中的密码与传过来的密码),就不一样了,为了简单一点我就直接不加密了。最后,就基本没什么问题了。

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:完成的不错, 界面也写得好看, 总结的很好, 加密环节出错, 再找找原因, 加密并不在前端进行的

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论