如何在Electron中实现浏览器启动时的在线授权验证？

一、Electron端操作步骤 #

1. 先搭好基础环境 #

如果还没初始化Electron项目，先执行这俩命令：

npm init -y
npm install electron --save-dev

2. 启动时发起验证请求 #

在主进程文件（一般是main.js）里，应用启动后立刻发请求到PHP接口，验证通过再加载主页面。用Node.js内置的https模块示例（HTTP的话换http模块）：

const { app, BrowserWindow } = require('electron');
const https = require('https');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 先做验证，再决定加载哪个页面
  validateToken().then(isValid => {
    if (isValid) {
      mainWindow.loadFile('index.html'); // 验证过了，加载主页面
    } else {
      mainWindow.loadFile('unauthorized.html'); // 没权限，显示提示页面
      // 也可以直接退出应用：app.quit();
    }
  }).catch(err => {
    console.error('验证请求出错:', err);
    mainWindow.loadFile('error.html'); // 网络问题之类的，显示错误页面
  });
}

// 封装验证token的函数
async function validateToken() {
  // 这里可以从本地存着的地方读token，比如后面说的electron-store
  const token = '用户的授权token';
  return new Promise((resolve, reject) => {
    const options = {
      hostname: '你的服务器域名',
      path: '/verify-token.php',
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    };

    const req = https.request(options, (res) => {
      let data = '';
      res.on('data', (chunk) => {
        data += chunk;
      });
      res.on('end', () => {
        // 对比返回的标识
        resolve(data.trim() === 'Okay');
      });
    });

    req.on('error', (e) => {
      reject(e);
    });

    // 把token编码后发出去
    req.write(`token=${encodeURIComponent(token)}`);
    req.end();
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

3. 本地存token（可选） #

如果要让用户输入token后保存，不用每次都输，装个electron-store：

npm install electron-store --save

然后在代码里这么用：

const Store = require('electron-store');
const store = new Store();

// 保存用户输入的token
store.set('userToken', '用户填的token');

// 读取token
const token = store.get('userToken');

二、PHP端验证接口实现 #

在服务器上创建verify-token.php，处理Electron发过来的token：

<?php
// 接收POST传过来的token
$token = $_POST['token'] ?? '';

// 这里换成你实际的验证逻辑，比如查数据库看这个token是否已授权
// 示例：假设有效token是'valid_123456'
if ($token === 'valid_123456') {
    echo 'Okay';
} else {
    echo 'Invalid';
}
?>

几个要注意的点 #

• 一定要用HTTPS：生产环境别用HTTP，不然token容易被截走。
• 处理异常情况：网络断了、请求超时这些情况要处理，别让应用直接崩了。
• 别硬编码token：代码里别写死token，让用户输入或者从安全渠道获取。
• 防重复请求：可以给验证请求加个超时时间，避免重复发请求。

内容的提问来源于stack exchange，提问作者carlos eduardo