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

让我创建一篇关于如何在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：

# 在项目的client目录下执行
cd client
npm install node-machine-id --save

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

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

// client/electron/main.jsconst { 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库获取系统唯一IDconst 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给渲染进程：

// client/preload.jsconst { contextBridge, ipcRenderer } = require('electron');// 调试信息
console.log('preload.js 正在加载...');function logToConsole(message) {console.log(`[preload] ${message}`);
}// 暴露API给渲染进程
contextBridge.exposeInMainWorld('electron', {// 获取系统信息 - 返回PromisegetSystemInfo: 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 - 返回PromisegetMachineId: 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脚本：

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)中，添加获取设备信息的功能：

// 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;// 获取设备IDconsole.log('正在调用getMachineId...');const id = await window.electron.getMachineId();console.log('获取到设备ID:', id);deviceId.value = id;// 保存到localStoragelocalStorage.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 = '';// 确保有设备IDif (!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：

// 检查electron对象是否存在
console.log('window.electron 对象存在?', !!window.electron);// 测试调用API
if (window.electron) {// 测试异步APIwindow.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’

确保已正确安装依赖：

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通信