FingerprintJS生成浏览器指纹

本篇仅供参考

自学分享，没有在项目用过，可能会有很多坑，欢迎各位帮忙指正

FingerprintJS

        FingerprintJS 是一个客户端浏览器指纹识别库，它结合浏览器属性来生成唯一且稳定的哈希值。可用于识别和跟踪设备，提供了简单易用的 API，纯javascript，支持在 Web 浏览器和 Node.js 环境中使用。采集多种信息，对采集到的数据使用 JSON.stringify() 序列化，再使用 MurmurHash算法生成 128 位 Hash（32 位 16 进制字符串），即一个32位整数。

FingerprintJS使用

安装

yarn add @fingerprintjs/fingerprintjs

 引入

import FingerprintJS from '@fingerprintjs/fingerprintjs'; 

在组件中创建方法

默认配置

写法1

getDeviceFingerprint = async () => {
    const fpPromise = await FingerprintJS.load({debug: true});
    // 调用FingerprintJS.load()返回一个Promise对象，用于加载和初始化FingerprintJS库。
    // 可给FingerprintJS.load()传参{debug: true}开启调试模式
    const result = await fpPromise.get();
    // 调用fpPromise.get()获取访问者指纹信息，并返回一个包含指纹ID和其他信息的结果对象。
    const fingerprintId = result.visitorId;
    localStorage.setItem('browserId', fingerprintId);
    console.log('result components:', result.components);
 };

写法2

getDeviceFingerprint = async () => {
    FingerprintJS.load().then(fp => {
        fp.get().then(result => {
            const fingerprintId = result.visitorId;
            localStorage.setItem('browserId', fingerprintId)
        });
    });
 };

写法3

getDeviceFingerprint = async () => {
    const fpPromise = await FingerprintJS.load();
    const result = await fpPromise.get();
    const fingerprintId = FingerprintJS.hashComponents(result.components);
    localStorage.setItem('browserId', fingerprintId)
};

自定义配置项

        直接使用@fingerprintjs/fingerprintjs 很不错，但并不能直接满足我们的需求。高熵值的指纹可以增加设备的识别率，但却会导致设备指纹频繁变化，从而引起用户频繁掉线，最终影响用户体验。实际上我们不需要那么精确的区分浏览器，真正期望区分的是设备

getDeviceFingerprint = async () => {
    const fpPromise = await FingerprintJS.load();
    const result = await fpPromise.get();
    // Exclude a couple components
    const { fonts, languages, audio, ...components } = result.components;
    // Add a few custom components
    const extendedComponents = {
        ...components,
        foo: { value: 'whatever' },
    };
    const fingerprintId = FingerprintJS.hashComponents(extendedComponents);
    localStorage.setItem('browserId', fingerprintId)
};

开源版配置项

默认配置，FingerprintJS 4.1.0 版本默认收集的信息

注释