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

13/11/202313/11/2023 giaoanppt 0 Comments google apps script, google sheet

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>

Code file “Code.gs”

Code file “header.html”

Code file “login.html”

Code file “main.html”

Code file “page1.html”

Xem video hướng dẫn