Electron应用中获取设备唯一ID和系统信息

接着奏乐接着舞。2025-03-08 13:06

让我创建一篇关于如何在Electron应用中获取设备唯一ID和系统信息，并在登录时使用这些信息的博客文章。我将确保步骤明确、条理清晰，适合初学者和有经验的开发者。

这篇博客应包含以下部分：

  1. 介绍 - 为什么需要获取设备信息
  2. 前提条件和安装依赖
  3. 主进程(main.js)配置 - 添加IPC处理程序
  4. 预加载脚本(preload.js)配置 - 暴露安全API
  5. 渲染进程(前端Vue组件)使用
  6. 调试技巧和常见问题
  7. 安全和隐私考虑
  8. 总结和进一步阅读

这样的结构应该能全面覆盖这个功能的实现并帮助读者理解每个部分的作用。

在Electron应用中获取设备唯一ID和系统信息

简介

在现代应用程序开发中，获取设备唯一标识和系统信息是一项常见需求，尤其对于需要设备识别、登录验证和用户行为分析的应用。本文将详细讲解如何在Electron应用中实现设备信息获取功能，并将其与登录流程集成。

为什么需要获取设备信息？

  • 设备识别：跟踪和识别用户的不同设备
  • 安全验证：增强账号安全，防止未授权登录
  • 数据分析：了解用户设备分布和使用环境
  • 功能适配：根据系统环境提供定制化功能

前提条件

  • Node.js 和 npm 已安装
  • 基本的Electron应用结构
  • Vue.js前端框架(本文使用Vue 3)

实现步骤

1. 安装必要依赖

首先，我们需要安装node-machine-id库来获取设备唯一ID：

bash 复制代码 
# 在项目的client目录下执行
cd client
npm install node-machine-id --save

2. 配置主进程(main.js)

在Electron的主进程文件中，添加获取系统信息和设备ID的IPC处理函数：

javascript 复制代码 
// client/electron/main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const os = require('os')
const { machineIdSync } = require('node-machine-id')

// 其他现有代码...

// 添加获取系统信息的处理函数
ipcMain.handle('get-system-info', () => {
  try {
    const systemInfo = {
      platform: process.platform,  // 'win32', 'darwin', 'linux'等
      arch: process.arch,          // 'x64', 'arm64'等
      osName: os.type(),           // 操作系统类型
      osVersion: os.release(),     // 操作系统版本
      hostname: os.hostname(),     // 主机名
      totalMem: os.totalmem(),     // 总内存(字节)
      cpuCores: os.cpus().length   // CPU核心数
    };
    return systemInfo;
  } catch (error) {
    console.error('获取系统信息失败:', error);
    return {
      platform: 'unknown',
      arch: 'unknown',
      osName: 'unknown',
      osVersion: 'unknown',
      hostname: 'unknown'
    };
  }
});

// 添加获取设备唯一ID的处理函数
ipcMain.handle('get-machine-id', () => {
  try {
    // 使用node-machine-id库获取系统唯一ID
    const machineId = machineIdSync(true);
    console.log('生成的machineId:', machineId);
    return machineId;
  } catch (error) {
    console.error('获取设备ID失败:', error);
    // 生成一个随机ID作为后备方案
    const fallbackId = 'device-' + Math.random().toString(36).substring(2, 15);
    return fallbackId;
  }
});

3. 创建预加载脚本(preload.js)

预加载脚本是连接Electron主进程和渲染进程的桥梁，通过它我们可以安全地暴露主进程API给渲染进程：

javascript 复制代码 
// client/preload.js

const { contextBridge, ipcRenderer } = require('electron');

// 调试信息
console.log('preload.js 正在加载...');

function logToConsole(message) {
  console.log(`[preload] ${message}`);
}

