Electron應用中獲取設備唯一ID和系統信息

讓我創建一篇關于如何在Electron應用中獲取設備唯一ID和系統信息，并在登錄時使用這些信息的博客文章。我將確保步驟明確、條理清晰，適合初學者和有經驗的開發者。

這篇博客應包含以下部分：

介紹 - 為什么需要獲取設備信息
前提條件和安裝依賴
主進程(main.js)配置 - 添加IPC處理程序
預加載腳本(preload.js)配置 - 暴露安全API
渲染進程(前端Vue組件)使用
調試技巧和常見問題
安全和隱私考慮
總結和進一步閱讀

這樣的結構應該能全面覆蓋這個功能的實現并幫助讀者理解每個部分的作用。

在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);});
}