Membuat Web Login Sederhana dengan Google Apps Script dan Spreadsheet

Aplikasi web sering kali memerlukan proses autentikasi untuk memastikan bahwa hanya pengguna yang sah yang dapat mengakses konten atau fitu...

Aplikasi web sering kali memerlukan proses autentikasi untuk memastikan bahwa hanya pengguna yang sah yang dapat mengakses konten atau fitur tertentu. Salah satu cara termudah untuk mengimplementasikan login berbasis web adalah dengan menggunakan Google Apps Script, sebuah platform yang terintegrasi dengan Google Workspace yang memungkinkan kita untuk mengelola data dengan mudah menggunakan Spreadsheet dan Script. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat aplikasi login sederhana dengan Google Apps Script, di mana data pengguna diambil dari Spreadsheet, dan setelah berhasil login, pengguna akan melihat informasi mereka beserta gambar profil dummy dari Unsplash.

Mengapa Menggunakan Google Apps Script dan Spreadsheet?

Google Apps Script adalah salah satu cara paling sederhana dan efektif untuk mengotomatisasi pekerjaan dan membuat aplikasi web sederhana yang berfungsi dengan Google Workspace, termasuk Google Sheets, Google Drive, Gmail, dan banyak lagi. Beberapa alasan mengapa Google Apps Script dan Spreadsheet adalah pilihan yang baik untuk aplikasi login sederhana adalah:

1. Integrasi dengan Google Sheets: Anda dapat menggunakan Google Sheets sebagai basis data pengguna Anda. Google Sheets memungkinkan penyimpanan dan manipulasi data yang mudah serta mendukung kolaborasi secara real-time.
2. Cepat dan Mudah Dikembangkan: Google Apps Script adalah platform yang berbasis JavaScript, sehingga jika Anda sudah familiar dengan JavaScript, Anda dapat dengan cepat membangun aplikasi yang fungsional.
3. Hosting Gratis di Google: Aplikasi yang Anda buat dengan Google Apps Script dapat di-host secara gratis dan diakses melalui URL khusus.
4. Keamanan Google: Karena aplikasi ini berada di ekosistem Google, Anda dapat memanfaatkan fitur keamanan yang sudah ada, termasuk autentikasi pengguna melalui Google Account.

Langkah 1: Membuat Spreadsheet Data Pengguna

Langkah pertama adalah membuat Spreadsheet yang berisi informasi pengguna yang akan digunakan untuk proses login. Berikut adalah contoh struktur data yang perlu Anda masukkan dalam Spreadsheet, dengan nama worksheet "user":

Username	Password	Name	Email	pp_url
john_doe	123456	John Doe	john.doe@example.com	https://source.unsplash.com/150x150/?person,man
jane_smith	password	Jane Smith	jane.smith@example.com	https://source.unsplash.com/150x150/?person,woman
alice_wong	7891011	Alice Wong	alice.wong@example.com	https://source.unsplash.com/150x150/?person,asian-woman
bob_jones	secret	Bob Jones	bob.jones@example.com	https://source.unsplash.com/150x150/?person,man,smile
charlie_brown	654321	Charlie Brown	charlie.brown@example.com	https://source.unsplash.com/150x150/?person,man,glasses

Tabel di atas berisi kolom Username, Password, Name, Email, dan pp_url (Profile Picture URL). Data ini akan digunakan untuk proses login di aplikasi kita. Setiap pengguna memiliki username dan password yang unik, serta gambar profil dummy yang diambil dari Unsplash dengan URL yang berbeda untuk setiap pengguna.

Langkah 2: Membuat Script Login dengan Google Apps Script

Setelah data pengguna siap, kita bisa melanjutkan dengan membuat Google Apps Script yang akan menangani login dan menampilkan informasi pengguna. Berikut adalah contoh kode Google Apps Script untuk memvalidasi login dan menampilkan data pengguna setelah login berhasil:

Kode Google Apps Script:

// Fungsi untuk menampilkan form login
function doGet() {
  return HtmlService.createHtmlOutputFromFile('LoginForm');
}
// Fungsi untuk memvalidasi login dari Spreadsheet
function login(username, password) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("user");
  var data = sheet.getDataRange().getValues();
  for (var i = 1; i < data.length; i++) { // mulai dari 1 untuk menghindari header
    if (data[i][0] == username && data[i][1] == password) {
      return { 
        success: true, 
        name: data[i][2], 
        email: data[i][3], 
        pp_url: data[i][4]
      };
    }
  }
  return { success: false };
}

