基于 Electron 的跨平臺校內(nèi)服務(wù)聚合平臺實現(xiàn)

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

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

關(guān)鍵詞：跨平臺;Vue;響應(yīng)式;Electron

中圖分類號：TP311? ? ? ?文獻標(biāo)識碼：A

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

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

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

1 項目整體結(jié)構(gòu)

項目由 daemonserver和 客戶端軟件構(gòu)成?？蛻舳塑浖嫦蛴脩?，提供 GUI來進行校內(nèi)服務(wù)訪問以及校園網(wǎng)故障協(xié)助診斷等。

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

2 技術(shù)實現(xiàn)

2.1 客戶端軟件技術(shù)實現(xiàn)

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

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

electron 中保留了 chromium 使用 webview 來渲染頁面和 V8引擎來執(zhí)行 JS 代碼的特性，用于渲染桌面應(yīng)用程序的GUI，而且 electron 在此基礎(chǔ)上添加了 NodeJS 的支持，使得程序可以直接調(diào)用系統(tǒng)接口。

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

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

2.1.1 GUI 實現(xiàn)方案

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

2.1.2 集中式狀態(tài)管理

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

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

2.1.3 邏輯層實現(xiàn)

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

2.1.4 進程間通訊

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

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

2.1.5 應(yīng)用打包和保護

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

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

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

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

2.1.6 通過與DaemonServer協(xié)同診斷網(wǎng)絡(luò)

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

2.2 DaemonServer技術(shù)實現(xiàn)

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

除了提供校內(nèi)服務(wù)的鏈接之外，DaemonServer還可協(xié)助進行校園網(wǎng)故障診斷，同時提供靜態(tài)的幫助文檔頁面，協(xié)助校園網(wǎng)用戶排查故障。

2.2.1 反向代理

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

有關(guān)校園網(wǎng)故障的幫助文檔屬于靜態(tài)資源，直接由 Nginx分配給80端口。有關(guān)校內(nèi)服務(wù)列表存放在 DaemonServer的MySQL數(shù)據(jù)庫中，使用 express提供 API來進行訪問和修改，由Nginx分配給8080端口。

2.2.2 角色分配和權(quán)限設(shè)計

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

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

3結(jié)語

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

參考文獻：

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

[2] 皮宗輝，王樹國，簡明.高校校園網(wǎng)規(guī)劃設(shè)計及性能優(yōu)化——以喀什大學(xué)為例[J].喀什大學(xué)學(xué)報，2020，41（6）：65-68.

【通聯(lián)編輯：代影】