前端页面如何在浏览器中检测生成设备的唯一标识

时间:2024-02-20 21:22:53

一、前提:

  js本身是不能通过浏览器获取设备唯一标识的,但是可以获取其它的信息作为唯一标识,给用户一个 visitorId,并且根据这个 visitorId 记录一些用户的习惯。总之就是根据浏览器的一些特性生成的唯一标识。

二、业务场景:

  例如收藏或者关注功能,前端实现。

三、解决方案:FingerprintJS

  FingerprintJS 是一个浏览器指纹库,它查询浏览器属性(canvas、webgl、UserAgent、AudioContext等)并从中计算 hash 的访问者标识符。因为指纹哈希依赖于所有浏览器属性的精确匹配,使得它们在 > 2周的时间间隔内不稳定,所以自己要做下永久存储 localStorage,只有第一次存下用户Id就可以了。

  1.github:https://github.com/fingerprintjs/fingerprintjs

   2.使用方法:

  npm i @fingerprintjs/fingerprintjs;

  import FingerprintJS from \'@fingerprintjs/fingerprintjs\';

  // Initialize an agent at application startup.

  const fpPromise = FingerprintJS.load();

(async () => {
  // Get the visitor identifier when you need it.
  const fp = await fpPromise
  const result = await fp.get()

  // This is the visitor identifier:
  const visitorId = result.visitorId
  console.log(visitorId)
})()