Kode di atas terdiri dari dua bagian penting:

1. Fungsi doGet(): Fungsi ini digunakan untuk memuat form login ketika aplikasi diakses. doGet() adalah fungsi utama yang digunakan di Google Apps Script untuk menangani request HTTP GET.
2. Fungsi login(): Fungsi ini digunakan untuk memvalidasi login dengan mencocokkan username dan password yang dimasukkan pengguna dengan data yang ada di Spreadsheet. Jika login berhasil, data seperti nama, email, dan URL gambar profil akan dikembalikan. Jika gagal, fungsi ini mengembalikan success: false.

Langkah 3: Membuat Form HTML untuk Login

Setelah script Apps Script selesai, kita perlu membuat form login di HTML. Kita akan menggunakan file HTML yang ditampilkan oleh fungsi doGet() saat pengguna mengakses aplikasi. Berikut adalah contoh kode HTML untuk form login:

File HTML (LoginForm.html):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function handleLogin() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        google.script.run.withSuccessHandler(function(response) {
          if (response.success) {
            document.getElementById('login-form').style.display = 'none';
            document.getElementById('welcome-section').style.display = 'block';
            document.getElementById('user-name').innerText = response.name;
            document.getElementById('user-email').innerText = response.email;
            document.getElementById('user-image').src = response.pp_url;
          } else {
            document.getElementById('error-message').innerText = 'Login gagal. Username atau password salah.';
          }
        }).login(username, password);
      }
    </script>
  </head>
  <body>
    <div id="login-form">
      <h3>Login</h3>
      <label for="username">Username:</label>
      <input type="text" id="username"><br><br>
      <label for="password">Password:</label>
      <input type="password" id="password"><br><br>
      <button onclick="handleLogin()">Login</button>
      <p id="error-message" style="color:red;"></p>
    </div>
    <div id="welcome-section" style="display:none;">
      <h3>Welcome</h3>
      <p>Name: <span id="user-name"></span></p>
      <p>Email: <span id="user-email"></span></p>
      <img id="user-image" alt="User Image" src="">
    </div>
  </body>
</html>

Penjelasan Kode HTML:

• Form Login: Pengguna akan memasukkan username dan password di form login. Setelah pengguna mengklik tombol "Login", fungsi JavaScript handleLogin() akan dipanggil untuk memvalidasi login dengan data di Spreadsheet.
• Tampilan Data Pengguna: Jika login berhasil, form login akan disembunyikan dan bagian welcome-section akan muncul, menampilkan nama, email, dan gambar profil pengguna. Gambar profil diambil dari URL yang telah disimpan di Spreadsheet, dan ditampilkan dalam tag <img>.

Langkah 4: Menguji Aplikasi

Setelah Anda menyimpan script dan file HTML, Anda dapat menguji aplikasi dengan menjalankan fungsi doGet() di browser. Aplikasi akan menampilkan form login. Ketika pengguna memasukkan username dan password yang valid, informasi pengguna akan muncul di halaman. Jika login gagal, pesan kesalahan akan ditampilkan di layar.

Keuntungan Menggunakan Unsplash untuk Gambar Profil

Dalam contoh ini, kita menggunakan gambar profil dummy dari Unsplash, layanan penyedia gambar bebas hak cipta. Mengapa menggunakan Unsplash?

• Gambar Berkualitas Tinggi: Unsplash menyediakan berbagai macam gambar berkualitas tinggi yang dapat digunakan secara gratis untuk proyek Anda.
• Dinamis: Dengan URL yang kita gunakan, kita dapat menghasilkan gambar acak dengan topik yang kita tentukan. Misalnya, URL https://source.unsplash.com/150x150/?person,man akan menghasilkan gambar acak dari Unsplash yang berkaitan dengan "person" dan "man".
• Fleksibel: Anda dapat dengan mudah mengubah kategori gambar yang diambil dari Unsplash hanya dengan mengedit parameter dalam URL, seperti ?person,woman untuk gambar wanita.

Penutup

Dengan menggunakan Google Apps Script dan Google Sheets, Anda dapat dengan mudah membuat aplikasi login sederhana yang memvalidasi data pengguna dari Spreadsheet dan menampilkan informasi pengguna setelah login. Dengan menambahkan gambar profil dari Unsplash, aplikasi ini menjadi lebih menarik dan interaktif. Platform ini sangat cocok untuk aplikasi internal, prototipe cepat, atau aplikasi web ringan yang memanfaatkan data Google Workspace.