doumianfeng6979 2019-02-02 13:38
浏览 298
已采纳

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

When the user goes to my website after the user logins in on this page they're then presented with this page . However, if I type in the full URL webbrowserinfo.96.lt/logindone/logincode/V1/homepage.php it loads regardless if the user logins in or not. From doing my own tests it has something to do with the log out button.

Therefore, I was thinking I need to do something like this below. However, when I add this code to my protected password page i.e homepage.php it doesn't work i.e nothing happens when I click logout.

<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>

Here is my full code for the password protected code

<!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

BELOW IS THE LOGIN PAGE CODE 

<?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>

MY OWN UPDATED ATTEMPT BASED ON HELP

This issue with the code below is that it doesn't let me actually login. This is good though as it stops a user just typing in the full file path of the URL and bypassing the login system. 

<?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条回答 默认 最新

  • dqk77945 2019-02-03 15:23
    关注

    The following is a very simple solution for your logout functionality for the purpose of a school/college assignment.

    A "live" production website will need a lot of security in the login system (but that is a whole other topic). I can see you know this already so i'll continue with my solution ;)

    Firstly the logout form you did was a great idea well done. But I think it didn't work because I've noticed you haven't closed the <form> tag for your "Billing address" form within your homepage.php so you should do that before anything else.

    Here's my advice on the full structure. Hope it helps :)

    homepage.php

    1. Add php to the top of the homepage above the <!doctype html> to check if the username is set and if not redirect to the index/login page.
    2. Add an HTML form to the homepage with a "sign out" submit button which will redirect to the login/index page when submitted. (Make sure you put this form outside any other forms.)
    3. Add a javaScript function called confirmLogOut to the homepage which will prompt the user to confirm they wish to log out.

    So you should add the following code to your homepage.php (fit it in to your code where i've demonstarted-hopefully it's clear)

    <?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

    This is the full php code which should be at the top of your login/index page

    <?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();
  }
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 Stata 面板数据模型选择
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用