Script Interaksi Login Google

Panduan lengkap membuat login Google dengan HTML, CSS, dan JS

Highlights

Integrasi API Google: Menggunakan Google Identity Services dan OAuth 2.0 untuk autentikasi pengguna.
Langkah Implementasi: Menyiapkan proyek di Google Cloud, membuat Client ID, dan memasukkan skrip API.
Kustomisasi Tampilan: Membuat tombol kustom menggunakan HTML, CSS, dan JavaScript serta menyesuaikan tampilan sesuai kebutuhan.

Pendahuluan

Pada panduan ini, kita akan membuat sistem login dengan Google yang hanya menggunakan HTML, CSS, dan JavaScript. Sistem ini memungkinkan pengguna untuk melakukan autentikasi melalui akun Google mereka. Dalam tutorial ini, kita akan menggunakan Google Identity Services, yang menggantikan API Google+ dan platform lama lainnya, untuk menangani proses OAuth 2.0. Panduan lengkap ini mencakup persiapan proyek, penyiapan HTML, penataan CSS, dan logika JavaScript untuk menangani proses login, serta beberapa opsi kustomisasi tombol untuk pengalaman pengguna yang lebih baik.

Prasyarat

Sebelum memulai, pastikan bahwa Anda telah:

Membuat proyek di Google Cloud Console.
Mengaktifkan Google Sign-In API dan mengonfigurasi OAuth consent screen.
Mendapatkan Client ID dari Google Cloud Console untuk aplikasi web Anda.
Mengatur URI redirect dan domain aplikasi.

Struktur Proyek

Berikut adalah struktur dasar proyek yang akan kita gunakan:

File	Deskripsi
index.html	Halaman utama yang berisi elemen HTML untuk tombol login dan penyisipan skrip API.
styles.css	File CSS untuk menata tampilan halaman dan tombol login Google.
script.js	File JavaScript untuk menangani interaksi login dengan Google dan manipulasi DOM.

Membuat Script Interaksi Login Google

Langkah 1: Menyiapkan File HTML

Mulailah dengan membuat file HTML, misalnya index.html. Kita akan memasukkan elemen tombol dan menyisipkan skrip Google API. Pastikan untuk mengganti YOUR_CLIENT_ID dengan Client ID yang Anda dapatkan dari Google Cloud Console.

Contoh Kode HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login dengan Google</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
  </head>
  <body>
    <div class="container">
      <h1>Login dengan Google</h1>
      <!-- Tombol sign-in default dari Google Identity Services -->
      <div id="g-signin2"></div>
      <!-- Tombol custom sebagai alternatif pilihan -->
      <div id="customBtn">Login dengan Google</div>
    </div>
    
    <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
    <script src="script.js"></script>
  </body>
</html>

Langkah 2: Menambahkan CSS untuk Tampilan

File CSS akan menangani tampilan halaman secara keseluruhan dan menata tombol login agar terlihat menarik dan responsif. Anda dapat menyesuaikan nilai properti sesuai dengan desain halaman Anda.

Contoh Kode CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.container {
  text-align: center;
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

#g-signin2 {
  margin-bottom: 20px;
}

#customBtn {
  display: inline-block;
  background-color: white;
  color: #444;
  width: 240px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 1px 1px 1px gray;
  cursor: pointer;
  transition: background-color 0.3s;
}

#customBtn:hover {
  background-color: #f0f0f0;
}

Langkah 3: Mengimplementasikan JavaScript untuk Login

File script.js akan menangani proses autentikasi pengguna melalui Google. Di sini kita menggunakan dua metode untuk menampilkan tombol login:

Google Sign-In Button Default: Menggunakan gapi.signin2.render() untuk merender tombol default Google.
Custom Sign-In Button: Menggunakan gapi.auth2.attachClickHandler() agar tombol kustom dapat menginisiasi autentikasi.

Contoh Kode JavaScript (script.js)

function onSuccess(googleUser) {
    // Mendapatkan profil pengguna dari Google
    var profile = googleUser.getBasicProfile();
    console.log("ID: " + profile.getId());
    console.log("Name: " + profile.getName());
    console.log("Image URL: " + profile.getImageUrl());
    console.log("Email: " + profile.getEmail());
    // Di sini Anda dapat melakukan tindakan lebih lanjut, seperti mengirim token ke server
}

function onFailure(error) {
    console.error("Error during Google Sign-In:", error);
}

function renderButton() {
    // Render tombol default dari Google
    gapi.signin2.render('g-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
    });
    
    // Untuk tombol kustom, inisialisasi Auth2 dan lampirkan click handler
    gapi.load('auth2', function() {
        var auth2 = gapi.auth2.init({
            client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin'
        });
        attachCustomSignin(document.getElementById('customBtn'), auth2);
    });
}

