VUE2中實際使用FingerprintJS獲取浏览器指纹

隨著網絡安全意識增強，需要在系統登錄時進行設備檢測，以實現登錄設備是否發生變動，保證用戶登錄環境的安全。

VUE2中使用FingerprintJS

1.項目中安裝FingerprintJS

npm install @fingerprintjs/fingerprintjs 

注：項目比較老舊，所以我用的是(也可以強制安裝 --force)

npm install @fingerprintjs/fingerprintjs --legacy-peer-deps

2.VUE文件中使用

import FingerprintJS from '@fingerprintjs/fingerprintjs';

created() {
    this.getFingerprint();
}

    //如下是默認的使用所有環境變量生成指紋
    async getFingerprint() {
      const fp = await FingerprintJS.load();
      const result = await fp.get();
      const visitorId = result.visitorId;
      console.log("瀏覽器指紋："+visitorId);
      console.log('result components:', result.components);//瀏覽器指紋生成依賴環境變量
    },

說明：這裡使用的async/await保證FingerprintJS完全加載

3.默認指紋生成依賴的環境變量
FingerprintJS Demo（官方在線測試頁面）

4.實際使用是發現 用戶進行瀏覽器縮放，電腦分辨率變更，多顯示器顯示時，瀏覽器指紋變化頻繁。所以進行生成指紋的影響因素剔除，降低敏感度。

    async getFingerprint() {
      try {
        const fpPromise2 = await FingerprintJS.load();
        const result2 = await fpPromise2.get();
        const { fonts, languages, screenResolution, screenFrame, colorDepth, colorGamut, fontPreferences } = result2.components;
        const components = {};
        Object.keys(result2.components).forEach(key => {
          if (!['fonts', 'languages', 'screenResolution', 'screenFrame', 'colorDepth', 'colorGamut', 'fontPreferences'].includes(key)) {
            components[key] = result2.components[key];
          }
        });
        const fingerprintId2 = FingerprintJS.hashComponents(components);//extendedComponents);
        this.fingerprint=fingerprintId2;
        sessionStorage.setItem("Fingerprint",this.fingerprint)
        console.log('Fingerprint ID 自定義:', this.fingerprint);
      } catch (error) {
        console.error('Fingerprint ID 自定義 報錯:', error);
      }
    },

5.關於瀏覽器指紋生成自定義修改或開發
參考官方文檔：https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/extending.md

您可以排除内置熵分量并添加自定义熵分量， 例如，当某个组件对于您的需求来说太不稳定时。 使用内置哈希函数对自定义组件列表进行哈希处理。

组件排除的示例：

// ...

const result = await fp.get()

// The `languages` and `audio` components will be excluded
const { languages, audio, ...components } = result.components

// Optionally, you can make a visitor identifier from your custom list of components
const visitorId = FingerprintJS.hashComponents(components)

组件添加示例：

// ...

const result = await fp.get()

// New components will be added: `foo` and `bar`.
// You should implement the `getFooComponent` and `getBarComponent` functions by yourself,
// they can return any value.
const components = {
  ...result.components,
  foo: { value: await getFooComponent() },
  bar: { value: await getBarComponent() },
}

// Optionally, you can make a visitor identifier from your custom list of components
const visitorId = FingerprintJS.hashComponents(components)

组件排除和添加的示例：

// ...

const result = await fp.get()

// The `languages` and `audio` components will be excluded
const { languages, audio, ...components } = result.components

// New components will be added: `foo` and `bar`
const extendedComponents = {
  ...components,
  foo: { value: await getFooComponent() },
  bar: { value: await getBarComponent() },
}

// Optionally, you can make a visitor identifier from your custom list of components
const visitorId = FingerprintJS.hashComponents(extendedComponents)

您可以将自定义组件列表格式化为人类友好的文本：

// ...

const debugOutput = document.querySelector('pre')
debugOutput.textContent = FingerprintJS.componentsToDebugString(components)

Github官方地址：https://github.com/fingerprintjs/fingerprintjs/tree/master