Membuat Sistem Login Sederhana dengan Google Spreadsheet — Autentikasi Web App

Sistem Login dengan Spreadsheet

Meskipun Google Spreadsheet bukan database yang paling aman, Anda tetap bisa membuat sistem login sederhana untuk web app internal atau prototipe. Sistem ini menggunakan spreadsheet sebagai tempat penyimpanan username dan password (dengan hash sederhana). Cocok untuk: admin panel sederhana, portal anggota, dan aplikasi internal tim.

Struktur Spreadsheet User

Buat sheet bernama "Users" dengan kolom: ID, Username, Password (hashed), Nama Lengkap, Email, Role, Tanggal Daftar.

Kode Apps Script untuk Login

// Fungsi hash sederhana (untuk prototipe, gunakan bcrypt untuk production)
function simpleHash(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    var char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert ke 32bit integer
  }
  return Math.abs(hash).toString(16);
}

// Login
function doPost(e) {
  var data = JSON.parse(e.postData.contents);
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Users");
  var users = sheet.getDataRange().getValues();
  var headers = users[0];
  
  for (var i = 1; i < users.length; i++) {
    if (users[i][1] === data.username && users[i][2] === simpleHash(data.password)) {
      return ContentService.createTextOutput(JSON.stringify({
        success: true,
        user: {
          id: users[i][0],
          username: users[i][1],
          nama: users[i][3],
          email: users[i][4],
          role: users[i][5]
        },
        token: simpleHash(data.username + ":" + new Date().getTime())
      })).setMimeType(ContentService.MimeType.JSON);
    }
  }
  
  return ContentService.createTextOutput(JSON.stringify({
    success: false,
    message: "Username atau password salah"
  })).setMimeType(ContentService.MimeType.JSON);
}

// Registrasi
function doPut(e) {
  var data = JSON.parse(e.postData.contents);
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Users");
  var users = sheet.getDataRange().getValues();
  
  // Cek duplikasi
  for (var i = 1; i < users.length; i++) {
    if (users[i][1] === data.username) {
      return ContentService.createTextOutput(JSON.stringify({
        success: false,
        message: "Username sudah digunakan"
      })).setMimeType(ContentService.MimeType.JSON);
    }
  }
  
  sheet.appendRow([
    users.length,
    data.username,
    simpleHash(data.password),
    data.nama,
    data.email,
    "user",
    new Date().toLocaleDateString('id-ID')
  ]);
  
  return ContentService.createTextOutput(JSON.stringify({
    success: true,
    message: "Registrasi berhasil!"
  })).setMimeType(ContentService.MimeType.JSON);
}

Implementasi di Frontend

<div id="loginForm">
  <h2>Login</h2>
  <input type="text" id="username" placeholder="Username">
  <input type="password" id="password" placeholder="Password">
  <button onclick="login()">Masuk</button>
  <p>Belum punya akun? <a href="#" onclick="showRegister()">Daftar</a></p>
</div>

<script>
var API_URL = "URL_APP_SCRIPT";

function login() {
  fetch(API_URL + "?action=login", {
    method: 'POST',
    body: JSON.stringify({
      username: document.getElementById('username').value,
      password: document.getElementById('password').value
    })
  })
  .then(r => r.json())
  .then(res => {
    if (res.success) {
      localStorage.setItem('user', JSON.stringify(res.user));
      localStorage.setItem('token', res.token);
      window.location.href = "dashboard.html";
    } else {
      alert(res.message);
    }
  });
}
</script>

Tips Keamanan

• Hash Password: Gunakan fungsi hash yang lebih kuat seperti SHA-256 untuk production.
• HTTPS: Pastikan web app diakses melalui HTTPS (Blogger sudah menyediakan HTTPS).
• Session Token: Gunakan token dengan expiry time untuk mencegah replay attack.
• Rate Limiting: Batasi percobaan login (misal: max 5 kali dalam 10 menit).
• Spreadsheet Privat: Jangan bagikan spreadsheet ke publik — hanya akses melalui script.

Kesimpulan

Sistem login dengan Google Spreadsheet adalah solusi cepat untuk prototipe dan aplikasi internal. Untuk aplikasi production dengan data sensitif, gunakan database dedicated dan autentikasi yang lebih aman. Spreadsheet cocok untuk: admin panel sederhana, portal berita, dan aplikasi komunitas skala kecil.

Tutorial Sistem Login Google Spreadsheet & Apps Script — Web App Builder Collection

Share :