Tự động đăng xuất sau 15 phút không hoạt động trong javascript

Question

Bạn có thể nhận thấy rằng một số ứng dụng tự động đăng xuất bạn sau một thời gian không hoạt động nhất định. Tính năng này đặc biệt quan trọng khi xử lý các ứng dụng web nhạy cảm như ứng dụng tài chính

Nội dung chính Show

Điều kiện tiên quyết
Thực hiện
điều kiện tiên quyết
Tổng quan ngắn gọn
Bắt đầu
Lĩnh vực nghiên cứu trọng điểm
Phần kết luận
Làm cách nào để đặt thời gian chờ không hoạt động trong JavaScript?
Làm cách nào để kéo dài thời gian chờ của phiên trong JavaScript?
Làm thế nào để thời gian chờ nhàn rỗi phát hiện người dùng không hoạt động để tự động đăng xuất?
Làm cách nào để ngăn thời gian chờ của phiên trong JavaScript?

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách triển khai tính năng đăng xuất tự động trong ứng dụng web bằng Javascript trong React-JS

Điều kiện tiên quyết

Chúng tôi cần một ứng dụng cơ bản với tính năng xác thực được triển khai
Chúng tôi sẽ xây dựng trên ứng dụng cơ bản này mà tôi đã viết trước đó về Triển khai Xác thực và Định tuyến được Bảo vệ trong React-JS. Bạn có thể sao chép từ đây Github

Đây là một ứng dụng cơ bản với hai trang chứng minh xác thực người dùng

Trang đăng nhập
Trang chủ
- Trên trang chủ có nút đăng xuất

Thông tin đăng nhập

tên tài khoản. quản trị viên
Mật khẩu. 123456

Thực hiện

Chúng tôi muốn đảm bảo ứng dụng tự động đăng xuất người dùng sau 10 giây không hoạt động

Khái niệm cơ bản

Để bắt đầu, chúng tôi tạo một thành phần AppLogout sẽ bao bọc các thành phần được xác thực và trong đó chúng tôi sẽ triển khai tính năng đăng xuất

const AppLogout = ({ children }) => {
  return children;
};
export default AppLogout;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

GHI CHÚ. Điều này có thể được thực hiện trong tệp mục nhập của bố cục chính của chúng tôi. Nhưng bạn có thể tạo một thành phần riêng để phân tách các mối quan tâm

Tôi muốn giải quyết câu hỏi về cách tạo đăng xuất tự động cho người dùng đã không thể sử dụng được trong 5 phút?

Tôi đã thực hiện một số bước cơ bản theo nhiều trang diễn đàn. Đầu tiên, tôi đã thay đổi cài đặt bảo mật trong quản lý ứng dụng của mình. Hình ảnh bên dưới là cài đặt đăng nhập phổ biến của tôi. Khi tôi đã áp dụng cài đặt này và cùng với cài đặt đó, tôi tiếp tục tạo một ứng dụng xác thực phiên mới(rememberPassword = false). Một khi, các ứng dụng đã sẵn sàng, tôi đã thử nghiệm nó trên trình duyệt web và cài đặt này dường như không hoạt động vì sau 5 phút không hoạt động, tôi vẫn chưa bị hệ thống đăng xuất. có ai có thể giúp tôi trong việc này không?

Bên cạnh đó, tôi đã thử thay đổi thời gian chạy phiên trong máy. cấu hình cho. NET nhưng tôi không chắc bắt đầu từ đâu. Tôi có cần tạo mã nguồn mới để chấm dứt phiên hoặc sửa đổi mã hiện có không?

Cảm ơn bạn đã dành thời gian.

Trân trọng,

Sharizad Mohamad

Xin chào Sharizad, bạn không thể làm điều này bằng cách thay đổi cấu hình đề tài. Bạn cần kiểm soát điều này trên thiết bị di động bằng chức năng JavaScript với một số logic để phát hiện không hoạt động.

Nếu người dùng không hoạt động trong một khoảng thời gian nhất định, bạn nên thiết lập thời gian chờ phiên tự động với Ajax để buộc đăng xuất, đặc biệt nếu có thể có dữ liệu nhạy cảm trên màn hình. Điều này thường được xử lý ở phía máy chủ; . Một cách để xử lý điều này được mô tả dưới đây

Khi người dùng đăng nhập, hãy tạo bộ hẹn giờ JavaScript bằng phương pháp
```
	


One moment please...
```
4. Bộ đếm thời gian sẽ gọi một chức năng kết thúc phiên sau n phút
Bất cứ khi nào có hoạt động của người dùng, bộ hẹn giờ phải được khởi động lại
Khi người dùng đăng xuất rõ ràng (e. g. , nhấp vào nút đăng xuất), bộ đếm thời gian phải bị tắt

