Fingerprint: 浏览器指纹获取库

记录一下入门过程,配合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'
暂无评论

发送评论 编辑评论


				
上一篇
下一篇