fingerprint2浏览器指纹使用记录
我在uniapp-vue3-H5端使用的，记录一下
抄的这里前端使用fingerprintjs2获取浏览器指纹fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（ - 掘金
1、安装依赖
npm i fingerprintjs2 -S
2、抽成模块文件，@/utils/Fingerprint2.js
生成指纹时根据需要调整参数
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2function createdFingerprint() {// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。if (window.requestIdleCallback) {requestIdleCallback(() => {createFingerprint();});} else {setTimeout(() => {createFingerprint();}, 500);}
}
// 创建浏览器指纹
function createFingerprint() {// 选择哪些信息作为浏览器指纹生成的依据const options = {// fonts: {// extendedJsFonts: true,// },excludes: { //排除,获取不到的数据,影响设备唯一性的标识//获取不到"deviceMemory": true, //设备内存"fontsFlash": true, //已安装的Flash字体列表"enumerateDevices": true, //可用的多媒体输入和输出设备的信息。"doNotTrack": true, //do-not-track设置"cpuClass": true, //浏览器系统的CPU等级//影响设备唯一指纹"timezoneOffset": true, //本地时间与 GMT 时间之间的时间差，以分钟为单位"timezone": true, //时区"fonts": true, //使用JS/CSS检测到的字体列表"language": true,//语言"plugins":true,//浏览器的插件信息"deviceMemory":true,//设备内存'adBlock':true,//广告屏蔽工具"screenResolution":true,//屏幕分辨率},};return new Promise((resolve, reject) => {// 浏览器指纹// const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成const fingerprint = Fingerprint2.get(options, (components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成const values = components.map(component => component.value); // 配置的值的数组const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹// console.log("参数caddf45fc23104f9d17f3ef82af1df6c", options);// console.log("回调caddf45fc23104f9d17f3ef82af1df6c", components);// console.log("配置530e10f8a53a5f7f1022087b41b5ef27的值的数组", values);console.log("生成浏览器指纹", murmur);uni.setStorageSync("uuid", murmur);//缓存指纹resolve(murmur)});})
}
export default {createdFingerprint,
}
3、进入网页生成指纹App.vue
import Fingerprint from '@/utils/Fingerprint2.js'; //数据缓存
Fingerprint.createdFingerprint();4、指纹依赖参数解释
// 自定义选择浏览器的部分配置信息生成浏览器指纹
// var componentss = [{
// 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
// } //可用的多媒体输入和输出设备的信息。
// ]