VUE用fingerprintjs2.js获取浏览器指纹并生成ID，且WIFI和4G状态下ID保持一致

谢单单在2019年11月27日发布
效果查看
Screenshot_20191127-143835.jpg
效果demo查看：https://weixin.yihudong.cn/h5/vue-test/fingerprintjs-ID/test/#/

首先安装插件fingerprintjs插件
npm install --save fingerprintjs2

引入
import Fingerprint2 from 'fingerprintjs2'

调用
Fingerprint2.get(function(components) {
  const values = components.map(function(component,index) {
    if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
      return component.value.replace(/\bNetType\/\w+\b/, '')
    }
    return component.value
  })
  // 生成最终id murmur   
  const murmur = Fingerprint2.x64hash128(values.join(''), 31)
})
---end---
官方给的演示代码生成的指纹ID在大部分浏览器都没问题，就是在微信浏览器里因为UA多了网络字段，所以导致生成的ID不一样。把NetType/**网络部分替换成空，就能确保微信浏览器里切换4G或者WIFI网络后，指纹ID也能保持一致了。

可以在main.js调用或者VUEX里调用
TIM截图20191127112712_看图王(1).jpg

下面是我测试的安卓和苹果的微信浏览器用fingerprintjs2.js生成的系统浏览器UA，只有网络这里需要更改。安卓其他浏览器测试倒是没发现有NetType/WIFI字段。

安卓wifi微信浏览器生成的userAgent
Mozilla/5.0 (Linux; Android 10; GM1910 Build/QKQ1.190716.003; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/045008 Mobile Safari/537.36 MMWEBID/6063 MicroMessenger/7.0.8.1540(0x27000834) Process/tools NetType/WIFI Language/zh_CN ABI/arm64"


安卓4G微信浏览器生成的userAgent
Mozilla/5.0 (Linux; Android 10; GM1910 Build/QKQ1.190716.003; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/045008 Mobile Safari/537.36 MMWEBID/6063 MicroMessenger/7.0.8.1540(0x27000834) Process/tools NetType/4G Language/zh_CN ABI/arm64


苹果wifi微信浏览器生成的userAgent
Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.8(0x17000820) NetType/WIFI Language/zh_CN


苹果4G微信浏览器生成的userAgent
Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.8(0x17000820) NetType/4G Language/zh_CN


插件git：https://github.com/Valve/fingerprintjs2

插件在线测试指纹demo：https://fingerprintjs.com/demo


暧昧贴