建站行业分析济南外贸网站

我在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
// 	} //可用的多媒体输入和输出设备的信息。
// ]