记录一下入门过程,配合VueUse的useCookies,实现为用户的每次请求自动附带浏览器指纹。
添加依赖(PNPM)
pnpm add @fingerprintjs/fingerprintjs-pro
./src/hooks/fingerprintjs.ts
注意查阅好Cookie同源策略的配置,这里的httpOnly: false
是为了开发环境的http环境也能够生成Cookie,后续自行考量修改、增加domain等安全策略配置,以及合适的有效期限maxAge
import FingerprintJS from '@fingerprintjs/fingerprintjs-pro'
import { FINGER_ID } from '@/hooks/map'
const cookie = useCookies()
// 初始化Fingerprint
if (!cookie.get(FINGER_ID)) {
FingerprintJS.load({ apiKey: import.meta.env.VITE_FINGERPRINT_KEY })
.then(fp => fp.get())
.then(({ visitorId }) => {
cookie.set(FINGER_ID, visitorId, {
maxAge: 999999,
secure: true,
httpOnly: false,
})
console.log('FG Inited', cookie.get(FINGER_ID))
})
}
./src/main.ts
import '@/hooks/fingerprint'