Add fingerprint tracker (#166)

Co-authored-by: Germey <[email protected]>

change/@acedatacloud-nexior-c5f5602a-5ccd-4b43-b071-fea81e902179.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add tracker for fingerprint",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

nginx.conf

@@ -1,7 +1,14 @@
 server {
     listen       80;
     server_name  localhost;
+
+    # ---- Set shared proxy headers once here ----
+    # Make sure to include these BEFORE your location blocks.
     proxy_http_version 1.1;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header Host $host;
 
     location /api/v1/ {
         proxy_pass https://platform.acedata.cloud;

package.json

@@ -35,6 +35,7 @@
     "@codemirror/lang-php": "^6.0.1",
     "@codemirror/lang-python": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",

src/main.ts

@@ -20,7 +20,8 @@ import {
   initializeTitle,
   initializeCurrency,
   initializeExchangeRate,
-  initializeRedirect
+  initializeRedirect,
+  initializeFingerprint
 } from './utils/initializer';
 
 const main = async () => {
@@ -38,6 +39,7 @@ const main = async () => {
   initializeDescription();
   initializeKeywords();
   initializeFavicon();
+  initializeFingerprint();
 
   const app = createApp(App);
 

src/operators/common.ts

@@ -2,6 +2,7 @@ import store from '@/store';
 import { getBaseUrlPlatform } from '@/utils';
 import axios, { AxiosInstance } from 'axios';
 import qs from 'qs';
+import { getCookie } from 'typescript-cookie';
 
 const httpClient: AxiosInstance = axios.create({
   baseURL: `${getBaseUrlPlatform()}/api/v1`,
@@ -16,9 +17,23 @@ const httpClient: AxiosInstance = axios.create({
 
 httpClient.interceptors.request.use((config) => {
   const accessToken = store.getters.token?.access;
+  const userId = store.getters.user?.id;
+  const fingerprint = store.getters.fingerprint;
+  const locale = getCookie('LOCALE');
+  console.debug('userId', userId);
+  console.debug('fingerprint', fingerprint);
   if (accessToken) {
     config.headers['Authorization'] = `Bearer ${accessToken}`;
   }
+  if (locale) {
+    config.headers['accept-language'] = locale;
+  }
+  if (fingerprint) {
+    config.headers['x-fingerprint'] = fingerprint;
+  }
+  if (userId) {
+    config.headers['x-user-id'] = userId;
+  }
   return config;
 });
 

src/store/common/actions.ts

@@ -1,10 +1,11 @@
 import { ActionContext } from 'vuex';
-import { IRootState } from '../common/models';
+import { IRootState } from './models';
 import { userOperator, oauthOperator, siteOperator, exchangeOperator } from '@/operators';
 import { IToken, IUser } from '@/models';
 import { getSiteOrigin } from '@/utils/site';
 import { loginRedirect } from '@/utils';
 import { SURFACE_ANDROID, SURFACE_IOS } from '@/constants';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
 
 export const resetAll = ({ commit }: ActionContext<IRootState, IRootState>) => {
   commit('resetToken');
@@ -39,6 +40,10 @@ export const setExchange = ({ commit }: ActionContext<IRootState, IRootState>, p
   commit('setExchange', payload);
 };
 
+export const setFingerprint = ({ commit }: ActionContext<IRootState, IRootState>, payload: any) => {
+  commit('setFingerprint', payload);
+};
+
 export const getUser = async ({ commit }: ActionContext<IRootState, IRootState>): Promise<IUser> => {
   console.debug('start to get user');
   try {
@@ -52,6 +57,15 @@ export const getUser = async ({ commit }: ActionContext<IRootState, IRootState>)
   }
 };
 
+export const getFingerprint = async ({ commit }: ActionContext<IRootState, IRootState>) => {
+  const fp = await FingerprintJS.load();
+  const result = await fp.get();
+  const visitorId = result.visitorId;
+  console.debug('visitorId', visitorId);
+  commit('setFingerprint', visitorId);
+  return visitorId;
+};
+
 export const getToken = async ({ commit }: ActionContext<IRootState, IRootState>, code: string): Promise<IToken> => {
   console.debug('start to get token using code', code);
   try {
@@ -155,8 +169,10 @@ export default {
   resetUser,
   resetSite,
   setToken,
+  setFingerprint,
   setCurrency,
   setUser,
+  getFingerprint,
   getExchangeRate,
   getToken,
   getUser,

src/store/common/getters.ts

@@ -20,10 +20,15 @@ export const site = (state: IRootState): any => {
   return state.site;
 };
 
+export const fingerprint = (state: IRootState): any => {
+  return state.fingerprint;
+};
+
 export default {
   authenticated,
   user,
   token,
   site,
+  fingerprint,
   setting
 };

src/store/common/models.ts

@@ -15,6 +15,7 @@ export interface ICommonState {
   setting?: ISetting;
   site?: ISite;
   currency: string;
+  fingerprint?: string;
   auth: {
     flow: 'popup' | 'redirect';
     visible: boolean;

src/store/common/mutations.ts

@@ -22,6 +22,10 @@ export const setAuth = (state: IRootState, payload: any): void => {
   };
 };
 
+export const setFingerprint = (state: IRootState, payload: any): void => {
+  state.fingerprint = payload;
+};
+
 export const resetToken = (state: IRootState): void => {
   state.token = {};
 };
@@ -59,6 +63,7 @@ export default {
   setCurrency,
   setExchange,
   resetUser,
+  setFingerprint,
   setToken,
   resetToken,
   resetSite

src/store/common/persist.ts

@@ -1 +1 @@
-export default ['user', 'token', 'setting', 'locale', 'dark', 'site', 'currency', 'exchange'];
+export default ['user', 'token', 'setting', 'locale', 'dark', 'site', 'currency', 'exchange', 'fingerprint'];

src/store/common/state.ts

@@ -5,9 +5,11 @@ import chatdocState from '../chatdoc/state';
 import qrartState from '../qrart/state';
 import lumaState from '../luma/state';
 import sunoState from '../suno/state';
+import headshotsState from '../headshots/state';
 
 export default (): IRootState => {
   return {
+    fingerprint: undefined,
     currency: 'usd',
     exchange: undefined,
     user: {},
@@ -27,6 +29,7 @@ export default (): IRootState => {
     midjourney: midjourneyState(),
     qrart: qrartState(),
     luma: lumaState(),
-    suno: sunoState()
+    suno: sunoState(),
+    headshots: headshotsState()
   };
 };

src/utils/initializer.ts

@@ -214,3 +214,7 @@ export const initializeRedirect = async () => {
     window.location.href = newUrl;
   }
 };
+
+export const initializeFingerprint = async () => {
+  await store.dispatch('getFingerprint');
+};

yarn.lock

@@ -306,6 +306,13 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fingerprintjs/fingerprintjs@^4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.5.1.tgz#816efff1f5880f1e1639f6e5051eb7d5f0a4192c"
+  integrity sha512-hKJaRoLHNeUUPhb+Md3pTlY/Js2YR4aXjroaDHpxrjoM8kGnEFyZVZxXo6l3gRyKnQN52Uoqsycd3M73eCdMzw==
+  dependencies:
+    tslib "^2.4.1"
+
 "@floating-ui/core@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz"
@@ -4550,7 +4557,16 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4591,7 +4607,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4605,6 +4621,13 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -4831,6 +4854,11 @@ tslib@^2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.4.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@@ -5121,8 +5149,7 @@ workspace-tools@^0.36.3:
     js-yaml "^4.1.0"
     micromatch "^4.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -5140,6 +5167,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"