浏览器指纹作为验证用户身份

在线查看浏览器指纹

效果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里调用

下面是我测试的安卓和苹果的微信浏览器用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