Để các ví dụ này hoạt động, cần có nhiều tệp hơn số tệp có sẵn trong hướng dẫn này. Để xem các ví dụ này đang hoạt động, hãy tham gia khóa đào tạo Ajax

Trong ví dụ này, chúng ta sẽ xem xét một biểu mẫu đăng nhập đơn giản. Người dùng đăng nhập và được cung cấp nút đăng xuất. Khi hết phiên, trang sẽ trống và một cảnh báo xuất hiện cho người dùng biết rằng phiên đã hết

Tự động đăng xuất sau 15 phút không hoạt động trong javascript

Sau khi người dùng nhấp vào nút OK, biểu mẫu đăng nhập sẽ xuất hiện lại. Hãy nhìn vào mã. Có khá nhiều bước liên quan đến việc thiết lập thời gian chờ phiên tự động với Ajax, như minh họa bên dưới

Chương trình Giáo dục Kỹ thuật (EngEd) này được hỗ trợ bởi Mục. Triển khai tức thì các container trên nhiều nhà cung cấp đám mây trên toàn cầu

Dùng thử miễn phí

Tạo tính năng tự động đăng xuất bằng JavaScript

Ngày 14 tháng 10 năm 2021

Khi triển khai bảo mật cho các ứng dụng của mình, tại một thời điểm, chúng tôi sẽ kiểm tra tính tích cực của người dùng trong một tab. Luôn luôn là một cách thực hành tốt để đăng xuất người dùng tự động dựa trên hoạt động của họ

Điều này đặc biệt quan trọng nếu ứng dụng xử lý dữ liệu riêng tư hoặc nhạy cảm của người dùng. Ví dụ: chi tiết tài khoản ngân hàng. Chúng ta sẽ xem cách thực hiện điều đó bằng JavaScript dựa trên các sự kiện đầu vào như nhấn phím, cuộn, v.v.

điều kiện tiên quyết

Để làm theo cùng với hướng dẫn này, bạn nên có

Có kiến thức cơ bản về JavaScript
Có kiến thức cơ bản về HTML và CSS
Kiến thức cơ bản về PHP (không bắt buộc)

Bạn có thể sử dụng bất kỳ công nghệ/ngôn ngữ nào cho tập lệnh đăng nhập phụ trợ

Tổng quan ngắn gọn

Chúng tôi sẽ xem xét triển khai tính năng tự động đăng xuất bằng JavaScript với sự trợ giúp của giao diện đăng nhập đơn giản dựa trên PHP làm phụ trợ. Trang hiển thị sẽ có một bộ đếm đếm số giây còn lại trước khi người dùng đăng xuất do không hoạt động

Hẹn giờ đăng xuất tự động sẽ được đặt lại nếu phát hiện bất kỳ sự kiện nào. Bản demo được tìm thấy ở đây

Bắt đầu

Trước tiên, chúng tôi sẽ tạo các tệp giao diện người dùng bằng HTML và CSS cho màn hình đăng nhập và hiển thị

Tôi sẽ không giải thích các đoạn giao diện người dùng vì điều đó nằm ngoài phạm vi của bài viết này và cũng không phải là mục đích chính của bài viết này. Bạn có thể tạo bất kỳ cái nào của riêng mình, nó không bị giới hạn nghiêm ngặt đối với những cái tôi sử dụng

Trang đăng nhập Mã như sau

                                                                                      div> body>  html>

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon"> <title>Sign Page | T-Banktitle> <body style="background-color: rgba(46, 51, 52, 1)"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">script> <link rel="stylesheet" type="text/css" href="/sacco/style/home.css"> head> <div> <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081"> <div class="container-fluid"> <p> <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fa fa-home ">i> <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span> button> <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081"> <h1 style="color: white">T-BANKh1> div> p> div> nav> <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh"> <div class="card border-dark container"> <div class="card-body border-dark row" style="background-color: #035050"> <div id="sych" class=" col-md-6 d-flex align-items-center justify-content-center"> <div class="card-body" style=" min-width: 30vw;"> <div style="text-align: center; padding-bottom: 15vh" class="card-text text-white"> <h3>Log inh3> div> <form action="https://sacco.terrence-aluda.com/sacco/backend/eng-ed-auth.php" method="post"> <div class="mb-3"> <div class="d-flex align-items-center justify-content-center vw-30"> <input class="form-control text-center" name="PhoneNo" type="text" autofocus="true" placeholder="Phone number" id="signNum"> div> div> <div class="mb-3"> <div class="d-flex align-items-center justify-content-center vw-50"> <input type='password' name="password" class="form-control text-center" placeholder="Confirm password" id="logPass"> div> div> <div class="mb-3"> <div class="d-flex align-items-center justify-content-center vw-50"> <span id="banner" class="text-danger">span> div> div> <div class="mb-3" style="text-align: center"> <button id="logBtn" class="btn" style="background-color: red; color: white; "><i class="fa fa-unlock-alt">i> Log inbutton> div> form> div> div> <div style="background-image: url(assets/images/logo-big.jpeg); background-size: cover;" class="col-md-6"> <div style="padding-top: 60vh" class="d-flex align-content-center align-items-center justify-content-center vw-100 vh-100"> div> div> div> div> div>

