UI vs. UX: What’s the difference?

Panduan Lengkap Implementasi "Sign in with Google" dengan Node.js dan Express

super admin 2025-06-26 08:19:38

Halo para developer! Dalam artikel ini, kita akan membahas cara mengintegrasikan fitur login menggunakan akun Google ke dalam aplikasi web Anda. Metode ini tidak hanya memudahkan pengguna karena tidak perlu mengingat password baru, tetapi juga meningkatkan keamanan.

Kita akan menggunakan stack berikut:

  • Backend: Node.js dengan framework Express.js
  • Database: MongoDB (konsepnya bisa diterapkan pada database lain)
  • Library Google: google-auth-library
  • Manajemen Sesi: express-session

Mari kita mulai!

Langkah 1: Konfigurasi Proyek di Google Cloud Console

Sebelum menulis kode, kita perlu mendapatkan kredensial dari Google.

  1. Buka Google Cloud Console dan buat proyek baru (atau gunakan yang sudah ada).
  2. Di menu navigasi, pilih "APIs & Services" > "Credentials".
  3. Klik "+ CREATE CREDENTIALS" dan pilih "OAuth 2.0 Client ID".
  4. Jika diminta, konfigurasikan "OAuth consent screen" terlebih dahulu. Isi nama aplikasi, email Anda, dan domain yang diizinkan (misalnya, xxxxxx.com). Simpan dan lanjutkan.
  5. Kembali ke pembuatan kredensial, pilih "Web application" sebagai tipe aplikasi.
  6. Isi bagian berikut. Ini adalah langkah paling krusial:
    • Authorized JavaScript origins: Alamat URL tempat aplikasi frontend Anda akan diakses. Google hanya akan mengizinkan permintaan yang berasal dari sini.
      • Untuk development: http://localhost:3000 (sesuaikan port jika berbeda)
      • Untuk produksi: https://app.xxxxxx.com
    • Authorized redirect URIs: Alamat ke mana Google akan mengembalikan pengguna setelah mereka selesai login. Untuk alur kita, ini adalah alamat yang sama dengan origins.
      • Untuk development: http://localhost:3000
      • Untuk produksi: https://app.xxxxxx.com
  7. Klik "Create". Sebuah pop-up akan muncul menampilkan Your Client ID. Salin ID ini, kita akan membutuhkannya nanti.

Langkah 2: Menyiapkan Backend dengan Node.js

Sekarang, mari kita siapkan server backend kita.

Buat folder baru untuk proyek Anda dan jalankan npm init -y.

Instal semua package yang dibutuhkan:

Bash

 

npm install express express-session mongodb google-auth-library body-parser

Buat file utama, misalnya server.js, dan atur struktur dasar server Express.

JavaScript

 

// server.js
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const { OAuth2Client } = require('google-auth-library');

const app = express();
const PORT = 3000;
const GOOGLE_CLIENT_ID = 'MASUKKAN_CLIENT_ID_ANDA_DI_SINI';

const client = new OAuth2Client(GOOGLE_CLIENT_ID);

// Middleware
app.use(bodyParser.json());
app.use(session({
    secret: 'kunci_rahasia_anda', // Ganti dengan secret yang kuat
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false } // Set ke true jika menggunakan HTTPS
}));

// Routes akan kita tambahkan di sini

app.listen(PORT, () => {
    console.log(`Server berjalan di http://localhost:${PORT}`);
});

Langkah 3: Membuat Halaman Login di Frontend

Kita perlu halaman HTML dengan tombol "Sign in with Google".

Buat file public/index.html.

Gunakan library Google Identity Services (GSI) terbaru untuk menampilkan tombol.

HTML

 




    
    Google Login Demo


    Login dengan Akun Google

    
    
    
    

    
    
        // Fungsi ini akan dipanggil setelah user berhasil login di pop-up Google
        async function handleCredentialResponse(response) {
            console.log("ID Token diterima dari Google: ", response.credential);

            // Kirim token ke backend untuk verifikasi
            const res = await fetch('/login/google', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ token: response.credential })
            });

            const data = await res.json();

            if (data.success) {
                alert('Login berhasil!');
                // Redirect atau perbarui UI di sini
                // window.location.href = '/dashboard';
            } else {
                alert('Login Gagal: ' + data.message);
            }
        }

Pastikan untuk menyajikan folder public sebagai static folder di server.js: app.use(express.static('public'));

Langkah 4: Membuat Endpoint Verifikasi di Backend

Ini adalah inti dari logika login kita, mengadaptasi dari kode yang Anda berikan.

Tambahkan route POST /login/google di server.js.

Implementasikan logika verifikasi dan pencarian user.

JavaScript

 

// Tambahkan ini di server.js
app.post('/login/google', async (req, res) => {
    const { token } = req.body;

    try {
        // 1. Verifikasi token ke Google
        const ticket = await client.verifyIdToken({
            idToken: token,
            audience: GOOGLE_CLIENT_ID,
        });
        const payload = ticket.getPayload();

        // 2. Dapatkan data user dari payload
        const email = payload.email;
        const name = payload.name;
        const picture = payload.picture;

        // 3. Cari user di database Anda (Contoh disederhanakan)
        // Gantilah bagian ini dengan koneksi ke database MongoDB Anda
        // const user = await db.collection('t_users').findOne({ f_user_email: email });

        // --- SIMULASI DATABASE ---
        const mockUserDatabase = {
            '[email protected]': { _id: '123', name: 'User Test', role: 'Siswa' }
        };
        const user = mockUserDatabase[email];
        // --- AKHIR SIMULASI ---

        if (user) {
            // 4. Jika user ditemukan, buat sesi
            req.session.user_id = user._id;
            req.session.email = email;
            req.session.name = user.name;
            req.session.role = user.role;
            req.session.logged_in = true;

            console.log(`User ${email} berhasil login.`);
            res.status(200).json({ success: true });
        } else {
            // 5. Jika user tidak ditemukan
            console.log(`User dengan email ${email} tidak terdaftar.`);
            res.status(404).json({ success: false, message: "User tidak terdaftar" });
        }

    } catch (error) {
        console.error("Error saat verifikasi token:", error);
        res.status(401).json({ success: false, message: "Token invalid atau terjadi kesalahan" });
    }
});

Catatan: Kode di atas adalah versi yang disederhanakan. Anda bisa mengembangkannya dengan menambahkan pencarian data perusahaan dan sekolah, serta logging aktivitas seperti pada kode asli Anda.

Langkah 5: Uji Coba

  1. Jalankan server backend: node server.js.
  2. Buka browser dan akses http://localhost:3000.
  3. Klik tombol "Sign in with Google".
  4. Pilih akun Google Anda di jendela pop-up.
  5. Setelah berhasil, periksa konsol terminal (backend), Anda akan melihat pesan log login berhasil. Periksa juga browser, Anda akan melihat pesan alert('Login berhasil!').

Penutup

Selamat! Anda telah berhasil mengimplementasikan fitur "Sign in with Google" yang aman dan andal. Dari sini, Anda bisa mengembangkannya lebih lanjut, seperti:

  • Membuat fungsi logout dengan menghancurkan sesi (req.session.destroy()).
  • Melindungi route lain agar hanya bisa diakses oleh user yang sudah login.
  • Mendaftarkan user secara otomatis jika email mereka belum ada di database.

Semoga artikel ini bermanfaat! Selamat mencoba dan happy coding!