如何在具有安全功能的注销页面上添加注销按钮?

时间:2019-02-02 13:38:11

标签: php html

在用户登录此website后,当用户转到我的page时,他们会看到此page。但是,如果我在完整的URL webbrowserinfo.96.lt/logindone/logincode/V1/homepage.php键入它无论加载如果与否的用户登录。通过我自己的测试,它与注销按钮有关。

因此,我在想我需要在下面做类似的事情。但是,当我将此代码添加到受保护的密码页面上时,即homepage.php无效,即单击注销后什么也没发生。

<form action="index.php" method="post">
           <!-- Logout button -->
           <div class="inner_container">
               <button class="logout_button" type="submit">Log Out<i class="fas fa-sign-in-alt"></i>
               </button>
            </div>
</form>

这是我受密码保护的代码的完整代码

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../../../favicon.ico">
      <!-- Site title, CSS external file and font awesome -->
      <title>Login Page - Created by Liam Docherty</title>
      <link rel="stylesheet" href="css/design.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
   </head>
   <body class="bg-white">
      <div class="container">
         <div class="py-5 text-center">
            <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
            <h2>Checkout form</h2>
            <p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
         </div>
         <div class="row">
            <div class="col-md-4 order-md-2 mb-4">
               <h4 class="d-flex justify-content-between align-items-center mb-3">
                  <span class="text-muted">Your cart</span>
                  <span class="badge badge-secondary badge-pill">3</span>
               </h4>
               <ul class="list-group mb-3">
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Product name</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$12</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Second product</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$8</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Third item</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$5</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between bg-light">
                     <div class="text-success">
                        <h6 class="my-0">Promo code</h6>
                        <small>EXAMPLECODE</small>
                     </div>
                     <span class="text-success">-$5</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between">
                     <span>Total (USD)</span>
                     <strong>$20</strong>
                  </li>
               </ul>
               <form class="card p-2">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Promo code">
                     <div class="input-group-append">
                        <button type="submit" class="btn btn-secondary">Redeem</button>
                     </div>
                  </div>
               </form>
            </div>
            <div class="col-md-8 order-md-1">
               <h4 class="mb-3">Billing address</h4>
               <form class="needs-validation" novalidate>
                  <div class="row">
                     <div class="col-md-6 mb-3">
                        <label for="firstName">First name</label>
                        <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
                        <div class="invalid-feedback">
                           Valid first name is required.
                        </div>
                     </div>
                     <div class="col-md-6 mb-3">
                        <label for="lastName">Last name</label>
                        <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
                        <div class="invalid-feedback">
                           Valid last name is required.
                        </div>
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="username">Username</label>
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">@</span>
                        </div>
                        <input type="text" class="form-control" id="username" placeholder="Username" required>
                        <div class="invalid-feedback" style="width: 100%;">
                           Your username is required.
                        </div>
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="email">Email <span class="text-muted">(Optional)</span></label>
                     <input type="email" class="form-control" id="email" placeholder="you@example.com">
                     <div class="invalid-feedback">
                        Please enter a valid email address for shipping updates.
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="address">Address</label>
                     <input type="text" class="form-control" id="address" placeholder="34 Hoxton liam street" required>
                     <div class="invalid-feedback">
                        Please enter your shipping address.
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-5 mb-3">
               <!-- Logout button -->
                <a class="btn btn-primary" href="index.php" role="button">Signout button</a>
               </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

My website has three scripts here they're if you need to see them

下面是登录页面代码

<?php
   //PHP method to use cache memory to store details
   session_start();
   //Makes the "config.php" file available to be executed from this page
   require_once('dbconfig/config.php');
   ?>
