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/fingerprintjs2.封装的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} //可用的多媒体输入和输出设备的信息。