สร้างระบบ Login และจัดการผู้ใช้งาน ฟรี! ด้วย Google Apps Script และ Google Sheets

หากคุณกำลังสร้าง Web App สำหรับใช้งานภายในองค์กร, ระบบส่งงานของนักเรียน, หรือโปรเจกต์ขนาดเล็ก และต้องการระบบ Login (เข้าสู่ระบบ) เพื่อจำกัดสิทธิ์การเข้าถึงข้อมูล แต่ไม่อยากเสียเงินเช่า Server หรือตั้งค่า Database ให้วุ่นวาย… Google Apps Script (GAS) + Google Sheets คือพระเอกในงานนี้ครับ!

บทความนี้จะพาคุณไปสร้างระบบเข้าสู่ระบบและตรวจสอบสิทธิ์ผู้ใช้งานแบบง่ายๆ โดยใช้ Google Sheets เป็นฐานข้อมูลเก็บ Username และ Password ครับ

💡 หลักการทำงาน (System Flow)

ฐานข้อมูล (Database): ใช้ Google Sheets เก็บข้อมูลผู้ใช้งาน (Username, Password, ชื่อ, สิทธิ์การใช้งาน)
หน้าเว็บ (Frontend): สร้างฟอร์ม Login ด้วย HTML/CSS เพื่อรับค่าจากผู้ใช้
ระบบหลังบ้าน (Backend): ใช้ Google Apps Script รับค่าจากหน้าเว็บ ไปค้นหาใน Google Sheets ว่าตรงกันหรือไม่ แล้วส่งผลลัพธ์กลับมา

🛠️ ขั้นตอนที่ 1: เตรียมฐานข้อมูล (Google Sheets)

สร้าง Google Sheets ขึ้นมาใหม่ ตั้งชื่อไฟล์ว่า User_Database
เปลี่ยนชื่อแผ่นงาน (Sheet) ด้านล่างเป็น Users
สร้างหัวข้อคอลัมน์ในแถวที่ 1 ดังนี้:
- A1: Username
- B1: Password
- C1: Role (สิทธิ์การใช้งาน เช่น admin, user)
- D1: Name (ชื่อผู้ใช้งาน)
ลองกรอกข้อมูลจำลองลงไปในแถวที่ 2 และ 3 เพื่อใช้ทดสอบ

💻 ขั้นตอนที่ 2: เขียนโค้ดหลังบ้าน (Backend – Code.gs)

ในหน้า Google Sheets ไปที่เมนู ส่วนขยาย (Extensions) > Apps Script
ลบโค้ดเดิมทิ้ง แล้ววางโค้ดชุดนี้ลงไปในไฟล์ Code.gs:

JavaScript

// 1. ฟังก์ชันสำหรับสร้างหน้าเว็บ HTML
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('ระบบเข้าสู่ระบบ')
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// 2. ฟังก์ชันตรวจสอบ Username และ Password
function checkLogin(username, password) {
  // เชื่อมต่อกับ Sheet ชื่อ 'Users'
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Users');
  const data = sheet.getDataRange().getValues();
  
  // วนลูปตรวจสอบข้อมูล (เริ่มที่ i=1 เพื่อข้ามหัวตาราง)
  for (let i = 1; i < data.length; i++) {
    const dbUsername = data[i][0];
    const dbPassword = data[i][1];
    
    // ถ้า Username และ Password ตรงกัน
    if (dbUsername === username && dbPassword === password) {
      return { 
        success: true, 
        role: data[i][2], 
        name: data[i][3] 
      };
    }
  }
  
  // ถ้าไม่ตรงเลย
  return { 
    success: false, 
    message: 'Username หรือ Password ไม่ถูกต้อง!' 
  };
}

🌐 ขั้นตอนที่ 3: สร้างหน้าเว็บ (Frontend – Index.html)

ในหน้า Apps Script กดเครื่องหมาย + (เพิ่มไฟล์) > เลือก HTML
ตั้งชื่อไฟล์ว่า Index (ต้องพิมพ์ตัวพิมพ์ใหญ่-เล็กให้ตรงกับใน Code.gs)
วางโค้ดด้านล่างนี้ลงไป:

