首页 前端知识 浏览器唯一标识(浏览器指纹)fingerprintjs

浏览器唯一标识(浏览器指纹)fingerprintjs

2024-07-24 23:07:08 前端知识 前端哥 49 417 我要收藏

目标

H5用户在未登录前,经常也需要记录游客身份,便于记录用户操作习惯,给用户推荐相关产品。H5项目是运行在浏览器环境的,浏览器没有提供相关设备ID的信息。很多项目会随机生成一个UUID,并持久化存储在localStorage,但是localStorage也有被清除的风险,就需要一个不会变也不会被清掉的值作为游客身份的唯一标识。

方案

fingerprintjs

原理

通过浏览器canvas绘画出一张指定的图,将绘画出来的图片转为base64格式,然后再将base64内容通过指定编码方式转化为fingerprintID。因为不同浏览器,由于浏览器api、版本、系统等原因,绘画出来的图片会存在非常细微的差异,人眼很难辨别,所以转换出来的base64会不一样。

安装fingerprintjs

npm i @fingerprintjs/fingerprintjs -S

使用

import FingerprintJS from "@fingerprintjs/fingerprintjs";

const getFingerPrintID = async () => {
  const fpPromise = await FingerprintJS.load();
  const result = await fpPromise.get();
  return result.visitorId;
}

const id = await getFingerPrintID();
console.log(id)

生成32位字符串

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14269.html
标签
评论
发布的文章

JSON File 格式详解

2024-08-08 23:08:37

nvm安装node一直没有npm

2024-08-08 23:08:25

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!