我在uniapp-vue3-H5端使用的,记录一下
抄的这里前端使用fingerprintjs2获取浏览器指纹fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件( - 掘金
1、安装依赖
npm i fingerprintjs2 -S
2、抽成模块文件,@/utils/Fingerprint2.js
生成指纹时根据需要调整参数
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2
function 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
// } //可用的多媒体输入和输出设备的信息。
// ]