HTML

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body { font-family: 'Sarabun', sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
    .login-container { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 400px; text-align: center; }
    input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    button { width: 100%; padding: 10px; background-color: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
    button:hover { background-color: #1557b0; }
    #message { color: red; margin-top: 10px; }
    #dashboard { display: none; } /* ซ่อนหน้าแดชบอร์ดไว้ก่อน */
  </style>
</head>
<body>

  <div class="login-container" id="loginForm">
    <h2>เข้าสู่ระบบ</h2>
    <input type="text" id="username" placeholder="ชื่อผู้ใช้งาน (Username)" required>
    <input type="password" id="password" placeholder="รหัสผ่าน (Password)" required>
    <button onclick="login()">Login</button>
    <div id="message"></div>
  </div>

  <div class="login-container" id="dashboard">
    <h2 id="welcomeText">ยินดีต้อนรับ</h2>
    <p>สิทธิ์การใช้งานของคุณคือ: <strong id="roleText"></strong></p>
    <button style="background-color: #dc3545;" onclick="logout()">ออกจากระบบ</button>
  </div>

  <script>
    function login() {
      const user = document.getElementById('username').value;
      const pass = document.getElementById('password').value;
      const msg = document.getElementById('message');
      
      if(user === '' || pass === '') {
        msg.innerText = 'กรุณากรอกข้อมูลให้ครบถ้วน';
        return;
      }
      
      msg.innerText = 'กำลังตรวจสอบข้อมูล...';
      
      // เรียกใช้ฟังก์ชัน checkLogin ฝั่ง Code.gs
      google.script.run
        .withSuccessHandler(function(response) {
          if (response.success) {
            // ถ้ารหัสผ่านถูก ซ่อนหน้า Login และโชว์หน้า Dashboard
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('dashboard').style.display = 'block';
            document.getElementById('welcomeText').innerText = 'ยินดีต้อนรับคุณ ' + response.name;
            document.getElementById('roleText').innerText = response.role;
          } else {
            // ถ้ารหัสผ่านผิด
            msg.innerText = response.message;
          }
        })
        .checkLogin(user, pass);
    }

    function logout() {
      // โหลดหน้าเว็บใหม่เพื่อรีเซ็ตสถานะ
      window.top.location.href = "<?= ScriptApp.getService().getUrl() ?>";
    }
  </script>

</body>
</html>

🚀 ขั้นตอนที่ 4: การ Deploy เพื่อใช้งานจริง

คลิกปุ่ม การทำให้ใช้งานได้ (Deploy) ที่มุมขวาบน
เลือก การทำให้ใช้งานได้รายการใหม่ (New deployment)
คลิกไอคอนฟันเฟือง เลือก เว็บแอป (Web app)
ตั้งค่าตามนี้:
- สิทธิ์เรียกใช้ (Execute as): ฉัน (Me)
- ผู้มีสิทธิ์เข้าถึง (Who has access): ทุกคน (Anyone)
กดปุ่ม การทำให้ใช้งานได้ (Deploy) และกดยืนยันสิทธิ์ (Authorize access) ให้เรียบร้อย
คัดลอก URL ของเว็บแอป ไปเปิดในเบราว์เซอร์ได้เลย!

⚠️ ข้อควรระวังด้านความปลอดภัย (สำคัญมาก!)

แม้ว่าระบบนี้จะสะดวกและฟรี แต่ ไม่เหมาะสำหรับข้อมูลที่มีความอ่อนไหวสูง (Sensitive Data) หรือระบบการเงินเด็ดขาด เนื่องจาก:

รหัสผ่านใน Google Sheets ยังเป็น Plain Text (อ่านได้ตรงๆ)
ยังไม่มีระบบจัดการ Session ที่แน่นหนา (ถ้ารีเฟรชหน้าเว็บ อาจจะต้องล็อกอินใหม่)

💡 แนวทางการต่อยอด: หากต้องการความปลอดภัยเพิ่มขึ้น แนะนำให้เขียนฟังก์ชัน Hashing (เข้ารหัสทางเดียว) เช่น SHA-256 เพื่อแปลงรหัสผ่านก่อนบันทึกลง Sheets และเมื่อผู้ใช้กรอกรหัสผ่านเข้ามา ก็ให้แปลงเป็น Hash ก่อนนำไปเปรียบเทียบครับ

เพียงเท่านี้ คุณก็จะมีระบบ Login ขนาดย่อมๆ ไว้ต่อยอดทำ Web App ภายในองค์กร หรือระบบ Dashboard ส่วนตัวได้อย่างง่ายดายแล้วครับ!

Post Views: 18