Vue前端浏览器指纹获取：数字世界的身份密码

程序员必备宝典https://tmxkj.top/#/**一个开源的JavaScript库，它通过收集用户浏览器的多种属性（如屏幕分辨率、浏览器插件、字体、Canvas和WebGL等）来生成一个独特的浏览器指纹，用于识别和追踪用户。**

#Github地址
GitHub - fingerprintjs/fingerprintjs: The most advanced browser fingerprinting library.

功能特性
高度准确：能够生成高度准确的浏览器指纹，专业版准确率高达99.5%。

多种数据源：从多个数据源收集信息，包括但不限于用户代理、屏幕分辨率、系统字体、WebGL、Web Audio、Canvas 等。

轻量级：库的体积相对较小，不会显著增加网页的加载时间。

易于集成：作为一个JavaScript库，可以很容易地集成到现有的网站和应用程序中。

实时生成：在用户访问网站时实时生成指纹，无需额外的服务器处理。

跨浏览器兼容性：支持所有主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。

安全：生成的指纹通常是加密的，以减少数据泄露的风险。

自定义：开发者可以根据自己的需求选择性地启用或禁用某些数据收集功能，以符合特定的隐私政策或法律要求。

1.安装：

npm install @fingerprintjs/fingerprintjs

2.封装的FingerprintJsApi

import FingerprintJS from "@fingerprintjs/fingerprintjs";
import {Ask} from "../config/Api.js";

async function fingerprintApi(){
    const options = {
        exclude: {
            deviceType: true,
            userAgent: true,
        }}
    // 初始化
    const fp = await FingerprintJS.load(options);
    // 获取访问者的信息
    const result = await fp.get();
    // 配置
    const {
        osCpu,//操作系统类型
        webGlBasics,//设备类型
        languages,
        audioBaseLatency,
        reducedTransparency,
        vendor,
        vendorFlavors,
        fonts,
        fontPreferences,
        plugins,
        forcedColors,
        domBlockers,
        pdfViewerEnabled,
        audio,
        canvas,
        webGlExtensions,
        math,
        ...components
    } = result.components
    const extendedComponents = {
        ...components
    };
    const fingerprintId = FingerprintJS.hashComponents(extendedComponents);
    const visitorId =result.visitorId;
    const vis = result.components;
    return{fid:fingerprintId,vid:visitorId,vis,comps:components}
}

/**
 * 指纹上报
 */
export  function fingerApi(){
    return new Promise((resolve, reject) => {
        fingerprintApi().then(res=>{
            if (res){
                resolve(
//Ask('/finger/report','post',res.comps,{vid:res.vid, fid:res.fid},false)
);
            }
        })
    })

}

3.返回数据示例解读

## {key: ‘userAgent’, getData: UserAgent},//用户代理
## {key: ‘webdriver’, getData: webdriver },//网页内驱动软件
## {key: ‘language’, getData: languageKey},//语言种类
## {key: ‘colorDepth’, getData: colorDepthKey}, //目标设备或缓冲器上的调色板的比特深度
## {key: ‘deviceMemory’, getData: deviceMemoryKey},//设备内存
## {key: ‘pixelRatio’, getData: pixelRatioKey},//设备像素比
## {key: ‘hardwareConcurrency’, getData: hardwareConcurrencyKey},//可用于运行在用户的计算机上的线程的逻辑处理器的数量。
## {key: ‘screenResolution’, getData: screenResolutionKey}, //当前屏幕分辨率
## {key: ‘availableScreenResolution’, getData: availableScreenResolutionKey},//屏幕宽高（空白空间）
## {key: ‘timezoneOffset’, getData: timezoneOffset},//本地时间与 GMT 时间之间的时间差，以分钟为单位
## {key: ‘timezone’, getData: timezone},//时区
## {key: ‘sessionStorage’, getData: sessionStorageKey},//是否会话存储
## {key: ‘localStorage’, getData: localStorageKey},//是否具有本地存储
## {key: ‘indexedDb’, getData: indexedDbKey},//是否具有索引DB
## {key: ‘addBehavior’, getData: addBehaviorKey},//IE是否指定AddBehavior
## {key: ‘openDatabase’, getData: openDatabaseKey},//是否有打开的DB
## {key: ‘cpuClass’, getData: cpuClassKey},//浏览器系统的CPU等级
## {key: ‘platform’, getData: platformKey},//运行浏览器的操作系统和(或)硬件平台
## {key: ‘doNotTrack’, getData: doNotTrackKey},//do-not-track设置
## {key: ‘plugins’, getData: pluginsComponent},//浏览器的插件信息
## {key: ‘canvas’, getData: canvasKey},//使用 Canvas 绘图
## {key: ‘webgl’, getData: webglKey},//WebGL指纹信息
## {key: ‘webglVendorAndRenderer’, getData: webglVendorAndRendererKey},//具有大量熵的WebGL指纹的子集
## {key: ‘adBlock’, getData: adBlockKey},//是否安装AdBlock
## {key: ‘hasLiedLanguages’, getData: hasLiedLanguagesKey},//用户是否篡改了语言
## {key: ‘hasLiedResolution’, getData: hasLiedResolutionKey},//用户是否篡改了屏幕分辨率
## {key: ‘hasLiedOs’, getData: hasLiedOsKey}, //用户是否篡改了操作系统
## {key: ‘hasLiedBrowser’, getData: hasLiedBrowserKey}, //用户是否篡改了浏览器
## {key: ‘touchSupport’, getData: touchSupportKey},//触摸屏检测和能力
## {key: ‘fonts’, getData: jsFontsKey, pauseBefore: true}, //使用JS/CSS检测到的字体列表
## {key: ‘fontsFlash’, getData: flashFontsKey, pauseBefore: true}, //已安装的Flash字体列表
## {key: ‘audio’, getData: audioKey},//音频处理
## {key: ‘enumerateDevices’, getData: enumerateDevicesKey} //可用的多媒体输入和输出设备的信息。