Cara Mendeteksi Device Unik Pengguna di Browser dengan FingerprintJS

#webdev #javascript #programming #security

Pernah kepikiran gimana cara mengenali apakah seseorang membuka website kamu dari perangkat yang sama atau berbeda tanpa harus login dulu?
Nah, di dunia web, hal ini bisa dilakukan dengan browser fingerprinting.

Apa Itu Browser Fingerprint?

Setiap browser dan perangkat punya kombinasi karakteristik yang unik, misalnya:

Jenis browser (Chrome, Firefox, Edge, dll)
Sistem operasi
Resolusi layar
Bahasa dan zona waktu
Font dan plugin yang terpasang
Renderer GPU (melalui WebGL)

Kombinasi semua informasi itu bisa dijadikan “sidik jari digital” (browser fingerprint).
Tujuannya sederhana: membedakan satu perangkat dari perangkat lain — tanpa bergantung pada cookie atau localStorage.

Menggunakan FingerprintJS

Salah satu library paling populer untuk melakukan ini adalah FingerprintJS.
Library ini mudah digunakan dan hasilnya cukup stabil, bahkan setelah pengguna menghapus cache atau cookie.

Berikut contoh implementasi paling sederhana untuk menampilkan visitorId (fingerprint unik) di halaman web kamu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo FingerprintJS</title>
</head>
<body>
    <h1>Demo FingerprintJS</h1>
    <p>Fingerprint unik browser kamu:</p>
    <p id="p" style="font-family: monospace; color: blue;"></p>

    <script type="module">
        const fingerprint = await import('https://openfpcdn.io/fingerprintjs/v4')
        const fp = await fingerprint.load()
        const result = await fp.get()
        console.log(result.visitorId) // fingerprint unik di console
        document.getElementById('p').innerText = result.visitorId
    </script>
</body>
</html>

Jika kamu buka halaman ini di dua browser berbeda (misalnya Chrome dan Firefox), kamu akan melihat visitorId yang berbeda.
Tapi jika kamu buka berulang kali di browser yang sama, biasanya visitorId-nya tetap — itulah kekuatan fingerprinting.

Kapan FingerprintJS Berguna?

Fingerprint seperti ini bisa berguna untuk berbagai keperluan, misalnya:

Deteksi multi-login (misal satu akun dipakai di banyak device)
Validasi keamanan pada sistem presensi online atau e-voting
Mendeteksi bot / spammer yang berpura-pura jadi user baru
Menandai perangkat terpercaya tanpa harus simpan cookie

Kelebihan dan Keterbatasan

Kelebihan	Keterbatasan
Tidak perlu cookie / localStorage	Tidak 100% akurat
Cukup konsisten antar sesi	Bisa berubah kalau update browser besar
Mudah diimplementasikan	Ada pertimbangan privasi (tracking)

Kesimpulan

FingerprintJS memberikan cara cepat dan sederhana untuk mengenali browser atau perangkat pengguna lewat kombinasi atribut teknisnya.
Nilai result.visitorId bisa kamu perlakukan sebagai ID unik perangkat, dan bisa dikombinasikan dengan sistem login atau token lokal untuk keamanan tambahan.

Dengan sedikit kreativitas, kamu bisa manfaatkan teknik ini untuk: