关于前端:如何在uniapp中使用fingerprint2实现游客设备标识

这里的 fingerprint 不是 uni-app 的指纹模块，是一个应用 javascript 开发的设施指纹采集器，通过这个库能够定位正在应用的浏览器具备的特色惟一标识。如零碎字体、屏幕分辨率、浏览器插件，就算应用浏览器的隐衷窗口模式也无奈匿名。

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

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

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

装置形式 ：

CDN: //cdn.jsdelivr.net/npm/fingerprintjs2@<VERSION>/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 < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
    
        var uuid = s.join("");
        return uuid;
    }
    guid() {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    guid2() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
    
    uuid2(len, radix) {var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid = [],
            i;
        radix = radix || chars.length;
    
        if (len) {
            // Compact form
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
            // rfc4122, version 4 form
            var r;
    
            // rfc4122 requires these characters
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
            uuid[14] = '4';
    
            // Fill in random data.  At i==19 set the high bits of clock sequence as
            // per rfc4122, sec. 4.1.5
            for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16;
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
        }
    
        return uuid.join('');
    }
    
}

export default new uuid();

关于前端:如何在uniapp中使用fingerprint2实现游客设备标识

前言

优缺点

解决办法