Web app login page downloads files from Google Drive

bysemicon -
0



1. สร้างตารางข้อมูลผู้ใช้






2. สร้างไฟล์ code.gs

     
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}


/********* login ********* */ 
function checkLoginCredentials(username, password) {
    const sheet = SpreadsheetApp.openById("YOUR_SHEET_ID").getSheetByName("Responses"); //ชีต แบบสอบถาม
    const data = sheet.getDataRange().getDisplayValues(); // ดึงข้อมูลทั้งหมดจากชีต
    const shared = checkSheetSharing();

    for (let i = 1; i < data.length; i++) {  // ข้ามแถวแรก (หัวตาราง)
        const storedUsername = data[i][1];  // สมมติว่าชื่อผู้ใช้เก็บในคอลัมน์ที่ 2 (index 1)
        const storedPassword = data[i][3];  // สมมติว่าเก็บรหัสผ่านในคอลัมน์ที่ 4 (index 3)
        
        Logger.log(storedUsername + "/" + username);
        Logger.log(storedPassword + "/" + password);

        if (String(username) === String(storedUsername) && String(password) === String(storedPassword)) {
            if (!shared) {
                return { success: false, msg: 'ยังไม่เปิดให้ดาวน์โหลด!' };
            } else {
                return { success: true, link: 'https://docs.google.com/spreadsheets/d/' + fileSharingID + '/edit?usp=sharing' }; // ลิงก์ Google sheets แชร์ไฟล์
            }
        }
    }

    return { success: false, msg: 'รหัสไม่ถูกต้อง!' }; // ต้องย้ายมานอกลูป
}




/******** Sharing ********** */
const fileSharingID = "YOUR_SHEET_ID"; // ใส่ ID ของไฟล์ Google ชีตที่แชร์

// เปิดแชร์
function enableSharingById() {
  
  const file = DriveApp.getFileById(fileSharingID);
  
  // ตั้งค่าให้ทุกคนที่มีลิงก์สามารถดูได้
  file.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.VIEW);
  Logger.log("แชร์เอกสารสำเร็จ!");

}


//ปิดแชร์
function disableSharingById() {
  
  const file = DriveApp.getFileById(fileSharingID);
  
  // ปิดการแชร์ให้กลับเป็นส่วนตัว
  file.setSharing(DriveApp.Access.PRIVATE, DriveApp.Permission.NONE);
  Logger.log("ปิดการแชร์เอกสารสำเร็จ!");

}



/******** เช็คสถานะการแชร์ ******** */ 
function checkSheetSharing() {

  var file = DriveApp.getFileById(fileSharingID);
  var access = file.getSharingAccess();

  var isShared = access !== DriveApp.Access.PRIVATE;
  Logger.log(isShared)
  Logger.log(isShared ? "This sheet is shared publicly." : "This sheet is private.");
  return isShared;
}


3. สร้างไฟล์ index.html

     
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: url(https://semicon.github.io/img/web/ghost-rider.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .img_center {
          display: block;
          margin-left: auto;
          margin-right: auto;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <img class="img_center mb-3" src="https://semicon.github.io/img/LOGOKRUCHIANgrow.png" alt="GuruChian" width="165">
            <form id="loginForm" onsubmit="loginUser(event)">
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="username" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">Login</button>
            </form>
            <div id="loginMessage" class="mt-3 text-center"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function loginUser(event) {
            event.preventDefault();
            const loginMessage = document.getElementById('loginMessage');
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            loginMessage.innerHTML = `<div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>`;
            google.script.run.withSuccessHandler(handleLoginResponse).checkLoginCredentials(username, password);
        }

        function handleLoginResponse(response) {
            //console.log(response)
            const loginMessage = document.getElementById('loginMessage');
            loginMessage.innerHTML = '';
            if (response.success) {
                loginMessage.innerHTML = `<div class="alert alert-success">Login successful!</div>`;
                setTimeout(() => { window.location.href = response.link; }, 1500);
            } else {
                loginMessage.innerHTML = '<div class="alert alert-danger">'+response.msg+'</div>';
            }
        }
    </script>
    
</body>
</html>


⏰ เพิ่ม Trigger สำหรับตั้งเวลาเปิด/ปิดการแชร์อัตโนมัติ

https://guruchian.blogspot.com/2025/04/appscript.html


ตัวอย่าง







Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า