해결: Fingerprint 2 생 성 된 지문 이 중복 되 거나 불안정 하여 자주 변 합 니 다.

어떤 학생 이 두 가지 질문 을 하 는 것 을 자주 본다.

저 는 TM 같은 브 라 우 저, 같은 장치 이지 만 페이지 를 새로 고치 고 페이지 를 뛰 거나 다른 조작 (디 버 깅 창 을 여 는 것 처럼) 을 하면 지문 이 변 합 니 다. 이것 도 지문 입 니까?

내 다른 컴퓨터 에 똑 같은 지문 이 나 오 다 니, 이 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)
}