// 暴露API给渲染进程
contextBridge.exposeInMainWorld('electron', {
  // 获取系统信息 - 返回Promise
  getSystemInfo: async () => {
    logToConsole('调用getSystemInfo');
    try {
      const result = await ipcRenderer.invoke('get-system-info');
      logToConsole(`getSystemInfo结果: ${JSON.stringify(result)}`);
      return result;
    } catch (error) {
      logToConsole(`getSystemInfo错误: ${error.message}`);
      throw error;
    }
  },
  
  // 获取设备ID - 返回Promise
  getMachineId: async () => {
    logToConsole('调用getMachineId');
    try {
      const result = await ipcRenderer.invoke('get-machine-id');
      logToConsole(`getMachineId结果: ${result}`);
      return result;
    } catch (error) {
      logToConsole(`getMachineId错误: ${error.message}`);
      throw error;
    }
  },
  
  // 测试API可用性 - 直接返回值
  testAPI: () => {
    logToConsole('testAPI被调用');
    return '测试API可用';
  },
  
  // 应用版本 - 直接返回值
  getVersion: () => {
    return '1.0.0';
  }
});

console.log('preload.js 已完成加载');

4. 配置BrowserWindow，确保使用preload.js

在main.js中创建窗口时，确保正确配置了preload脚本：

javascript 复制代码 
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    // 其他窗口配置...
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      webSecurity: false,
      preload: path.join(__dirname, '../preload.js')  // 预加载脚本路径
    }
  });
  
  // 加载应用...
}

5. 在Vue组件中使用设备信息

在登录组件(如LoginView.vue)中，添加获取设备信息的功能：

javascript 复制代码 
// client/src/views/LoginView.vue

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/stores/useAppStore';

const router = useRouter();
const appStore = useAppStore();

// 表单数据
const username = ref('admin');
const password = ref('admin');
const remember = ref(false);
const errorMsg = ref('');
const isLoading = ref(false);

// 设备信息
const deviceId = ref('');
const systemInfo = ref(null);

// 检查API是否可用
const checkElectronAPI = () => {
  console.log('测试Electron API是否可用...');
  if (window.electron) {
    console.log('window.electron 对象存在');
    
    // 检查异步函数是否存在
    console.log('getSystemInfo 存在?', typeof window.electron.getSystemInfo === 'function');
    console.log('getMachineId 存在?', typeof window.electron.getMachineId === 'function');
  } else {
    console.log('window.electron 对象不存在，可能在浏览器环境或preload.js未加载');
  }
};

// 获取系统信息和设备ID
const getSystemInfo = async () => {
  console.log('开始获取系统信息...');
  try {
    // 检查electron对象是否可用
    if (typeof window.electron !== 'undefined') {
      console.log('检测到Electron环境');
      
      try {
        // 获取系统信息
        console.log('正在调用getSystemInfo...');
        const info = await window.electron.getSystemInfo();
        console.log('获取到系统信息:', info);
        systemInfo.value = info;
        
        // 获取设备ID
        console.log('正在调用getMachineId...');
        const id = await window.electron.getMachineId();
        console.log('获取到设备ID:', id);
        deviceId.value = id;
        
        // 保存到localStorage
        localStorage.setItem('system_info', JSON.stringify(info));
        localStorage.setItem('device_id', id);
        
        return true;
      } catch (err) {
        console.error('调用Electron API出错:', err);
        return false;
      }
    } else {
      console.log('非Electron环境，使用Web备选方案');
      
      // Web环境下的备选方案
      if (!localStorage.getItem('device_id')) {
        const randomId = 'web-' + Math.random().toString(36).substring(2, 15);
        localStorage.setItem('device_id', randomId);
        deviceId.value = randomId;
      } else {
        deviceId.value = localStorage.getItem('device_id');
      }
      
      const webInfo = {
        platform: 'web',
        userAgent: navigator.userAgent,
        language: navigator.language
      };
      
      systemInfo.value = webInfo;
      localStorage.setItem('system_info', JSON.stringify(webInfo));
      
      return true;
    }
  } catch (error) {
    console.error('获取系统信息总体失败:', error);
    return false;
  }
};

