Login-Logout + Session + log

โค้ด Google Apps Script สำหรับระบบ Login-Logout ที่ใช้ Username และ Password เพื่อตรวจสอบกับฐานข้อมูลใน Google Sheet, ใช้ Session สำหรับเก็บค่าการเข้าสู่ระบบ และบันทึกข้อมูล วันที่, เวลา, ชื่อผู้ใช้, และ IP ลงใน Sheet log:

การตั้งค่า Google Sheet

1. UserData: ใช้เก็บข้อมูลผู้ใช้ (Username และ Password)

Username

Password

2. log: ใช้บันทึกการเข้าใช้งาน

Date

Time

Username

Status

Date

Time

โค้ด Google Apps Script

1. สร้าง Script

เปิด Apps Script จาก Google Sheet
วางโค้ดด้านล่างในไฟล์ Code.gs


function doGet() {
  return HtmlService.createHtmlOutputFromFile('login')
    .setTitle('Login System')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


// ฟังก์ชัน Login
function serverLogin(username, password, ip) {
 
  // ตรวจสอบข้อมูลใน Google Sheet
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('userData');
  const rows = sheet.getDataRange().getDisplayValues();
  const user = rows.find(row => row[0] === username && row[1] === password);

  if (user) {
    const now = new Date();
    const logSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('log');

    // บันทึก Log
    logSheet.appendRow([
      Utilities.formatDate(now, "GMT+7", "yyyy-MM-dd"),
      Utilities.formatDate(now, "GMT+7", "HH:mm:ss"),
      username,
      ip || "Unknown IP",
      "Login"
    ]);

    return { success: true, message: `Login Success!`, name: username };
  } else {
    return { success: false, message: 'Invalid username or password.' };
  }
}


// ฟังก์ชัน Logout
function serverLogout(username) {
  const now = new Date();
  const logSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("log");
  const rows = logSheet.getDataRange().getDisplayValues();
  const index = rows.findIndex(row => row[2] === username && row[4] === "Login")
  
  // บันทึก Logout
  if(index !== -1){
    logSheet.getRange(index+1,5,1,3).setValues([[
      "Logout",
      Utilities.formatDate(now, "GMT+7", "yyyy-MM-dd"),
      Utilities.formatDate(now, "GMT+7", "HH:mm:ss"),
    ]]);
    return { success: true, message: "You have logged out successfully." };
  }else{
    return { success: false, message: "Invalid username." };
  }
  
}

2. ตั้งค่าการใช้งาน Web App

ไปที่ Deploy > New Deployment
เลือก Web App
- Who has access: ตั้งเป็น "Anyone"

3. ฝั่ง Frontend (HTML)

ใช้ HTML + JavaScript สำหรับ Login และ Logout:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login System</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div id="login-section">
      <h2>Login</h2>
      <div class="mb-3">
        <label for="username">Username</label>
        <input type="text" id="username" class="form-control">
      </div>
      <div class="mb-3">
        <label for="password">Password</label>
        <input type="password" id="password" class="form-control">
      </div>
      <button class="btn btn-success" onclick="login()">Login</button>
    </div>

    <div id="logout-section" class="d-none mt-5">
      <h2>Welcome, <span id="currentUser"></span></h2>
      <button class="btn btn-danger mt-3" onclick="logout()">Logout</button>
    </div>
  </div>

  <script>
    
    window.onload = checkLoginStatus;

    function login() {
      const username = document.getElementById('username')
      const password = document.getElementById('password')

      fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => {
        const userIp = data.ip;

        google.script.run
          .withSuccessHandler((response) => {
            if (response.success) {
              username.value = ""
              password.value = ""

              // เก็บสถานะล็อกอินใน Local Storage
              const userInfo = JSON.stringify({name:response.name, isLoggedIn: "true" })
              localStorage.setItem("isLoggedInMyApp", userInfo);
              
              checkLoginStatus()

              alert(response.message);
            } else {
              alert(response.message);
            }
          })
          .serverLogin(username.value, password.value, userIp);
      });

    }


    function checkLoginStatus() {
      const loggedIn = localStorage.getItem("isLoggedInMyApp");
      const userInfo = JSON.parse(loggedIn)
      console.log(userInfo)
      if (userInfo) {
        document.getElementById("login-section").classList.add("d-none");
        document.getElementById("logout-section").classList.remove("d-none");
        document.getElementById("currentUser").innerText = userInfo.name;
      } else {
        document.getElementById("login-section").classList.remove("d-none");
        document.getElementById("logout-section").classList.add("d-none");
      }

    }

    
    function logout() {
      const username = document.getElementById('currentUser').innerText;
      google.script.run
        .withSuccessHandler((response) => {
          if (response.success) {
            localStorage.removeItem("isLoggedInMyApp");
            showLoginSection();
            alert(response.message);
          } else {
            alert('Error logging out.');
          }
        })
        .serverLogout(username);
    }

    function showLoginSection() {
      document.getElementById('currentUser').innerText = ""
      document.getElementById('login-section').classList.remove('d-none');
      document.getElementById('logout-section').classList.add('d-none');
    }

  </script>
</body>
</html>

การทำงาน

เมื่อผู้ใช้กรอก Username และ Password และกดปุ่ม Login:
- ระบบจะตรวจสอบข้อมูลกับ Sheet userData
- หากสำเร็จจะสร้าง Session และบันทึก วัน, เวลา, ชื่อผู้ใช้, และ IP ลงใน Sheet log
เมื่อกดปุ่ม Logout:

ล้างข้อมูลใน Session

ใช้ด้วยกัน ลงทะเบียนสมาชิก + เข้ารหัสรหัสผ่าน