Đây là trang đăng nhập nơi người dùng nhập thông tin đăng nhập để đăng nhập vào hệ thống. Các biểu định kiểu được lưu trữ, vì vậy bạn có thể nhấp vào liên kết được cung cấp ở trên để xem nếu trình duyệt của bạn không hiển thị đúng giao diện người dùng do chính sách CORS

Bootstrap 5 được sử dụng để tạo kiểu

Thông tin đăng nhập là Số điện thoại -


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

2 và Mật khẩu-


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

3

đầu ra

trang hiển thị


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

Đây là trang hiển thị nơi người dùng sẽ thấy đồng hồ đếm ngược trước khi đăng xuất sau một khoảng thời gian không hoạt động nhất định

Lưu ý rằng một phương thức được kích hoạt trong thuộc tính


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

4 của phần thân. Chúng ta sẽ nói về điều đó trong mã JavaScript

đầu ra

Tập lệnh đăng nhập PHP


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

Đây là kịch bản phụ trợ. Một lần nữa, bạn có thể viết của bạn bằng bất kỳ ngôn ngữ nào bạn muốn. Nó sử dụng phương pháp


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

5 để lấy tham số, loại bỏ bất kỳ khoảng trắng ở cuối nào, sau đó chạy một truy vấn


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

6 đơn giản để kiểm tra xem có thông tin xác thực hay không

Nếu thông tin đăng nhập ổn, chúng tôi sẽ chuyển hướng người dùng đến trang hiển thị

Làm việc của ba tập tin

Ba tệp được kết nối trong đó, trước tiên người dùng truy cập trang đăng nhập và đăng nhập. Sau khi tập lệnh PHP xác thực người dùng, họ được phép truy cập trang hiển thị

Sau một khoảng thời gian không hoạt động, trang hiển thị sẽ chuyển hướng đến trang đăng nhập

Login -> [Backend aunthentication] -> Display -> (If user is inactive) -> Login

JavaScript

Đây là nơi tính năng autologout được 'tạo ra'

let warningTimeout = 5000;
let warningTimerID;
let counterDisplay = document.getElementById("numCount");
let logoutUrl = "https://sacco.terrence-aluda.com/sacco/eng-edtest.html";

Đầu tiên chúng ta khởi tạo các biến


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

7 - Để lưu trữ thời gian chờ


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

8 - Để lưu trữ ID hẹn giờ


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

9 - Để lưu trữ phần tử nơi số bộ đếm sẽ được hiển thị


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

0 - Để lưu trữ địa chỉ URL mà tập lệnh sẽ chuyển hướng đến sau khi đăng xuất

function startTimer() {
  // window.setTimeout returns an ID that can be used to start and stop the timer
  warningTimerID = window.setTimeout(idleLogout, warningTimeout);
  animate(counterDisplay, 5, 0, warningTimeout);
}

Đây là phương pháp để bắt đầu hẹn giờ


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

1 trả về một ID sẽ được sử dụng để bắt đầu và dừng bộ đếm thời gian. Sau khi hết thời gian chờ, phương thức


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

2 được gọi để đăng xuất người dùng

Bộ đếm được làm động bằng phương pháp


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

3. Chúng ta sẽ nói chi tiết về các phương pháp này trong các phần tiếp theo

Bộ hẹn giờ được đặt thành 5 giây để tiết kiệm thời gian của chúng tôi trong quá trình kiểm tra hệ thống, nhưng bạn có thể thay đổi các giá trị một cách thích hợp e. g. 3 phút, 200 giây, v.v.

