uniapp跨平台开发---同一设备safari,pwa环境通过FingerprintJS,获取指纹标识不一致问题解决

​

  业务需求描述

在safari浏览器,或者pwa环境访问网页,需要标识为同一用户

问题难点

FingerprintJS在safari,pwa环境获取到的用户设备指纹不一致,ios系统pwa存储数据跟safari存储数据并不互通,所以想通过localStorage,sessionstorage,IndexedDB,cookie来存储判断这一方案思路行不通

 解决思路

 根据FingerprintJS生成设备指纹的原理,来排除浏览器环境跟pwa环境的区别项,从而实现浏览器环境和pwa环境获取设备指纹一致

按照这一方案,将FingerprintJS在safari浏览器获取的结果和pwa内部获取的结果进行对比

const fp = await FingerprintJS.load();
const result = await fp.get();
console.log(result.components)

通过对比取出两种环境不一样结果的配置项(注释掉的是两者结果一样,剩余的就是造成两种环境得到指纹不一样的配置项)

               const fp = await FingerprintJS.load();
               const result = await fp.get();
               // 配置
               const {
                   // screenFrame,
                   // deviceMemory,
                   // hardwareConcurrency,
                   // languages,
                   // localStorage,
                   // sessionStorage,
                   // indexedDB,
                   // openDatabase,
                   // plugins,
                   // vendor,
                   // vendorFlavors,
                   // cookiesEnabled,
                   // colorGamut,
                   // invertedColors,
                   // forcedColors,
                   // monochrome,
                   // contrast,
                   // reducedMotion,
                   // reducedTransparency,
                   // hdr,
                   // math,
                   // pdfViewerEnabled,
                   // applePay,
                   // privateClickMeasurement,
                   // audioBaseLatency,
                   // webGlBasics,
                   // webGlExtensions,
                   fonts,
                   screenFrame,
                   canvas,
                   audio,
                   domBlockers,
                   fontPreferences,
                   screenResolution,
                   pixelRatio,
                   availableScreenResolution,
                   ...components
               } = result.components
               const extended = {
                   ...components
               }
               const fingerprintId = FingerprintJS.hashComponents(extended )
               return fingerprintId;

​