React+Electron桌面应用集成Google API时出现400无效请求错误

使用React+Electron开发桌面应用，在localhost:3000上浏览器端运行时Google授权正常，但打包为Electron应用后，Google授权窗口弹出400无效请求错误。使用react-google-calendar-api库进行Google服务连接，Electron主进程代码如下：

const electron = require("electron");
const { webFrame } = require('electron')
const { app, BrowserWindow } = electron;
const url = require('url');
const path = require('path');
app.on("ready", () => {
    const display = electron.screen.getPrimaryDisplay()
    const maxiSize = display.workAreaSize
    const mainWindow = new BrowserWindow({
        resizable: false,
        height: maxiSize.height,
        width: maxiSize.width,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
            zoomFactor: 0.7,
        },
    });
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '/../build/index.html'),
        protocol: 'file:',
        slashes: true
    });
    mainWindow.on('close', function () {})
    mainWindow.loadURL(startUrl);
});

核心原因 #

Electron打包后默认使用file://协议加载本地资源，Google OAuth 2.0不允许将本地文件协议作为回调地址；同时Web类型的OAuth客户端ID不兼容Electron这类桌面应用的授权流程。

具体解决步骤 #

1. 创建桌面类型的OAuth客户端ID
   登录Google Cloud控制台，进入OAuth 2.0客户端ID配置页面，将客户端类型改为桌面应用，保存后获取新的客户端ID。

2. 配置自定义协议作为回调地址

   • 在Google Cloud控制台的桌面应用客户端配置中，添加自定义协议回调URI（比如myapp://oauth2callback）。
   • 在Electron主进程中注册该自定义协议，并监听回调事件：

     const electron = require("electron");
     const { app, BrowserWindow, ipcMain } = electron;
     const url = require('url');
     const path = require('path');
     
     // 注册自定义协议
     if (!app.isDefaultProtocolClient('myapp')) {
         app.setAsDefaultProtocolClient('myapp');
     }
     
     let mainWindow;
     
     app.on("ready", () => {
         const display = electron.screen.getPrimaryDisplay()
         const maxiSize = display.workAreaSize
         mainWindow = new BrowserWindow({
             resizable: false,
             height: maxiSize.height,
             width: maxiSize.width,
             webPreferences: {
                 nodeIntegration: true,
                 contextIsolation: false,
                 enableRemoteModule: true,
                 zoomFactor: 0.7,
             },
         });
         const startUrl = process.env.ELECTRON_START_URL || url.format({
             pathname: path.join(__dirname, '/../build/index.html'),
             protocol: 'file:',
             slashes: true
         });
         mainWindow.loadURL(startUrl);
     });
     
     // 处理自定义协议的回调请求
     app.on('open-url', (event, callbackUrl) => {
         event.preventDefault();
         // 将回调地址发送给渲染进程处理
         if (mainWindow) {
             mainWindow.webContents.send('oauth-callback', callbackUrl);
         }
     });
     

3. 调整react-google-calendar-api的配置
   在React代码中初始化库时，将redirectUri设置为自定义协议地址，同时使用新的桌面应用客户端ID：

   import { GoogleCalendarApi } from 'react-google-calendar-api';
   
   const api = new GoogleCalendarApi({
       clientId: '你的桌面应用客户端ID',
       redirectUri: 'myapp://oauth2callback',
       scope: 'https://www.googleapis.com/auth/calendar',
       // 其他配置项
   });
   

4. 打包工具配置（以electron-builder为例）
   在项目的package.json中添加协议配置，确保打包后系统能识别自定义协议：

   {
       "build": {
           "protocols": {
               "name": "myapp",
               "schemes": ["myapp"]
           }
       }
   }
   

额外注意事项 #

• 测试自定义协议时，需关闭所有已打开的Electron应用实例，避免协议注册冲突。
• 若开发环境中需要测试，可在启动Electron时传递协议参数，确保回调能被正确捕获。

内容的提问来源于stack exchange，提问作者Envy Me