// 登录处理函数
const handleLogin = async () => {
  // 表单验证
  if (!username.value || !password.value) {
    errorMsg.value = !username.value ? '请输入用户名' : '请输入密码';
    return;
  }
  
  try {
    isLoading.value = true;
    errorMsg.value = '';
    
    // 确保有设备ID
    if (!deviceId.value) {
      console.log('登录前获取设备ID');
      await getSystemInfo();
    }
    
    // 组装登录数据
    const loginData = {
      username: username.value,
      password: password.value,
      deviceId: deviceId.value || localStorage.getItem('device_id'),
      systemInfo: systemInfo.value || JSON.parse(localStorage.getItem('system_info') || '{}')
    };
    
    // 调用登录API  
};

// 组件挂载时获取系统信息
onMounted(() => {
  console.log('组件已挂载，获取系统信息');
  checkElectronAPI();
  getSystemInfo();
});
</script>

调试技巧

使用控制台测试API

在浏览器开发者工具的控制台中，可以直接测试API：

javascript 复制代码 
// 检查electron对象是否存在
console.log('window.electron 对象存在?', !!window.electron);

// 测试调用API
if (window.electron) {
  // 测试异步API
  window.electron.getSystemInfo().then(info => {
    console.log('系统信息:', info);
    localStorage.setItem('system_info', JSON.stringify(info));
  }).catch(err => {
    console.error('获取系统信息失败:', err);
  });
  
  window.electron.getMachineId().then(id => {
    console.log('设备ID:', id);
    localStorage.setItem('device_id', id);
  }).catch(err => {
    console.error('获取设备ID失败:', err);
  });
}

检查localStorage

在开发者工具的Application/Storage标签中，查看localStorage是否正确保存了设备信息：

  • system_info
  • device_id

常见问题解决

1. Cannot find module 'node-machine-id'

确保已正确安装依赖：

bash 复制代码 
npm install node-machine-id --save

2. window.electron对象为undefined

可能的原因：

  • preload.js路径配置错误
  • contextIsolation设置不正确
  • preload.js中没有正确暴露API

解决方案：检查BrowserWindow的webPreferences配置，确保preload路径正确。

3. 调用API时出现"不是函数"错误

区分同步和异步API：

  • 同步API (如testAPI)：直接调用 const result = window.electron.testAPI()
  • 异步API (如getSystemInfo)：使用Promise await window.electron.getSystemInfo()

安全注意事项

  1. 不要暴露敏感API：只暴露渲染进程需要的API，遵循最小权限原则
  2. 处理异常：所有API调用都应有适当的错误处理
  3. 保护用户隐私：仅收集必要的设备信息，并告知用户
  4. 安全存储：避免在localStorage中存储敏感信息，考虑使用加密

总结

通过本文介绍的方法，可以在Electron应用中安全地获取设备唯一ID和系统信息，并将其与登录流程集成。这种方式遵循了Electron的安全最佳实践，使用上下文隔离和预加载脚本来安全地暴露主进程API给渲染进程。

正确实现后，能够识别用户设备，增强安全性，并提供更好的用户体验。此功能对于需要设备绑定、多设备管理和用户行为分析的应用特别有用。

参考文档

  1. Electron安全性文档
  2. node-machine-id库文档
  3. Electron上下文隔离
  4. Electron IPC通信
相关推荐
Fantasywt2 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
IT、木易2 小时前
大白话JavaScript实现一个函数，将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
Mr.NickJJ3 小时前
JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件
开发语言·javascript·react.js
张拭心5 小时前
2024 总结，我的停滞与觉醒
android·前端
念九_ysl5 小时前
深入解析Vue3单文件组件：原理、场景与实战
前端·javascript·vue.js
Jenna的海糖5 小时前
vue3如何配置环境和打包
前端·javascript·vue.js
Mr.NickJJ5 小时前
React Native v0.78 更新
javascript·react native·react.js
星之卡比*5 小时前
前端知识点---库和包的概念
前端·harmonyos·鸿蒙
灵感__idea5 小时前
Vuejs技术内幕：数据响应式之3.x版
前端·vue.js·源码阅读
烛阴5 小时前
JavaScript 构造器进阶：掌握 “new” 的底层原理，写出更优雅的代码！
前端·javascript
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04苍穹外卖面试总结05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06本地部署DeepSeek教程（Mac版本）07Coze扣子平台完整体验和实践（附国内和国际版对比）08Windows 11 安装 Dify 完整指南 非docker环境09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10macOS 上部署 RAGFlow