目标
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位字符串