前端使用fingerprintjs2获取浏览器指纹

什么是浏览器指纹

浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等

什么是fingerprintjs2

fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（官方宣称其识别精度达到99.5%），详细了解可查看fingerprintjs2官方文档

如何使用fingerprintjs2

以VUE中使用为例

• 安装

npm i fingerprintjs2 -S

• 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。

• 组件中（此例默认以浏览器所有的配置信息生成浏览器指纹）

<template>
  <div id="app">
  </div>
</template>

<script>
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
    };
  },
  async created() {
  	// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
    if (window.requestIdleCallback) {
      requestIdleCallback(() => {
        this.createFingerprint();
      });
    } else {
      setTimeout(() => {
        this.createFingerprint();
      }, 500);
    }
  },
  methods: {
  	// 创建浏览器指纹
	createFingerprint() {
	  // 浏览器指纹
      const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
        const values = components.map(component => component.value); // 配置的值的数组
        const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹
        console.log(components);
        console.log(values);
        console.log(murmur);
        localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
      });
	},
  },
};
</script>

<style lang="less">
</style>

自定义选择浏览器的部分配置信息生成浏览器指纹

• 浏览器可选配置信息如下

var components = [
    {key: 'userAgent', getData: UserAgent},//用户代理
    {key: 'webdriver', getData: webdriver },//网页内驱动软件
    {key: 'language', getData: languageKey},//语言种类
    {key: 'colorDepth', getData: colorDepthKey},	//目标设备或缓冲器上的调色板的比特深度
    {key: 'deviceMemory', getData: deviceMemoryKey},//设备内存
    {key: 'pixelRatio', getData: pixelRatioKey},//设备像素比
    {key: 'hardwareConcurrency', getData: hardwareConcurrencyKey},//可用于运行在用户的计算机上的线程的逻辑处理器的数量。
    {key: 'screenResolution', getData: screenResolutionKey},	//当前屏幕分辨率
    {key: 'availableScreenResolution', getData: availableScreenResolutionKey},//屏幕宽高（空白空间）
    {key: 'timezoneOffset', getData: timezoneOffset},//本地时间与 GMT 时间之间的时间差，以分钟为单位
    {key: 'timezone', getData: timezone},//时区
    {key: 'sessionStorage', getData: sessionStorageKey},//是否会话存储
    {key: 'localStorage', getData: localStorageKey},//是否具有本地存储   
    {key: 'indexedDb', getData: indexedDbKey},//是否具有索引DB
    {key: 'addBehavior', getData: addBehaviorKey},//IE是否指定AddBehavior
    {key: 'openDatabase', getData: openDatabaseKey},//是否有打开的DB
    {key: 'cpuClass', getData: cpuClassKey},//浏览器系统的CPU等级
    {key: 'platform', getData: platformKey},//运行浏览器的操作系统和(或)硬件平台
    {key: 'doNotTrack', getData: doNotTrackKey},//do-not-track设置
    {key: 'plugins', getData: pluginsComponent},//浏览器的插件信息
    {key: 'canvas', getData: canvasKey},//使用 Canvas 绘图
    {key: 'webgl', getData: webglKey},//WebGL指纹信息
    {key: 'webglVendorAndRenderer', getData: webglVendorAndRendererKey},//具有大量熵的WebGL指纹的子集
    {key: 'adBlock', getData: adBlockKey},//是否安装AdBlock
    {key: 'hasLiedLanguages', getData: hasLiedLanguagesKey},//用户是否篡改了语言
    {key: 'hasLiedResolution', getData: hasLiedResolutionKey},//用户是否篡改了屏幕分辨率
    {key: 'hasLiedOs', getData: hasLiedOsKey},	//用户是否篡改了操作系统
    {key: 'hasLiedBrowser', getData: hasLiedBrowserKey},	//用户是否篡改了浏览器
    {key: 'touchSupport', getData: touchSupportKey},//触摸屏检测和能力
    {key: 'fonts', getData: jsFontsKey, pauseBefore: true},	//使用JS/CSS检测到的字体列表
    {key: 'fontsFlash', getData: flashFontsKey, pauseBefore: true},	//已安装的Flash字体列表
    {key: 'audio', getData: audioKey},//音频处理
    {key: 'enumerateDevices', getData: enumerateDevicesKey}	//可用的多媒体输入和输出设备的信息。
]

• 组件中选择浏览器部分配置信息作为参数获取浏览器指纹

<template>
  <div id="app">
  </div>
</template>

<script>
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
    };
  },
  async created() {
  	// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
    if (window.requestIdleCallback) {
      requestIdleCallback(() => {
        this.createFingerprint();
      });
    } else {
      setTimeout(() => {
        this.createFingerprint();
      }, 500);
    }
  },
  methods: {
  	// 创建浏览器指纹
  	createFingerprint() {
	  // 选择哪些信息作为浏览器指纹生成的依据
  	  const options = {
  		fonts: {
  		  extendedJsFonts: true,
  	    },
        excludes: {
          audio: true,
          userAgent: true,
          enumerateDevices: true,
          touchSupport: true,
        },
      };
      // 浏览器指纹
      const fingerprint = Fingerprint2.get(options, (components) => { // 参数只有回调函数或者options为{}时，默认浏览器指纹依据所有配置信息进行生成
        const values = components.map(component => component.value); // 配置的值的数组
        const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹
        console.log(components);
        console.log(values);
        console.log(murmur);
        localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
      });
	},
  },
};
</script>

<style lang="less">
</style>

备注： 本文主要参考以下文章

• Fingerprintjs2设备指纹采集器笔记、
• Fingerprintjs2 浏览器 设备指纹、
• Fingerprintjs2：一款开源设备指纹采集器、
• Fingerprintjs2 实现浏览器指纹采集器 获取用户唯一标识码