如何在uni-app中使用fingerprint2实现游客设备标识

前言

这里的fingerprint不是uni-app的指纹模块，是一个使用javascript开发的设备指纹采集器，通过这个库可以定位正在使用的浏览器具备的特征唯一标识。如系统字体、屏幕分辨率、浏览器插件，就算使用浏览器的隐私窗口模式也无法匿名。

优缺点

因为web无法像移动端可以获取IEMI或者IDFA，并且想或者网卡的Mac也是很难。所以要做一些游客类的精准推送，广告投放等等就变得不太简单。多数人的做法在前端生成UUID存入localstorage，虽然这个是以文件的形式存入电脑中，但是因为也是客户端所以被删除的可能性也大，在删除的情况下UUID也就重新生成。

而浏览器指纹是当前的浏览器的唯一标识，无关缓存与文件存储，在不更换浏览器下是可以标识设备的唯一。然而，因为是浏览器指纹，所以只要更改相应参数，如插件，调整UA都会产生新的浏览器指纹。

解决方法

将浏览器指纹和localstorage结合使用，在storage中没有值的时候就获取浏览器指纹存入，后面如果不删除的情况，无论怎么更改UA，同一浏览器的标识都只有一个。 

安装方式：

CDN: //cdn.jsdelivr.net/npm/fingerprintjs2@/dist/fingerprint2.min.js or https://cdnjs.com/libraries/fingerprintjs2Bower: bower install fingerprintjs2NPM: npm install fingerprintjs2Yarn: yarn add fingerprintjs2

编码使用：    

由于要在uni-app中使用，一般是通过export命令将函数抛出，然后才能在其他的组件中使用import命令，所以就需要对fingerprint2.js进行改造，引入的文件也尽量不要放在组件文件夹下，项目根目录新建即可，原来的代码如下。

1.首部就需要加入

var Fingerprint2 = (function(name, context, definition) { // ###代码   })('Fingerprint2', this, function() { // ##还是代码  })

2.尾部加入

export { Fingerprint2 }

3.组件中引入

import uuid from '../library/uuid.js';
import Fingerprint2 from '../library/fingerprint2.js';

4.业务功能部分: 判断storage，没有就取指纹存入，指纹不支持取uuid函数生成。

const guid = uni.getStorageSync('uuid');

if (!guid) {
    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
      })
      
      const murmur = Fingerprint2.x64hash128(values.join(''), 31)
      
      if (!murmur) {
          murmur = uuid.guid2();
      }
      
      uni.setStorageSync('uuid', murmur);
    })
}

5.前端uuid生成类

class uuid {
    
    uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i 

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 就业内推 | 阿里云专场，CCIE、RHCE认证优先，30k+16薪

01 阿里云 招聘岗位：网络工程师 职责描述： 云产品技术服务家岗位聚焦于多集群、分布式的云计算场景下，云产品问题的技术支持工作。1、为客户提供云产品的技术支持，负责疑难问题的快速定位、分析解决；2、与后端技术团队对接，根据客户反馈的问题推动云产品Bug修复、…