23/10/2025

Latest:

592 Lượt xem

Học Ms excel Kỹ năng vi tính

Google sheet, Apps script, Web app | Security Login form, Login-Logout, Diamic web

13/11/2023 giaoanppt

Giáo án link (giaoan.link) chia sẻ đến các bạn project về Google sheet, Apps script, Web app | Security Login form, Login-Logout, Diamic web. Đối với project này, khi User đăng nhập thành công sẽ được đưa đến một giao diện Diamic web – gồm head der và các menu con cùng Logout.

Bạn có thể xem video hướng dẫn bên dưới cùng code app script để bạn tham khảo và phát triển.

Xem các project excel khác:

Code file “Code.gs”

let MySheets = SpreadsheetApp.getActiveSpreadsheet();
let LoginSheet = MySheets.getSheetByName("login");

function doGet(e){
  var output = HtmlService.createTemplateFromFile('login');
  var sess = getSession(); 
  if (sess.loggedIn){
    let page = e.parameter.page;         
      if (page == null) page = "main";     
      var output = HtmlService.createTemplateFromFile(page);  
      return output.evaluate();  
   // output = HtmlService.createTemplateFromFile('main');
  }
    return output.evaluate();
}

function myURL(){
  return ScriptApp.getService().getUrl();
}

function setSession(session) {
  var sId = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  uProp.setProperty(sId, JSON.stringify(session));
}

function getSession(){
  var sId = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  var sData = uProp.getProperty(sId);
  return sData ? JSON.parse(sData): {loggedIn: false};
}


function loginUser(pUID, pPassword) {
  if (loginCheck (pUID, pPassword)) {
    var sess= getSession();
    sess.loggedIn = true;
    setSession(sess);
      return 'success';
      }else {
        return 'failure';
      }
}

function logoutUser() { 
  var sess = getSession();
  sess.loggedIn = false; 
  setSession(sess);
}

function loginCheck (pUID, pPassword){
  let LoginPass = false;
  let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
  
  ReturnData.forEach(function (range) {
    let StartRow = range.getRow();
    let TmpPass = LoginSheet.getRange (StartRow, 2).getValue();
    if (TmpPass == pPassword){
      LoginPass = true;
      }
  });

  return LoginPass;
}


function OpenPage(PageName){
  return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}


//Header for main page
function includeHeader(){
   return HtmlService.createTemplateFromFile("header").evaluate().getContent();
}

Code file “header.html”


<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">  

 <style>
    body {
      background-color:  #ffffff; //Background color
    }

    .mycolor {
      background-color: #6d3b89;//Color header
    }

    .color {
      color:red; //#6d3b89;
    }
    
    .customlink{
      color: white;     
      vertical-align: middle;
      padding: 5px;
      text-decoration: none;
    }
    .customlink:hover, customlink:active,customlink:visited {
      font-weight: bold;
      color: white;     
      vertical-align: middle;
      text-decoration: none;
    }  
 
  </style>

 <script>
    
    function logout()
    {
      google.script.run.withSuccessHandler(AfterLogOut).logoutUser();
    }
    function AfterLogOut()
    {
         document.getElementById("myid").click();
    }

  </script> 
  <nav class="navbar navbar-expand-lg mycolor px-2" >
    <h3 class=" text-white"><a href="https://giaoan.link" target="_blank"><img src="https://giaoan.link/wp-content/uploads/2021/10/logo-giaoan-2021v2.gif" width="100 px"/></a></h3>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="customlink active "  href="<?= myURL(); ?>">Main</a>
          </li>
          <li class="nav-item">
            <a class="customlink" href="<?= myURL(); ?>?page=page1">Page 1</a>
          </li>        
    </ul>
    <button class="btn  float-end px-5 text-white" type="button" onclick="logout()">Log Out</button>
    <a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a> 
  </nav>
</head>

Code file “login.html”

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
  <style>
    body {
      background-color:  rgba(58, 103, 177, 30%);
    }

    .card {
      width: 400px;
      margin: auto;
      margin-top: 30px;
    }

    .input-group-text {
      width: 100px;
      display: inline-block;
    }

    .mycolor {
      background-color: #3a67b1; 
    }

    .color {
      color: #3a67b1; //#6d3b89;
    }

    .img {
      width: 60px;
      margin: auto;
      display: inline-block;
    }
  </style>  <!-- Add CSS -->
  <script>
    function login() {
      var username = document.getElementById("uid").value;
      var password = document.getElementById("pass").value;    
      google.script.run.withSuccessHandler(function(response) {    
        if (response === "success") {
        document.getElementById("myid").click();
        } else {
          $("#RetMsg").removeClass("alert-danger").removeClass("alert-success").addClass("alert-danger");
          $("#RetMsg").html("Invalid User ID or Password");
          $("#RetMsg").show();
        }
        }).loginUser(username, password);
    }

    function ClearText(){
        $('#RetMsg').html("");
        $('#RetMsg').hide();
        $('#RetMsgReg').html("");
        $('#RetMsgReg').hide();
    }

    function OpenRegisterPage(){
          google.script.run.withSuccessHandler(ShowRegister).OpenPage("register");
    }

    function ShowRegister(data){
      $('#DivLogin').hide();
      $('#DivRegister').html(data);
    }
  </script> 
</head>

<body>
  <div id="DivLogin" class="card shadow rounded-4 rounded ">
    <h5 style="text-align: center;" class="card-header bg-secondary- text-white p-3 mycolor">ĐĂNG NHẬP</h5>
    <a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>
    <div class="card-body p-4">
      <center>
        <i class="bi bi-person-circle fs-1 color"></i>
      </center>
      <br>

      <div class="input-group mb-3">
        <span class="input-group-text" >User</span>
        <input type="text" class="form-control" id="uid" required placeholder="User ID" onchange="ClearText()">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" >Password</span>
        <input type="password" class="form-control" id="pass" required placeholder="Password" onchange="ClearText()" >
      </div>
      <br>

      <div id="RetMsg" class="alert alert-danger " style="display:none" role="alert"> </div>
      <button type="button" onclick="login()"  class="btn btn-primary- mycolor float-end px-5 text-white" >Login</button>    
    </div>    
  </div> 
  
</body>
</html>

Code file “main.html”

<!DOCTYPE html>
<html>
<?!=includeHeader();?>
<body >  
  <center>    
    <h1>Welcome to Home Page</h1>
  </center>
</body>
</html>

Code file “page1.html”

<!DOCTYPE html>
<html>
<?!=includeHeader();?>
  <body>   
        <div class="h4" style="text-align:right; color: red;">Welcome to Page 1</div>
        <iframe src="https://script.google.com/macros/s/AKfycby2NG9eWiOMFgJcChEq1IJ6zsG-wxrcBYJ1JVkaoZsKoleUTgvGF8mTuxY2I4cLJzTB/exec" style="border:0px solid blue; height: 600px; width: 100%;" title="Danh sách Project Excel và Google sheet"></iframe>
        <a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>  
  </body>
</html>

Xem video hướng dẫn

HƯỚNG DẪN DOWNLOAD TRÊN GIAOAN.LINK, KHÔNG PHẢI YÊU CẦU QUYỀN CHỈNH SỬA

giaoanppt

Giaoan.link trang chia sẽ giáo án điện tử, bài giảng powerpoint, template powerpoint, nguyên liệu làm bài giảng, tài liệu, biểu mẫu miễn phí!