<!DOCTYPE html>
<html>
   <head>
      <!-- Site title, CSS external file and font awesome -->
      <title>Login Page - Created by Liam Docherty</title>
      <link rel="stylesheet" href="css/design.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   </head>
   <body>
      <div id="main-wrapper">
         <center>
            <h2>Login Form - Created by Liam Docherty</h2>
         </center>
         <div class="imgcontainer">
            <img src="imgs/icon-person-512.png" alt="Avatar" class="avatar">
         </div>
         <!-- THE FORM -->
         <!-- action="index.php" -- This attribute shows where the PHP script that does the processing is located -->
         <!-- method="post" -- The attribute identifies the action that will be performed with the data of the form. I.E. POST data to the "users" database -->
         <form action="index.php" method="post">
            <div class="inner_container">
               <label><b>Username</b></label>
               <input type="text" placeholder="Enter Username" name="username" required>
               <label><b>Password</b></label>
               <input type="password" placeholder="Enter Password" name="password" required>
               <!-- The Login button -->
               <button class="login_button" name="login" type="submit">Login</button>
               <!-- The button that is linked to the "register.php" page -->
               <a href="register.php"><button type="button" class="register_btn">Register</button></a>
            </div>
         </form>
         <?php
            //Condition, checking the Login button is pressed
            if(isset($_POST['login']))
            {
                //The data from the Form (username & password) is stored into the @$username & @$passwordVariables
                //You use @ before a VARIABLE in PHP when you do not want to initialise the VARIABLE before using it
                @$username=$_POST['username'];
                @$password=$_POST['password'];

                //Statement that will SELECT the data from the "login" table, WHERE the Usename and Password typed match the typed ones
                //Once the database is checked, if login details match than it stores the data in the "$query" VARIABLE
                $query = "SELECT * FROM login WHERE username='$username' and password='$password' ";
                //echo $query;

                //This statement performs both the connection to the database using the values in the "$con" VARIABLE and
                //The SELECT statement stored in the "$query" VARIABLE
                $query_run = mysqli_query($con,$query);
                //echo mysql_num_rows($query_run);

                //IF the "$query_run" is run successfully, then
                if($query_run)
                {
                    //Check if the Username and Password exist in the database, if they exist
                    if(mysqli_num_rows($query_run)>0)
                    {
                    $row = mysqli_fetch_array($query_run,MYSQLI_ASSOC);

                    $_SESSION['username'] = $username;
                    $_SESSION['password'] = $password;

                    //Sent the user to the "homepage.php" page
                    header( "Location: homepage.php");
                    }
                    else
                    {
                        //IF NOT, Display the message below
                        echo '<script type="text/javascript">alert("No such User exists. Invalid Credentials")</script>';
                    }
                }

                //IF the "$query_run" is NOT successful, then
                else
                {
                    //Display this message
                    echo '<script type="text/javascript">alert("Database Error")</script>';
                }
            }
            else
            {
            }
            ?>
      </div>
   </body>
</html>
  

基于帮助的我自己的尝试

以下代码的问题是它不允许我实际登录。这是好的,但因为它停止用户只需在URL的完整文件路径键入并绕过登录系统。

<?php
//check if session id is set. If it is not set, user will be redirected back to login page

if(!isset($_SESSION['username'])){
     header('Location:index.php');
     die();
}
?>

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../../../favicon.ico">
      <!-- Site title, CSS external file and font awesome -->
      <title>Login Page - Created by Liam Docherty</title>
      <link rel="stylesheet" href="css/design.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
   </head>
   <body class="bg-white">
      <div class="container">
         <div class="py-5 text-center">
            <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
            <h2>Checkout form</h2>
            <p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
         </div>
         <div class="row">
            <div class="col-md-4 order-md-2 mb-4">
               <h4 class="d-flex justify-content-between align-items-center mb-3">
                  <span class="text-muted">Your cart</span>
                  <span class="badge badge-secondary badge-pill">3</span>
               </h4>
               <ul class="list-group mb-3">
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Product name</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$12</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Second product</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$8</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between lh-condensed">
                     <div>
                        <h6 class="my-0">Third item</h6>
                        <small class="text-muted">Brief description</small>
                     </div>
                     <span class="text-muted">$5</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between bg-light">
                     <div class="text-success">
                        <h6 class="my-0">Promo code</h6>
                        <small>EXAMPLECODE</small>
                     </div>
                     <span class="text-success">-$5</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between">
                     <span>Total (USD)</span>
                     <strong>$20</strong>
                  </li>
               </ul>
               <form class="card p-2">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Promo code">
                     <div class="input-group-append">
                        <button type="submit" class="btn btn-secondary">Redeem</button>
                     </div>
                  </div>
               </form>
            </div>
            <div class="col-md-8 order-md-1">
               <h4 class="mb-3">Billing address</h4>
               <form class="needs-validation" novalidate>
                  <div class="row">
                     <div class="col-md-6 mb-3">
                        <label for="firstName">First name</label>
                        <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
                        <div class="invalid-feedback">
                           Valid first name is required.
                        </div>
                     </div>
                     <div class="col-md-6 mb-3">
                        <label for="lastName">Last name</label>
                        <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
                        <div class="invalid-feedback">
                           Valid last name is required.
                        </div>
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="username">Username</label>
                     <div class="input-group">
                        <div class="input-group-prepend">
                           <span class="input-group-text">@</span>
                        </div>
                        <input type="text" class="form-control" id="username" placeholder="Username" required>
                        <div class="invalid-feedback" style="width: 100%;">
                           Your username is required.
                        </div>
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="email">Email <span class="text-muted">(Optional)</span></label>
                     <input type="email" class="form-control" id="email" placeholder="you@example.com">
                     <div class="invalid-feedback">
                        Please enter a valid email address for shipping updates.
                     </div>
                  </div>
                  <div class="mb-3">
                     <label for="address">Address</label>
                     <input type="text" class="form-control" id="address" placeholder="34 Hoxton liam street" required>
                     <div class="invalid-feedback">
                        Please enter your shipping address.
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-5 mb-3">
               <!-- Logout button -->
                <a class="btn btn-primary" href="index.php" role="button">Signout button</a>
               </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