Chúng tôi cũng đặt bộ đếm hoạt ảnh chạy trong 5 giây do thời lượng hẹn giờ. Bạn sẽ đặt nó để khớp với giá trị hẹn giờ mà bạn sử dụng như 100 trong 100 giây, 30 trong 30 giây, v.v.

Một điểm khác cần lưu ý là do một số vấn đề về Trải nghiệm người dùng (UX), bạn nên đặt hai bộ hẹn giờ, một để chờ phiên không hoạt động và một để cảnh báo người dùng

Bằng cách này, bạn có thể tắt bộ hẹn giờ cảnh báo sau khi hiển thị một chế độ với bộ đếm thay vì bộ đếm chạy toàn bộ thời gian của chương trình. Ví dụ: 10 phút để chờ trạng thái không hoạt động sau đó 30 giây để hiển thị cửa sổ bật lên với bộ đếm

Bạn có thể xem những đề xuất này nói về điều tương tự trên StackOverflow

function resetTimer() {
  window.clearTimeout(warningTimerID);
  startTimer();
}
[];

cái này khá đơn giản. Nó xóa thời gian chờ khớp với ID thời gian chờ. Nó được kích hoạt sau khi bất kỳ sự kiện nào được phát hiện

function idleLogout() {
  window.location = logoutUrl;
}

Chức năng này chỉ chuyển hướng đến trang đăng nhập sau một thời gian không hoạt động

function animate(obj, initVal, lastVal, duration) {
  let startTime = null;

  //get the current timestamp and assign it to the currentTime variable

  let currentTime = Date.now();

  //pass the current timestamp to the step function

  const step = (currentTime) => {
    //if the start time is null, assign the current time to startTime


  //pass the current timestamp to the step function

  const step = (currentTime) => {
    //if the start time is null, assign the current time to startTime

    if (!startTime) {
      startTime = currentTime;
    }

    //calculate the value to be used in calculating the number to be displayed

    const progress = Math.min((currentTime - startTime) / duration, 1);

    //calculate what is to be displayed using the value gotten above

    displayValue = Math.floor(progress * (lastVal - initVal) + initVal);
    obj.innerHTML = displayValue;

    //checking to make sure the counter does not exceed the last value(lastVal)

    if (progress < 1) {
      window.requestAnimationFrame(step);
    } else {
      window.cancelAnimationFrame(window.requestAnimationFrame(step));
    }
  };

  //start animating
  window.requestAnimationFrame(step);
}

Hàm


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

3 đã được giải thích trong bài viết này

Tóm lại, nó lấy dấu thời gian hiện tại và dấu thời gian mà trang được tải. Sau đó, nó tính toán những gì sẽ được hiển thị bằng cách sử dụng sự khác biệt giữa hai dấu thời gian và hiển thị nó trong phần tử

Trong trường hợp của chúng tôi, nó hiển thị nó trong phần tử


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

5 trong trang hiển thị

<h5 style="color: #0af53a" id="numCount"><h5>h5>h5>


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

0

Cuối cùng, chúng ta có phương thức


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

6. Điều này được kích hoạt khi cơ thể tải thuộc tính


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

4 của cơ thể trên trang hiển thị

Khi các sự kiện (_______7_______8) chứa trong các phương thức


php
require_once "connection.php";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $password = trim($_POST["password"]);
    $phone = trim($_POST["PhoneNo"]);
    $sql = "SELECT * FROM customers WHERE PhoneNo = '$phone' AND password = '$password'";
        $stmt = $mysqli->query($sql);
            if($stmt->num_rows>0){
                header("Location: https://sacco.terrence-aluda.com/sacco/display.html");
            }
}
$mysqli->close();
?>

9 được phát hiện, phương thức

Login -> [Backend aunthentication] -> Display -> (If user is inactive) -> Login

0 được gọi để đặt lại bộ hẹn giờ để người dùng vẫn đăng nhập

Đây là mã JavaScript đầy đủ


<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="assets/images/logo-sacco.png" type="image/x-icon">
  <title>Sign Page | T-Banktitle>

  

