fingerprintjs 设备指纹库

前言

在一些情境下，前端需要获取设备的唯一id作为标识，比如在多设备登录时，需要获取设备的唯一id来区分同用户的不同设备，这时候就需要使用指纹库。

fingerprintjs 会根据以下信息组合生成一个设备指纹

• 浏览器信息
• 操作系统信息
• 屏幕分辨率
• 时区
• 硬件信息
• 字体渲染方式
• 等十几种参数

最后生成一个设备指纹，这个指纹是唯一的，建议生成后保存到localStorage中，下次使用时直接读取。

使用方式

安装

npm

npm i @fingerprintjs/fingerprintjs

yarn

yarn add @fingerprintjs/fingerprintjs 

使用

import FingerprintJS from '@fingerprintjs/fingerprintjs';
export async function getFingerprint() {
  // 如果已经有指纹，则直接返回
  const fingerprint = localStorage.getItem('fingerprint');
  if (fingerprint) {
    return fingerprint;
  }
  // 如果没有指纹，则生成指纹
  const fp = await FingerprintJS.load();
  const result = await fp.get();
  localStorage.setItem('fingerprint', result.visitorId);
  return result.visitorId;
}

试一试

Demo

你可以在不同设备上运行这个demo，你会发现指纹是不一样的。

Demo源码

  import FingerprintJS from '@fingerprintjs/fingerprintjs';
  import { useState, useEffect } from 'react';

  const FingerprintjsDemo = () => {
      const [fingerprint, setFingerprint] = useState('');
      useEffect(() => {
          const getFingerprint = async () => {
              const fp = await FingerprintJS.load();
              const result = await fp.get();
              setFingerprint(result.visitorId);
          }
          getFingerprint();
      }, []);
      return (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <h1>这是这台设备的指纹</h1>
              <p>{fingerprint}</p>
          </div>
      )
  }

  export default FingerprintjsDemo;