2 个答案:

答案 0 :(得分:0)

对不起,如果我不能很好地解释。首先,您需要为用户设置一个会话ID,并创建一条if语句来检查是否为您不想为未经授权的用户显示的页面设置了它们。

例如

//check if session id is set. If it is not set, user will be redirected back to login page

if(!isset($_SESSION['username'])){
     header('Location:index.php');
     die();
}
else
// send authorized users to homepage.
{
     header('Location:homepage.php');

}

您还必须在注销后终止会话,您可以通过以下操作做到这一点:

unset($_SESSION['username']);
// kill session    
session_destroy();

// send user back to login page.
header("Location: index.php");

希望有帮助!

答案 1 :(得分:0)

以下是用于学校/学院任务的注销功能的非常简单的解决方案。

“实时”生产网站​​将需要登录系统中的很多安全性(但这是另一个主题)。 我可以看到您已经知道这一点,因此我将继续我的解决方案;)

首先,您完成的登出表单是个好主意。但是我认为它没有用,因为我注意到您尚未在homepage.php中关闭“帐单邮寄地址”表单的<form>标记,因此您应该先这样做。

这是我对完整结构的建议。希望对您有所帮助:)

homepage.php

  1. <!doctype html>上方的首页顶部添加php,以检查是否设置了用户名,以及是否未重定向到索引/登录页面。
  2. 通过“退出”提交按钮将HTML表单添加到首页,提交后将重定向到登录/索引页面。 (确保将此表格放在其他任何表格之外。)
  3. 在首页上添加一个名为ConfirmLogOut的javaScript函数,该函数将提示用户确认他们希望注销。

因此,您应该将以下代码添加到homepage.php中(将其添加到我已演示的代码中,希望很清楚)

<?php
  //start the session
  session_start();
  //If the user is not logged in, send them to the index/login page
  if(!isset($_SESSION['username'])){
    header('Location: index.php'); 
    exit();
  }
?>

<!doctype html>
<html lang="en">
<head>
<script>
//javaScript function for prompting user to confirm they want to log out.
//This will be executed when the signout button is pressed.
function confirmLogOut(){
  var confirmation = confirm("Are you sure you want to log out?");
  if(confirmation){
    //the user has confirmed they would like to log out so we submit the form
    //ie return true
    return true;
  }else{
    //the user has canceled their log out request so we don't submit the form
    return false;
  }
}
</script>
</head>
<body>
  <!--Log out/sign out button form-->
  <!--When the following form is submitted we called the confirmLogOut javaScript function in order to prompt the 
user to confirm they wish to log out before redirecting to the index/login page-->
  <form id="form-log-out" method="post" action="index.php" onsubmit="return confirmLogOut()">
      <input name="log_out" type="hidden" value="1"/>
      <input type="submit" class="btn btn-primary" value="Signout button" />
  </form>
</body>
</html>

index.php

这是完整的php代码,应位于您的登录/索引页面的顶部

<?php
  //PHP method to use cache memory to store details
  session_start();
  //Makes the "config.php" file available to be executed from this page
  require_once('dbconfig/config.php');
  if(isset($_POST["log_out"]) && ($_POST["log_out"] == '1')) {
    //the log_out post variable is set and is equal to 1. 
    //This means we have come from another page after pressing the log out button.          
    //unset all session values
    $_SESSION = array();

    //Destroy the session 
    session_destroy();
  }
?>