<body onload="startCountdown()" style="background-color: rgba(46, 51, 52, 1)">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
    integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
    crossorigin="anonymous">script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
    integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
    crossorigin="anonymous">script>
  <link rel="stylesheet" type="text/css" href="/sacco/style/home.css">
  head>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #008081">
      <div class="container-fluid">
        <p>


          <button style="z-index: 2" type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fa fa-home ">i>
            <span><a href="https://sacco.terrence-aluda.com/">Home Pagea>span>
          button>
        <div class="d-flex justify-content-center" style="padding: 2%; text-align: center; background-color: #008081">
          <h1 style="color: white">T-BANKh1>
        div>
        p>
      div>
    nav>
    <div class="d-flex align-items-center justify-content-center vw-60 vh-70" style="padding-bottom: 3vh">
      <div class="card border-dark  container">
        <div class="card-body border-dark row" style="background-color: #035050">
                      <p class="card-text">
                        <h6 class="text-white">The page will take you to the login page afterh6> <h5 style="color: #0af53a" id="numCount"><h5> <h6 class="text-white">seconds of inactivity.h6>
                      p>
        div>
      div>
    div>
  div>
  div>
  div>
body>

<script src="https://sacco.terrence-aluda.com/sacco/js/autologout.js">script>

html>

1

Lĩnh vực nghiên cứu trọng điểm

Mã không theo dõi các trang trong các tab khác nhau. Ví dụ: nếu bạn đã đăng nhập vào cùng một trang trong các tab khác nhau, các sự kiện chỉ đặt lại thời gian trong tab đang hoạt động. Điều này có nghĩa là tab khác sẽ vẫn đăng xuất người dùng. Mục tiêu là đặt lại bộ đếm thời gian cho tất cả các tab

Sau khi đọc nó, bạn có thể đi sâu vào nó và cải thiện điều đó. Kho lưu trữ GitHub để đóng góp cho mã được tìm thấy tại đây

Phần kết luận

Chúng tôi đã xem xét việc tạo tính năng tự động đăng xuất bằng JavaScript thuần túy. Chúng tôi cũng đã xem xét chi tiết hoạt động của các tệp và mã JavaScript

Dữ liệu riêng tư của người dùng rất quan trọng. Điều quan trọng là không để ai khác xem thông tin cá nhân của người khác. Tính năng tự động đăng xuất là một giải pháp tốt cho điều đó

Làm cách nào để đặt thời gian chờ không hoạt động trong JavaScript?

var idleInterval = setInterval("timerIncrement()", 1000); // Bỏ bộ hẹn giờ nhàn rỗi khi di chuyển chuột. // Hàm được gọi mỗi giây.

Làm cách nào để kéo dài thời gian chờ của phiên trong JavaScript?

Câu trả lời .

Tạo một bảng cơ sở dữ liệu với các trường UserId, giá trị SessionTimeOut (ví dụ: 13 phút kể từ bây giờ)

Mỗi khi một trang tải và trên mỗi lần đăng lại, giá trị của bảng SessionTimeOut được cập nhật thành now() + 13 phút

Trên trang của bạn, hãy viết một trường ẩn lưu trữ giá trị SessionTimeOut

Làm thế nào để thời gian chờ nhàn rỗi phát hiện người dùng không hoạt động để tự động đăng xuất?

Làm cách nào để phát hiện người dùng không hoạt động để tự động đăng xuất bằng cách sử dụng thời gian chờ không hoạt động trong JavaScript, React, Angular, v.v.? .

Triển khai bộ hẹn giờ nhàn rỗi trên nhiều tab. .

Bước 1. Tạo trình xử lý tương tác người dùng. .

Bước 2. Thêm khoảng thời gian để theo dõi thời gian chờ. .

Bước 3. Thêm gọi lại thời gian chờ. .

Bước 4. Dọn dẹp

Làm cách nào để ngăn thời gian chờ của phiên trong JavaScript?

Làm cách nào để ngăn chức năng hết thời gian chờ của javascript? .

Tăng thời gian chờ, hoặc

loại bỏ hoàn toàn các chức năng hết thời gian chờ, hoặc

mô phỏng hoạt động, ngay cả khi cửa sổ không nằm trong tiêu điểm, để kích hoạt đặt lại thời gian chờ

programming javascript

Tự động đăng xuất sau 15 phút không hoạt động trong javascript

Điều kiện tiên quyết

Thông tin đăng nhập

Thực hiện

Khái niệm cơ bản

Ngày 14 tháng 10 năm 2021

điều kiện tiên quyết

Tổng quan ngắn gọn

Bắt đầu

Tập lệnh đăng nhập PHP

Làm việc của ba tập tin

JavaScript

Lĩnh vực nghiên cứu trọng điểm

Phần kết luận

Làm cách nào để đặt thời gian chờ không hoạt động trong JavaScript?

Làm cách nào để kéo dài thời gian chờ của phiên trong JavaScript?

Làm thế nào để thời gian chờ nhàn rỗi phát hiện người dùng không hoạt động để tự động đăng xuất?

Làm cách nào để ngăn thời gian chờ của phiên trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội