背景
出於這樣或那樣的目的，我們需要精準的標識每一個使用者，進一步瞭解他們的使用者行為(瀏覽了哪些內容？搜尋了哪些關鍵字？點選了哪些按鈕？在哪裡停留的時間長？等等)，甚至是將使用者的不同站點資料關聯起來，然後給使用者提供更加精準、個性化的資訊流。其實好多巨頭早在很久之前就開始做這些工作了，比如某度
作為可以準確標識使用者身份的方案，需要滿足但不限於以下的條件：
- 唯一性：每個使用者的身份標識都應該是唯一的，區別於其他使用者的
- 穩定性：保證在特定的時間、條件下，使用者的身份標識保持不變
- 維度大：需要在面對海量使用者時，依然可以產生唯一的身份標識
下面來分享一下我所瞭解到的,可以標識使用者身份的方案(遞進關係)：
1. 方案一 cookie：
這個是我最先接觸到的方式，也是最常見的方式。至於怎麼操作cookie，相信大家都能運用自如了，如果有疑問可以參看 這裡 。
當使用者訪問網站時，你可以建立一個名為userId的cookie，用js生成一個32+的唯一值作為它的值，使用這對值來標識使用者，關聯使用者行為，舉個?：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const createCookie = (name, value, days, domain, cpath) => { let path = cpath || '', expires = "", cookieURL = '; path=' + path + '/'; if (!!days) { let date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } if (!!domain) { cookieURL = cookieURL + '; domain=' + domain } document.cookie = name + "=" + value + expires + cookieURL; } const s4 = () => { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1); } let userId = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); createCookie('userId',userId,3650) |
以後就可以使用userId來實現使用者追蹤，方便後續的資料分析。建議將過期時間設定的大一點，以便持久分析跟蹤使用者行為。但是隨著網際網路的發展，裝置的限制、使用者隱私意識的提高，很多時候cookie會被禁用，所以這種方式顯得不是那麼穩了。我們急需一種替代方案的出現
2. 方案二 canvas
隨著h5規範的推進，越來越多的瀏覽器支援 canvas 標籤，使得我們可以利用它創造出一種新的使用者追蹤方案。 但是why？how？
先說這種方案的原理：
- 瀏覽器不同、核心不同，繪製出來的圖片各不相同且唯一
- 不同的作業系統使用了不同的設定和演算法來進行畫素渲染操作
主要利用這些差異來區分不同使用者
再說一下具體做法
使用的是 canvas 的一個神奇方法—-toDataURL([type, encoderOptions])。這個方法返回繪畫內容的data URL(base 64形式)，我們可以利用這個返回值，擷取作為CRC校驗的最後32位來作為使用者的唯一標識。
在瞭解了以上資訊之後，我們來舉個?：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const binToHex = (str) => { let o = '' if(!str) return for(let i = 0,len = str.length;i<len;i++){ let n = str.charCodeAt(i).toString(16); o += n.length < 2 ? '0' + n : n; } return o } let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d') //圓形 ctx.beginPath(); ctx.arc(100,75,50,0*Math.PI,2*Math.PI) ctx.stroke() //文字 let message = "I'm a canvas" ctx.font = '18px' ctx.fillStyle = "#068"; ctx.fillText(message, 10, 20); let base64Str = canvas.toDataURL().replace("data:image/png;base64,",""); let bin = atob(base64Str); let crc = binToHex(bin.slice(-16,-12)); console.log(crc) |
同一個瀏覽器隱身，正常兩種模式執行結果
對照一下cookie方案，總結一下canvas方案的優缺點
優點
- html5 canvas技術被所有主流瀏覽器支援，可以在PC、平板、手機上使用
- 基本上是無法遮蔽的
缺點：
- 用於是無法遮蔽的，所以你的行為相當於公開的
- canvas方案跟裝置、系統、瀏覽器有很大的相關性。唯一性不能保證而且會隨著系統、瀏覽器更新而變化，暫且算個方案吧 （關於它的唯一性問題，您可以通過使用相近的系統版本、瀏覽器版本去驗證）
基於缺點，canvas指紋只能作為判斷使用者唯一性的參考。不能完全滿足我們的需求。
3.方案三：Fingerprintjs
為了表示尊敬，這裡先貼出Fingerprintjs github。 它是一個純用javascript、沒有依賴關係的瀏覽器指紋庫，壓縮之後只有1.2k，準確率達到94%。它通過收集使用者ua、螢幕資料、語言、外掛、時區、canvas指紋等資料生成一個使用者標識追蹤使用者(預設使用 Murmur Hash 演算法返回一個32位整數)
上程式碼截圖直觀呈現收集的資料
優點
- 包含多種因素，重複率很低
缺點
- 正是因為包含的因素很多，使用者的一些行為就可以改變標識，很容易失去之前跟蹤的使用者(例如：外掛解除安裝、安裝，系統升級等都可能會影響)
貌似還是不能滿足日益增長的需求啊
4.方案四：Fingerprintjs2
Fingerprintjs2 github ,這個是FingerprintJS的升級版。Fingerprintjs是在2012年開發的，現在無法在不降低相容性的情況下對其進行改進，所以有了Fingerprintjs2。
這個專案收集了更多的資料，並且所有資料都是可配置的，你可以僅挑選需要的選項或者全部啟用它們，而且還特別貼心的“照顧”了IE，QQ，百度等NB瀏覽器
來看看它所收集的資料吧，真是多啊
由於是二代產物，缺點已經很少了。再結合cookie絕對是無敵的存在。
講了這麼多，總覺得很遙遠，來一個已經開始使用這項技術的網站—-火幣。 看看它的請求，除了token還帶了什麼你就知道了
好了，這就是我關於使用者追蹤的看法，希望可以幫到你
未經本人允許，不得轉載。文章有疏漏淺薄之處，請各位大神斧正