Hướng dẫn cơ bản để dùng thư viện FingerprintJS trên web

Dưới đây là hướng dẫn cơ bản để dùng thư viện FingerprintJS (bản open-source) trên web — giúp bạn tạo ra một fingerprint (chuỗi định danh trình duyệt) cho người dùng.

📌 1. Giới thiệu nhanh

FingerprintJS là thư viện mã nguồn mở giúp thu thập các thuộc tính trình duyệt để tạo ra một chuỗi “fingerprint” duy nhất cho mỗi người dùng. Fingerprint này có thể dùng để:

Nhận dạng người dùng không phụ thuộc vào cookies/localStorage.
Phân tích lưu lượng hoặc ngăn việc đăng ký/truy cập lặp lại từ cùng một thiết bị.

⚠️ Bản open-source có độ chính xác thấp hơn so với bản Fingerprint Pro (chạy server + nhiều dữ liệu hơn).

🧠 2. Cách dùng nhanh trong trang web

Bạn có thể dùng FingerprintJS ngay trong HTML bằng cách import trực tiếp từ CDN như sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FingerprintJS Demo</title>
  </head>
  <body>
    <script>
      // 1. Khởi tạo agent từ CDN
      const fpPromise = import('https://openfpcdn.io/fingerprintjs/v5')
        .then(FingerprintJS => FingerprintJS.load());
      // 2. Lấy identifier khi cần
      fpPromise
        .then(fp => fp.get())
        .then(result => {
          const visitorId = result.visitorId;
          console.log("Visitor ID:", visitorId);
        });
    </script>
  </body>
</html>

✔ Giải thích:

import('https://openfpcdn.io/fingerprintjs/v5'): tải thư viện FingerprintJS phiên bản 5 từ CDN.
FingerprintJS.load(): khởi tạo agent.
fp.get(): trả về fingerprint của người dùng dưới dạng object chứa visitorId.

📦 3. Cài đặt bằng NPM (dùng với bundler / project JS)

Nếu bạn phát triển bằng Webpack/Vite/Rollup… thì nên cài qua npm để dễ quản lý:

Cài đặt: npm install @fingerprintjs/fingerprintjs
Nhúng trong mã JS: import FingerprintJS from '@fingerprintjs/fingerprintjs'; // Load the agent const fpPromise = FingerprintJS.load(); fpPromise .then(fp => fp.get()) .then(result => { console.log("Visitor ID:", result.visitorId); });

📌 Lưu ý: phiên bản npm tải chỉ chứa loader; thư viện thực tế được tải động từ CDN để luôn giữ bản mới nhất.

🧪 4. Gợi ý dùng thực tế

✔ Gửi fingerprint lên server
Sau khi lấy được visitorId, bạn có thể gửi nó qua API để lưu cơ sở dữ liệu:

fetch("/api/save-fingerprint", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ visitorId })
});

✔ Dùng cho analytics / security
Fingerprint phù hợp cho:

Phân tích số lượng người dùng duy nhất.
Detect spam/duplicate form submission.
Tăng cường bảo mật (trong giới hạn công nghệ).

⚠️ Hạn chế

Vì chạy hoàn toàn trên client, fingerprint có thể thay đổi theo cập nhật trình duyệt/extension.
Không nên dùng để thay thế hoàn toàn cho xác thực chính thống.
Một số trình duyệt bảo mật cao (Brave, Tor) hoặc extension chặn fingerprint có thể làm fingerprint khác nhau.