基于 Electron 的跨平臺校內服務聚合平臺實現

黑大任，康嘉，崔旭，孫銓鍇，張曉賢

摘要：隨著新操作系統和各種新接口的不斷推出，許多老舊軟件的兼容性不能滿足新平臺的要求。同時，多種新型網絡攻擊方式增加了采用傳統方案的服務器的安全隱患。該文使用 Electron和NodeJS等技術構建了更加安全的跨平臺的新型校內聚合服務平臺，并通過內置校園網認證工具解決了原有校園網客戶端在新操作系統上無法運行的問題。

關鍵詞：跨平臺;Vue;響應式;Electron

中圖分類號：TP311? ? ? ?文獻標識碼：A

文章編號：1009-3044（2021）34-0055-02

由于操作系統的不斷更新，很多操作系統不再支持當前的校園網客戶端。并且，對于大部分校內服務而言，由于使用學校內網沒有提供經過 SSL 加密的連接，因此存在中間人攻擊的可能。同時許多校內服務在瀏覽器環境中運行，沒有經過單獨的隔離，也可能會在瀏覽器中被篡改。

本文基于Electron和NodeJS等技術，通過操作命令行版本的校園網客戶端來實現校園網在多種操作系統下的認證，既具有校園網客戶端的功能特性，又通過內嵌自簽名 SSL 證書實現了對校內服務的聚合導航以及加密訪問。

1 項目整體結構

項目由 daemonserver和 客戶端軟件構成。客戶端軟件面向用戶，提供 GUI來進行校內服務訪問以及校園網故障協助診斷等。

客戶端軟件采用 electron 進行構建大致可以分為 GUI 和邏輯層。GUI 采用 Vue.js 框架進行構建，邏輯層使用 NodeJS，可訪問系統接口，通過 shell 來訪問校園網登錄認證程序，實現校園網認證。

2 技術實現

2.1 客戶端軟件技術實現

客戶端主要基于 Electron技術。Electron 是基于 chromium 開源項目的一套開源跨平臺解決方案。Chromium 項目本身提供了多平臺支持和沙盒支持，使 electron能夠安全地運行在Linux，Windows和macOS 上，實現跨平臺支持。

實現跨平臺需要統一的系統 API抽象層 libuv。libuv是Node的跨平臺異步抽象層，用于抽象 Windows的 IOCP以及 POSIX的 libdev。通過 libuv可以調用系統 API對底層基于 C++ 的校園網客戶端核心進行操作。

electron 中保留了 chromium 使用 webview 來渲染頁面和 V8引擎來執行 JS 代碼的特性，用于渲染桌面應用程序的GUI，而且 electron 在此基礎上添加了 NodeJS 的支持，使得程序可以直接調用系統接口。

electron 中也保留了 chromium 中的進程管理模式，每一個窗口都屬于獨立的渲染進程（Render Process），由主進程進行管理（Main Process）。這種方式的好處是每個窗口都可以有自己的封裝，如果有渲染進程崩潰，也不會影響到其他的渲染進程，同時每一個渲染進程都有自己的沙盒，進程之間彼此隔離，提高安全性。

目前，由于維護成本較低，代碼復用程度高，用戶體驗優異，該技術方案已經被各大軟件巨頭廣泛采用。其中包括微軟，百度，GitHub 等公司都有基于 electron 的產品。

2.1.1 GUI 實現方案

GUI 采用 Vue.js 框架進行構建，運行于渲染進程。Vue.js 是廣受好評的 MVVM 模式的前端框架，通過數據與界面層進行雙向綁定，使得數據和界面能夠分離進行處理，使得開發 Web App 更加方便維護，借助Vue.js可以更好地實現 MVVM模式。

2.1.2 集中式狀態管理

為了更好地實現組件之間的數據交換， 我們使用 vuex 來進行前端組件之間的狀態管理。通過 vuex 可以讓組件之間在傳統的事件/Props方式傳遞數據之外， 使用集中式存儲前端中所有組件的狀態。

vuex 把所有的數據放在一處方便所有組件進行訪問，解決了同級組件以及多層組件之間的信息傳遞問題。

2.1.3 邏輯層實現

使用 electron的主進程來控制渲染進程的邏輯，主進程中內嵌 NodeJS接口，可以直接訪問系統接口來進行操作，主要用于讀取配置文件，以及通過shell 操作校園網登錄認證程序。

2.1.4 進程間通訊

electron 有原生的 IPC 系統，并且和 JS? 的事件進行高度整合。在主進程中使用 ipcMain模塊負責主進程的事件監聽和事件發送，在渲染進程中使用 ipcRenderer模塊進行事件的監聽和發送。這兩個模塊都是繼承自 NodeJS中的 EventEmitter模塊。

