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

在线查看浏览器指纹

效果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

posted @ 2022-11-07 14:26  SultanST  阅读(225)  评论(0编辑  收藏  举报