集成 FingerprintJS 生成浏览器指纹到 Vue 项目

文档目标

本文档将指导如何在现有的 Vue 项目中引入 FingerprintJS 库，并展示如何获取和显示用户的浏览器指纹、系统信息（操作系统、浏览器类型、语言、屏幕分辨率等）。该功能可用于用户设备的识别、自动登录验证或安全监控等场景。

前提条件

• 已有 Vue.js 项目环境。
• 基本了解 Vue 组件、生命周期钩子（如 mounted）、数据绑定（data、methods）等概念。
• 基本了解 JavaScript 的 navigator 对象及其常用属性。

集成步骤

1. 安装 FingerprintJS 库

FingerprintJS 是一个轻量级的 JavaScript 库，用于生成设备的唯一指纹。它通过采集用户的浏览器、操作系统、屏幕分辨率等信息，生成一个唯一的 visitorId。

在项目根目录下，使用 npm 安装 FingerprintJS：

npm install @fingerprintjs/fingerprintjs

2. 创建 Vue 组件用于展示系统信息和浏览器指纹

创建一个新的组件 BrowserInfo.vue 来展示浏览器、系统信息和生成的指纹。

在 src/components/ 目录下新建文件 BrowserInfo.vue：

touch src/components/BrowserInfo.vue

然后在该文件中添加以下内容：

<template>
  <div>
    <h1>User Browser and System Information</h1>

    <!-- 浏览器和系统信息展示 -->
    <div v-if="info">
      <h2>General Information</h2>
      <pre>{{ info }}</pre>
    </div>

    <!-- Fingerprint展示 -->
    <div v-if="fingerprint">
      <h2>Browser Fingerprint</h2>
      <pre>{{ fingerprint }}</pre>
    </div>
  </div>
</template>

<script>
// 引入 FingerprintJS
import FingerprintJS from '@fingerprintjs/fingerprintjs';

export default {
  data() {
    return {
      info: null,         // 存储浏览器和系统信息
      fingerprint: null,  // 存储浏览器指纹
    };
  },
  mounted() {
    this.getBrowserInfo();  // 获取浏览器信息
    this.generateFingerprint();  // 生成并获取浏览器指纹
  },
  methods: {
    // 获取浏览器和系统的详细信息
    getBrowserInfo() {
      const userAgent = navigator.userAgent;
      const platform = navigator.platform;
      const language = navigator.language;
      const screenResolution = `${screen.width}x${screen.height}`;
      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      const hardwareConcurrency = navigator.hardwareConcurrency || 'Unknown'; // 获取CPU线程数量
      const memory = navigator.deviceMemory || 'Unknown'; // 获取设备内存
      const cookiesEnabled = navigator.cookieEnabled ? 'Enabled' : 'Disabled'; // 检测Cookie是否启用
      const plugins = Array.from(navigator.plugins).map(plugin => plugin.name).join(', ') || 'No plugins detected'; // 获取插件信息

      // 手动解析User Agent以确定浏览器类型
      let browserName = 'Unknown Browser';
      if (userAgent.indexOf('Chrome') > -1) {
        browserName = 'Google Chrome';
      } else if (userAgent.indexOf('Firefox') > -1) {
        browserName = 'Mozilla Firefox';
      } else if (userAgent.indexOf('Safari') > -1) {
        browserName = 'Apple Safari';
      } else if (userAgent.indexOf('Edge') > -1) {
        browserName = 'Microsoft Edge';
      } else if (userAgent.indexOf('Trident') > -1) {
        browserName = 'Microsoft Internet Explorer';
      }

      // 存储所有信息
      this.info = {
        "Browser Name": browserName,
        "User Agent": userAgent,
        "Platform (OS)": platform,
        "Language": language,
        "Screen Resolution": screenResolution,
        "Time Zone": timeZone,
        "CPU Cores (Threads)": hardwareConcurrency,
        "Device Memory (GB)": memory,
        "Cookies Enabled": cookiesEnabled,
        "Plugins": plugins,
      };
    },

    // 生成浏览器指纹
    generateFingerprint() {
      FingerprintJS.load().then(fp => {
        fp.get().then(result => {
          this.fingerprint = result.visitorId; // 返回唯一的访客ID（指纹）
        });
      });
    },
  },
};
</script>

<style scoped>
h1, h2 {
  font-family: Arial, sans-serif;
}
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  word-wrap: break-word;
}
</style>

3. 集成组件到主应用中

在现有的 Vue 应用中集成这个组件。假设你希望在 App.vue 中展示该功能：

1. 打开 src/App.vue 文件。
2. 导入并使用 BrowserInfo 组件。

<template>
  <div id="app">
    <h1>Welcome to the Vue App</h1>
    <!-- 引入 BrowserInfo 组件 -->
    <BrowserInfo />
  </div>
</template>

<script>
import BrowserInfo from './components/BrowserInfo.vue';

export default {
  name: 'App',
  components: {
    BrowserInfo
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
</style>

4. 运行项目

确保项目已正确配置，运行以下命令启动开发服务器：

npm run serve

访问 http://localhost:8080，你会看到页面上展示的用户浏览器、系统信息和浏览器指纹。

效果预览

在页面加载后，你将能够看到以下信息：

1. 浏览器名称：例如 "Google Chrome"、"Mozilla Firefox" 等。
2. 操作系统：例如 "Win32"（Windows）、"Linux x86_64" 等。
3. 语言：用户浏览器的语言设置（如 en-US）。
4. 屏幕分辨率：用户设备的屏幕宽度和高度（如 1920x1080）。
5. 时区：例如 "America/New_York"。
6. CPU线程数：例如 8。
7. 设备内存：例如 16 GB。
8. 是否启用 Cookies：例如 "Enabled"。
9. 安装的插件：用户浏览器安装的插件（如 Chrome PDF Viewer）。

页面上还将显示由 FingerprintJS 生成的唯一 visitorId，即浏览器指纹，用于用户设备的唯一标识。

扩展与安全考量

1. 安全性：浏览器指纹不应作为唯一的身份验证手段，建议结合其他验证方法（如多因素认证、用户名密码）一起使用，确保安全性。

2. 隐私保护：浏览器指纹信息可能涉及用户隐私，因此应遵守相关隐私法规（如 GDPR）。用户需知晓并同意收集这些信息。

3. 自动登录：通过存储生成的指纹，你可以将其与用户会话关联，便于后续自动登录，或者在检测到异常设备指纹时触发额外验证流程。

4. 增强插件检测：你可以进一步扩展对浏览器插件的检测，以识别潜在的恶意扩展，提升应用的安全性。

总结

通过集成 FingerprintJS 和 Vue.js，你可以快速获取用户的浏览器和系统信息，并生成唯一的指纹用于设备识别。这不仅增强了用户设备的追踪和验证功能，还可以用于安全监控、自动登录等多个场景。

---