在线查看浏览器指纹
image.png
效果demo查看：https://weixin.yihudong.cn/h5/vue-test/fingerprintjs-ID/test/#/
首先安装插件fingerprintjs插件
1. npm install --save fingerprintjs2
引入
1. import Fingerprint2 from 'fingerprintjs2'
调用
1. Fingerprint2.get(function(components) {
2. const values = components.map(function(component,index) {
3. if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
4. return component.value.replace(/\bNetType\/\w+\b/, '')
5. }
6. return component.value
7. })
8. // 生成最终id murmur
9. const murmur = Fingerprint2.x64hash128(values.join(''), 31)
10. })---end---
官方给的演示代码生成的指纹ID在大部分浏览器都没问题，就是在微信浏览器里因为UA多了网络字段，所以导致生成的ID不一样。把NetType/**网络部分替换成空，就能确保微信浏览器里切换4G或者WIFI网络后，指纹ID也能保持一致了。
可以在main.js调用或者VUEX里调用
image.png
下面是我测试的安卓和苹果的微信浏览器用fingerprintjs2.js生成的系统浏览器UA，只有网络这里需要更改。安卓其他浏览器测试倒是没发现有NetType/WIFI字段。
安卓wifi微信浏览器生成的userAgent
1. 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
1. 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
1. 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
1. 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
