什么是浏览器指纹
浏览器指纹咱们能够理解成是一个用户设备的浏览器的惟一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>

备注： 本文主要参考如下文章
https://zzzmh.cn/post/c7fdd63b0dbd45af9fd49141e2b03547
https://blog.csdn.net/luo_Json/article/details/100517956
https://blog.csdn.net/qq_29169813/article/details/86672205