很早以前就知道有浏览器指纹的,不过我不知道怎么样可以保存或者记录浏览器指纹,刚浏览网页,
发现,竟然早就有浏览器指纹的实现方法了,很开心啊,竟然还可以前端来做,这下更开心了。
1.微信支付里面有相关的方法
背景介绍
由于用户网络使用代理或网络环境复杂的原因导致无法获取准确的用户端IP,商户侧可在统一下单时传递fingerprint参数给微信侧,用于辅助校验
这里需要注意,浏览器指纹并不能完全代替客户端IP(spbill_create_ip),也就是说在设置fingerprint字段的同时,
spbill_create_ip字段也必须传递且不能乱传(如传内网IP,调起支付还是会引发拦截)
fingerprint设置步骤
1. 在下单面引入JS: https://wx.gtimg.com/wxpay_h5/fingerprint2.min.1.5.1.js
2. 调用Fingerprint2()获取浏览器指纹
<script type="text/javascript">
var fp=new Fingerprint2();
fp.get(function(result){
//result即为获取到的浏览器指纹值
});
</script>
3. 统一下单接口新增fingerprint字段,把第二步中的result值传递给fingerprint字段发起下单操作即可,其它步骤不变
原文地址为:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_7&index=6
在vue中获取浏览器指纹方法
1.vue安装插件
npm install --save fingerprintjs2
2.vue需要用到的地方引入
import Fingerprint2 from 'fingerprintjs2'
3.调用
Fingerprint2.get(function(components) {
const values = components.map(function(component,index) {
if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
return component.value.replace(/NetType/w+/, '')
}
return component.value
})
// 生成最终id murmur
const murmur = Fingerprint2.x64hash128(values.join(''), 31);
console.log('浏览器指纹码:'+murmur )
})