Browse Source

feat:增加指纹逻辑

luoy 4 days ago
parent
commit
4f874e78bf
3 changed files with 52 additions and 9 deletions
  1. 2 1
      main.html
  2. 4 1
      package.json
  3. 46 7
      src/index.js

+ 2 - 1
main.html

@@ -11,7 +11,8 @@
   <div>操作系统: <span id="os"></span></div>
   <div>用户唯一标识: <span id="userId"></span></div>
 </body>
-<script src="buriedPoint.js"></script>
+<!-- <script type="module" src="./src/index.js"></script> -->
+<script src="./dist/main.js"></script>
 <script>
   // 展示操作系统和用户唯一标识
   document.addEventListener('DOMContentLoaded', function () {

+ 4 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "buried-piont",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "post-key值根据登录账号获取 phc_5YuF937Fs3N0djI4XFThsGAZfgaciU9pjKw6T3SQjvV\r   post-host为默认发送到官网后台 https://us.posthog.com/",
   "main": "dist/main.js",
   "scripts": {
@@ -24,5 +24,8 @@
     "clean-webpack-plugin": "^4.0.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.6.2"
   }
 }

+ 46 - 7
src/index.js

@@ -1,4 +1,5 @@
 
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
 // 通用 JSBridge
 window.JSBridge = {
   getOS: function () {
@@ -39,6 +40,42 @@ function getUrlParam(name) {
     if (r != null) return decodeURIComponent(r[2]);
     return null;
 }
+ async function getFingerprintId() {
+		// 原FingerprintJS方案
+		let fingerprint = "";
+		try {
+			fingerprint = localStorage.getItem("fingerprint_id") || "";
+		} catch (e) {}
+		if (fingerprint) {
+			return fingerprint;
+		} else if (FingerprintJS && typeof FingerprintJS.load === "function") {
+			try {
+				const fp = await FingerprintJS.load({
+					// 去掉项目区分和域名区分
+					preprocessor: null,
+					// 禁用域名相关的指纹组件
+					components: {
+						domain: false,
+						subdomain: false,
+						path: false,
+						queryKey: false,
+						queryValue: false,
+						hash: false,
+					},
+				});
+				const result = await fp.get();
+				fingerprint = result.visitorId;
+				try {
+					localStorage.setItem("fingerprint_id", fingerprint);
+				} catch (e) {}
+				return fingerprint;
+			} catch (e) {
+				return "";
+			}
+		} else {
+			return "";
+		}
+ }
 function getCookie(name) {
   const matches = document.cookie.match(new RegExp(
     `(?:^|; )${name.replace(/([.$?*|{}()[]\\\/\+^])/g, '\\$1')}=([^;]*)`
@@ -127,8 +164,8 @@ function getBrowserInfo() {
 function UtmTracker() {}
 
 // 获取UTM参数
-UtmTracker.prototype.getParams = function() {
-    return {
+UtmTracker.prototype.getParams = async function() {
+    const params = {
         utm_source: getUrlParam('utm_source') || '',
         utm_medium: getUrlParam('utm_medium') || '',
         utm_campaign: getUrlParam('utm_campaign') || '',
@@ -137,13 +174,15 @@ UtmTracker.prototype.getParams = function() {
         referrer: document.referrer || '',
         browser: getBrowserInfo(),
         timestamp: new Date().toISOString(),
-        url: window.location.href
+        url: window.location.href,
     };
+    params.fingerprint = await getFingerprintId();
+    return params;
 };
 
 // 静态方法:快速获取(无需实例化)
-UtmTracker.get = function() {
-    return new UtmTracker().getParams();
+UtmTracker.get = async function() {
+    return await new UtmTracker().getParams();
 };
 
 class Tracker {
@@ -342,8 +381,8 @@ class Tracker {
     }
   }
   _sendDataNow(data, headers = {}) {
-    this.queueIdleTask(() => {
-      const UTMP = UtmTracker.get();
+    this.queueIdleTask(async () => {
+      const UTMP = await UtmTracker.get();
       const params =  {
         ...data,
         ...UTMP,