校園網認證程序也是作為軟件的子進程運行，由于是調用 shell 所以直接使用命令行參數向校園網認證程序發送數據，同時 NodeJS會記錄 shell的各種流來向用戶返回信息。例如如果校園網認證程序通過 stdout輸出正常的 log信息，主進程收到之后會調用回調函數將log發送給渲染進程或記錄到log文件中，如果校園網認證程序通過stderr返回錯誤，主進程也會向渲染進程發送有關事件，進而在UI提示用戶有關錯誤。

2.1.5 應用打包和保護

由于 JavaScript是一種相對而言比較自由的語言，在編碼過程中開發者可能會使用不安全的或者可能造成內存泄漏的代碼模式，所以我們需要使用 ESLint來對代碼進行規范，對代碼中的問題進行及時檢查。ESLint是一種幫助開發者查找代碼中可能存在問題的語法檢查工具，使用 AST技術除了進行編程模式的檢查，ESLint還可以對代碼的縮進格式進行規范，幫助開發者生產穩定的便于維護的代碼。

雖然electron有了 V8 解釋器能夠讓代碼快速執行，但是JS 的最大缺陷在于它是一種腳本語言，并且暫時沒有像KPHP 一樣能夠編譯成二進制的方案，這也導致早期的基于electron 的應用程序極易被篡改或破解。本程序使用 asar 封裝確保應用的內部邏輯不會被用戶隨意訪問和修改。

asar 是electron 使用的一種拓展存檔文件，類似 tar 文件，在沒有壓縮的情況下把所有的文件打包到一起，同時具備隨機訪問優化，可以在一定程度上提升程序的運行速度。

要把UI代碼和邏輯層代碼存放在一起，如果要打包成能夠發行的客戶端軟件，需要先試用 Webpack將有關邏輯進行打包，之后使用 electron-builder封裝到對應平臺的安裝文件中。

2.1.6 通過與DaemonServer協同診斷網絡

DaemonServer可以協助桌面客戶端對網絡進行診斷。由于 DaemonServer 24小時在線，所以可以協助校園網用戶在遇到網絡故障的時候判斷有沒有成功連接到LAN，如果客戶端無法ping通DaemonServer， 則說明該用戶沒有連接到 LAN，此時用戶可以檢查是不是網線沒有插好，或者交換機有沒有宕機。如果用戶能夠ping通DaemonServer卻依然不能上網，說明用戶是因為其他原因導致的無法連接到外網，此時用戶可以查閱DaemonServer提供的網絡診斷頁面，幫助用戶進行排查。

2.2 DaemonServer技術實現

由于校內服務的部署狀態有時會發生變化，所以軟件并沒有將校內服務寫死在程序中，而是使用外部的 DaemonServer來動態配置校內服務的信息，每次程序運行就會向 DaemonServer發送請求來獲取校內服務的IP地址。

除了提供校內服務的鏈接之外，DaemonServer還可協助進行校園網故障診斷，同時提供靜態的幫助文檔頁面，協助校園網用戶排查故障。

2.2.1 反向代理

由于 DaemonServer同時需要提供多種服務，所以使用 Nginx進行反向代理，把不同的服務分配個不同的端口。

有關校園網故障的幫助文檔屬于靜態資源，直接由 Nginx分配給80端口。有關校內服務列表存放在 DaemonServer的MySQL數據庫中，使用 express提供 API來進行訪問和修改，由Nginx分配給8080端口。

2.2.2 角色分配和權限設計

由于校內服務不是一成不變的，所以 DaemonServer將有關校內服務的 IP地址存放在自身的數據庫中，管理員可以定期對相關數據進行維護。據此將 expressAPI分成兩類：需要認證即可訪問的用戶接口以及需要身份驗證的管理員接口。

管理員接口可以對數據庫中的校內服務信息進行增刪和修改，需要在 HTTP訪問頭添加Header才能正常訪問。相關驗證在 API訪問時的中間件進行，面向切面進行處理。

3結語

本項目將校園網登錄認證服務以及其他校內服務進行整合，實現了校內服務的聚合。通過自簽名 SSL證書實現了在學校內網中的加密訪問，使用 Electron技術實現了軟件的多平臺運行，并且借助 Vue.js實現了用戶體驗良好、現代化的響應式用戶界面。

參考文獻：

[1] 馮傳波，彭章友，張鐘浩.基于Vue.js的移動應用可視化平臺的研究[J].工業控制計算機，2019，32（5）：102-103.

[2] 皮宗輝，王樹國，簡明.高校校園網規劃設計及性能優化——以喀什大學為例[J].喀什大學學報，2020，41（6）：65-68.

【通聯編輯：代影】