fingerprint.js的安裝及基本使用方法

更新時間：2025年06月04日 09:01:33 作者：bollat

FingerprintJS是基于JS的瀏覽器指紋庫,通過采集設備屬性生成唯一用戶標識,這篇文章主要介紹了fingerprint.js的安裝及基本使用方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

FingerprintJS 是一個基于 JavaScript 的瀏覽器指紋識別庫，可以通過收集瀏覽器和設備的多個屬性來生成一個獨一無二的指紋（即一個用戶的唯一標識符）。這個庫的常見用途包括防止欺詐、識別重復用戶、分析流量等。

安裝 FingerprintJS

1. 通過 CDN 引入

最簡單的方式是直接通過 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/fingerprintjs@3.3.0/dist/fingerprint.min.js"></script>

2. 通過 NPM 安裝

如果你使用的是 Node.js 或前端構建工具（如 Webpack），可以通過 NPM 安裝：

npm install @fingerprintjs/fingerprintjs

bash

npm install @fingerprintjs/fingerprintjs

基本使用方法

1. 初始化 FingerprintJS 實例

// 引入 FingerprintJS
import FingerprintJS from '@fingerprintjs/fingerprintjs';

// 初始化 FingerprintJS
FingerprintJS.load().then(fingerprint => {
  // 獲取瀏覽器指紋
  fingerprint.get().then(result => {
    // result.visitorId 包含生成的唯一指紋
    console.log(result.visitorId);
  });
});

在上面的代碼中：

FingerprintJS.load() 異步加載 FingerprintJS 庫并返回一個指紋實例。
fingerprint.get() 方法返回一個指紋對象，其中 visitorId 是我們用來標識用戶的唯一 ID。

2. 在瀏覽器中生成指紋

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FingerprintJS Example</title>
  <script src="https://cdn.jsdelivr.net/npm/fingerprintjs@3.3.0/dist/fingerprint.min.js"></script>
</head>
<body>
  <h1>FingerprintJS Example</h1>
  <script>
    FingerprintJS.load().then(fingerprint => {
      fingerprint.get().then(result => {
        document.body.innerHTML += `<p>Visitor ID: ${result.visitorId}</p>`;
      });
    });
  </script>
</body>
</html>

這個例子會在頁面加載后顯示一個“Visitor ID”，它是基于瀏覽器和設備的一些信息生成的唯一標識符。

FingerprintJS 的工作原理

FingerprintJS 通過采集用戶瀏覽器和設備的多種特征來生成指紋，這些特征包括但不限于：

瀏覽器的插件信息
屏幕分辨率
操作系統(tǒng)類型
字體列表
用戶語言
瀏覽器窗口大小
系統(tǒng)和瀏覽器的硬件信息（如 GPU、CPU、WebGL等）

通過這些特征，FingerprintJS 可以盡可能準確地生成一個唯一標識符。

高級用法：結合后端處理

在一些應用場景中，前端生成的指紋可能會被傳遞到后端以進行進一步分析或存儲。你可以將 visitorId 發(fā)送到你的后端服務器，做進一步的操作。

// 獲取指紋后，將其發(fā)送到后端
FingerprintJS.load().then(fingerprint => {
  fingerprint.get().then(result => {
    const visitorId = result.visitorId;
    
    // 假設我們有一個后端 API 接口來接收指紋
    fetch('/api/track_visitor', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ visitorId })
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
});

注意事項

隱私問題：由于指紋識別依賴于收集用戶的瀏覽器和設備信息，因此它可能會引起隱私方面的關注。務必確保符合相關的隱私法規(guī)（如 GDPR、CCPA 等）。
指紋會變化：如果用戶清除了瀏覽器緩存或更換了設備，指紋可能會發(fā)生變化。因此，指紋識別適用于識別設備和瀏覽器，但它不是絕對穩(wěn)定的唯一標識符。
指紋偽裝：一些用戶可能會使用反跟蹤工具（如 VPN 或瀏覽器插件）來偽裝指紋，這可能會影響指紋識別的準確性。