function attachCustomSignin(element, auth2) {
    auth2.attachClickHandler(element, {},
        function(googleUser) {
            var profile = googleUser.getBasicProfile();
            console.log("Custom Button - Logged in as: " + profile.getName());
            // Tindakan lanjutan setelah login sukses
        }, function(error) {
            console.error(JSON.stringify(error, undefined, 2));
        }
    );
}

Pastikan untuk mengganti YOUR_CLIENT_ID.apps.googleusercontent.com dengan Client ID asli yang diperoleh dari Google Cloud Console. Skrip di atas mengimplementasikan dua pendekatan berbeda guna memberikan fleksibilitas dalam tampilan antarmuka:

Tombol Default: Menggunakan gapi.signin2.render() untuk langsung memanfaatkan tampilan resmi Google yang telah didesain dengan baik.
Tombol Kustom: Menggunakan gapi.auth2.attachClickHandler() agar Anda bisa mendesain tombol sesuai keperluan dengan kontrol penuh pada DOM HTML & CSS.

Proses Autentikasi OAuth 2.0

Saat pengguna mengklik tombol login, alur autentikasi OAuth 2.0 Google dijalankan. Berikut adalah langkah utama dalam proses ini:

1. Pengguna Mengklik Tombol

Baik tombol default maupun tombol kustom men-trigger fungsi autentikasi JavaScript. Selama proses ini, permintaan untuk profil dan email pengguna dikirim ke Google.

2. Google Mengembalikan Token

Setelah autentikasi berhasil, Google mengembalikan objek googleUser yang mengandung informasi profil. Data ini mencakup ID, nama, email, dan URL foto profil pengguna.

3. Penanganan Respons

Fungsi onSuccess menangani data yang diterima, mencetak informasi ke konsol, dan biasanya meneruskan token ke server untuk verifikasi lebih lanjut. Di sisi server, token dapat diverifikasi dan data disimpan ke dalam database untuk manajemen sesi pengguna.

Keamanan dan Kebijakan

Penting untuk diketahui bahwa dalam implementasi autentikasi berbasis Google:

Keamanan Data: Jangan pernah mengungkapkan Client Secret atau data sensitif pada kode sisi klien.
Cookie dan Sesi: Gunakan cookie dengan pengaturan 'HttpOnly' dan 'Secure' untuk menjaga keamanan sesi saat mengirim token ke server.
Kepatuhan Kebijakan: Pastikan mengikuti pedoman dan kebijakan privasi dari Google dalam penggunaan data autentikasi pengguna.

Pengujian dan Troubleshooting

Setelah Anda mengonfigurasi kode HTML, CSS, dan JS sesuai petunjuk di atas, lakukan langkah-langkah berikut untuk menguji sistem login:

Pengujian

Buka file index.html di browser modern seperti Chrome atau Firefox.
Klik tombol login Google (baik default maupun kustom) dan perhatikan konsol browser untuk informasi status login.
Pastikan bahwa Anda telah mengonfigurasi URI redirect di Google Cloud Console agar sesuai dengan alamat halaman Anda.

Jika terdapat error, periksa:

Apakah YOUR_CLIENT_ID telah diganti dengan benar.
Apakah semua skrip Google telah dimuat dengan benar (perhatikan properti async dan defer pada tag skrip).
Pertimbangkan untuk menambahkan penanganan error tambahan di dalam fungsi onFailure atau konsol log untuk debugging.

Tabel Ringkas Fitur dan Komponen

Komponen	Deskripsi dan Fungsi
index.html	File utama yang berisi elemen HTML untuk tombol default dan kustom, serta pemanggilan skrip Google API.
styles.css	Menangani tata letak dan desain tombol login serta penataan halaman secara keseluruhan.
script.js	Mengimplementasikan logika autentikasi Google menggunakan `gapi.signin2.render()` dan `gapi.auth2.attachClickHandler()`.
Google API Script	Skrip dari `https://apis.google.com/js/platform.js` yang menyediakan fungsi tampilan dan autentikasi Google.
OAuth Consent Screen	Konfigurasi pada Google Cloud Console yang mengatur izin akses dan data pengguna yang diminta.

Referensi

Untuk informasi lebih lanjut dan dokumentasi terkait implementasi login Google, berikut adalah beberapa sumber yang direkomendasikan:

Dengan mengikuti langkah-langkah di atas, Anda sekarang memiliki skrip interaksi login Google yang lengkap menggunakan HTML, CSS, dan JavaScript. Pastikan Anda selalu meninjau dokumentasi resmi dari Google untuk mendapatkan pembaruan terbaru dan penyesuaian terhadap kebijakan API. Selamat mencoba dan semoga sukses dalam mengimplementasikan autentikasi pengguna di aplikasi web Anda!