解决：Fingerprint2生成的指纹重复或者不稳定，经常会变

经常看到有同学问2种问题：

1. 我TM同一个浏览器，同一台设备，但刷新页面，页面跳转，或者做点什么别的操作（像打开调试窗口），指纹就变了，这还算指纹吗？
2. 我不同的电脑，居然能出现一样的指纹，这TM也算是指纹？

如果你也有这样的疑问，你不是一个人在战斗。我使用这个库时，就同时被质疑上面两个问题。

---

所有影响生成指纹的参数：

excludes?: {
            userAgent?: boolean;
            language?: boolean;
            colorDepth?: boolean;
            deviceMemory?: boolean;
            pixelRatio?: boolean;
            hardwareConcurrency?: boolean;
            screenResolution?: boolean;
            availableScreenResolution?: boolean;
            timezoneOffset?: boolean;
            timezone?: boolean;
            sessionStorage?: boolean;
            localStorage?: boolean;
            indexedDb?: boolean;
            addBehavior?: boolean;
            openDatabase?: boolean;
            cpuClass?: boolean;
            platform?: boolean;
            doNotTrack?: boolean;
            plugins?: boolean;
            canvas?: boolean;
            webgl?: boolean;
            webglVendorAndRenderer?: boolean;
            adBlock?: boolean;
            hasLiedLanguages?: boolean;
            hasLiedResolution?: boolean;
            hasLiedOs?: boolean;
            hasLiedBrowser?: boolean;
            touchSupport?: boolean;
            fonts?: boolean;
            fontsFlash?: boolean;
            audio?: boolean;
            enumerateDevices?: boolean;
        };

其中，以上参数有些是不稳定的，就会导致指纹也不稳定。

稳定的参数请看这里：https://github.com/Valve/fingerprintjs2/wiki/Stable-components

所以你想要指纹变还是不变，完全自己控制，如下例子，excludes 把某些参数不计算指纹，得出来的就比较稳定。

上代码：

getFingerDeviceId(successHandle: (finger: string) => void) {
    let options: Fingerprint2.Options = {
      excludes: {
        language: true,
        colorDepth: true,
        deviceMemory: true,
        pixelRatio: true,
        availableScreenResolution: true,
        timezoneOffset: true,
        timezone: true,
        sessionStorage: true,
        localStorage: true,
        indexedDb: true,
        addBehavior: true,
        openDatabase: true,
        cpuClass: true,
        doNotTrack: true,
        plugins: true,
        canvas: true,
        webglVendorAndRenderer: true,
        adBlock: true,
        hasLiedLanguages: true,
        hasLiedResolution: true,
        hasLiedOs: true,
        hasLiedBrowser: true,
        touchSupport: true,
        audio: false,
        enumerateDevices: true,
        hardwareConcurrency: true,
      },
    };
    Fingerprint2.get(options, (components: any) => {
      // 参数
      const values = components.map((component: any) => {
        return component.value;
      });
      // 指纹
      const finger = Fingerprint2.x64hash128(values.join(''), 31);
      console.log('finger======', finger);
      successHandle(finger);
    });
  }

至于上面各个参数，具体表示什么意思，翻一下官方文档看看。

所以通过以上参数，你可以让两台压根不一样的电脑，都可以得出一样的指纹。

---

还有一点就是页面繁忙状态，或者一进入页面就获取，这种情况下，指纹是不稳定的，官方就有明确说明，要如下使用：

if (window.requestIdleCallback) {
    requestIdleCallback(function () {
        Fingerprint2.get(function (components) {
          console.log(components) // an array of components: {key: ..., value: ...}
        })
    })
} else {
    setTimeout(function () {
        Fingerprint2.get(function (components) {
          console.log(components) // an array of components: {key: ..., value: ...}
        })  
    }, 500)
}