基于 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.

【通联编辑：代影】