我在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
// } //可用的多媒體輸入和輸出設備的信息。
// ]