如何在uni-app中使用fingerprint2實現游客設備標識

前言:

        這里的fingerprint不是uni-app的指紋模塊，是一個使用javascript開發的設備指紋采集器，通過這個庫可以定位正在使用的瀏覽器具備的特征唯一標識。如系統字體、屏幕分辨率、瀏覽器插件，就算使用瀏覽器的隱私窗口模式也無法匿名。

優缺點：

        因為web無法像移動端可以獲取IEMI或者IDFA，並且想或者網卡的Mac也是很難。所以要做一些游客類的精准推送，廣告投放等等就變得不太簡單。多數人的做法在前端生成UUID存入localstorage，雖然這個是以文件的形式存入電腦中，但是因為也是客戶端所以被刪除的可能性也大，在刪除的情況下UUID也就重新生成。

        而瀏覽器指紋是當前的瀏覽器的唯一標識，無關緩存與文件存儲，在不更換瀏覽器下是可以標識設備的唯一。然而，因為是瀏覽器指紋，所以只要更改相應參數，如插件，調整UA都會產生新的瀏覽器指紋。
    

 

解決方法：

        將瀏覽器指紋和localstorage結合使用，在storage中沒有值的時候就獲取瀏覽器指紋存入，后面如果不刪除的情況，無論怎么更改UA，同一瀏覽器的標識都只有一個。

 

安裝方式：

1. CDN: //cdn.jsdelivr.net/npm/fingerprintjs2@<VERSION>/dist/fingerprint2.min.js or https://cdnjs.com/libraries/fingerprintjs2
2. Bower: bower install fingerprintjs2
3. NPM: npm install fingerprintjs2
4. Yarn: 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();