Google sheet Apps script Webapp | Login Form with Log nhật ký thông tin đăng nhập

05/03/2024 giaoanppt

Giáo án link (giaoan.link) chia sẻ đến các bạn một project mới Google sheet Apps script Webapp | Login Form with Log nhật ký thông tin đăng nhập. Với project này, khi user đăng nhập sẽ được lưu lại thông tin như: ngày giờ đăng nhập, địa chỉ ip, ngoài ra bạn có thể ghi thông tin để truyền đến cửa sổ wellcome cho từng user. Dưới đây là code appscript và video hướng dẫn.

Xem thêm các project khác:

Code của “code.gs”

//https://www.youtube.com/netmediaCCTV

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var log = SpreadsheetApp.getActive().getSheetByName('Log')

function loginData(username,password,ipaddress){                                 
  var ss = SpreadsheetApp.getActive().getSheetByName('Admin')
  var data = ss.getDataRange().getDisplayValues()
  var output = data.find(r=>r[0]+r[1] == username+password)

  if(output!=undefined){
    log.appendRow([new Date(),output[2],ipaddress])
  }
  return output
}

Code file “index.html”

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login Examblog</title>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
</head>

<body>
  <div id="pageA">
    <div class="container my-3">
      <div class="col-md-6 mx-auto card shadow">
        <div class="card-body p-4">
          <h1 class="text-center"><i class="fa-solid fa-user-lock me-2"></i>Login</h1>
          <form id="myForm" onsubmit="login(this)">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="username" placeholder="User Name" required>
              <label for="floatingInput"><i class="fa-solid fa-circle-user"></i> Username</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="password" placeholder="Password" required>
              <label for="floatingPassword"><i class="fa-solid fa-lock"></i> Password</label>
            </div>
            <button type="submit" class="btn btn-primary btn-lg w-100"><i class="fa-solid fa-right-to-bracket me-2"></i>Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="col-md-6 mx-auto welcome card bg-white shadow my-2 bg" id="pageB" style="display:none">
      <div class="card-body bg-white">
        <div class="h2 form_title text-center mt-3"> Welcome</div>
        <div class="text-center col-md-6 mx-auto">
          <img id="pic" src="" width="70px">
        </div>
        <div class="h4 text-center my-3 text-primary fw-bold"><span id="admin"></span>
        </div>
        <div class="h7 text-center my-3 text-primary fw-bold" ><span id="info" style="color: black"></span>
        </div>
        <div class="text-center">
          <button class="btn btn-primary" onclick="logout()"><i class="fa-solid fa-house"></i> Logout</button>
        </div>
      </div>
    </div>
  </div>
 <div class="copyright mb-3"></div>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 
  <?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
</body>
</html>

Code file “js.html”

<script>
  window.onload = ()=>{
    loadIP()
    setFooter()
  }

  let ipaddress
  function loadIP(){
  fetch('https://api.ipify.org?format=json')
    .then(response => response.json())
    .then(data => {
        ipaddress=data.ip;
    })
    .catch(error => {
        console.log('Error:', error);
    });
  }

     
  	function login(){
      event.preventDefault()
      let username = document.getElementById("username").value
      let password = document.getElementById("password").value
         Swal.fire({
            position: 'top',
            icon: 'info',
            title: 'Loading...',
            showConfirmButton: false,
          })
          Swal.showLoading()
            google.script.run.withSuccessHandler((dataArray)=>{
          if(dataArray !== null){
               // console.log(dataArray)
           Swal.fire({
              position: 'top',
              icon: 'success',
              title: 'Success',
              showConfirmButton: false,
              timer: 1500
            })
            document.getElementById("pageA").style.display = "none";
            document.getElementById("pageB").style.display = "block";
            document.getElementById("myForm").reset();
            document.getElementById("admin").innerHTML = dataArray[2]
            document.getElementById("pic").src = dataArray[3]
            document.getElementById("info").innerHTML = dataArray[4]
              }else{
                Swal.fire({
                position: 'top',
                icon: 'error',
                title: 'Không tìm thấy thông tin!!',
                showConfirmButton: false,
                timer: 1500
              })
              }
          }).loginData(username,password,ipaddress);
          }

        function logout(){
          Swal.fire({
          position: 'top',
          title: 'Are you sure?',
          text: "Logout!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#116bfd',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes!'
        }).then((result) => {
          if (result.isConfirmed) {
            document.getElementById("pageB").style.display = "none";
            document.getElementById("pageA").style.display = "block";
          }
        })
        }   

  function setFooter(){
  document.querySelector('.copyright').innerHTML = '<div class="text-center"><a href="https://www.facebook.com/giaoanppt" target="_blank"><i class="fa-brands fa-facebook fa-2x"></i></a></div><center style="font-size:12px;">NetmediaCCTV &copy; 2024 <a style="color:gray;text-decoration:none" href="https://giaoan.link" target="_blank"> Contact</a></center>'
  }
	</script>

Code file “css.html”

<style>
@import url('https://fonts.googleapis.com/css2?family=Arial&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
</style>

Code của “code.gs”

Code file “index.html”

Code file “js.html”

Code file “css.html”

Video hướng dẫn

giaoanppt