使用 Google OAuth 的电子应用程序：“此浏览器或应用程序可能不安全”

Question

我的应用的用户今天报告了一个关于通过 Google 授权用户（使用 OAuth 2.0）的问题。到目前为止，应用程序正在打开一个新的 BrowserWindow（节点集成已禁用，会话与主应用程序分离）。您可以看到实现here，因为库是 OSS。我正在使用它来授权用户访问 Google Drive 上的应用程序数据。 今天登录后，我看到以下消息：

此浏览器或应用程序可能不安全。

尝试使用其他浏览器。如果您已经在使用受支持的浏览器，则可以刷新屏幕并再次尝试登录。

了解更多链接有一个面向开发人员的部分。本节有 2 个链接。一是如何将应用程序升级到 PWA。由于该应用程序是一个 API 测试工具，因此无法在 Web 浏览器中运行它。 第二个链接指向描述如何迁移到本地应用程序授权的文档。但是，所描述的流程需要授权代码授权。这意味着我需要在我的应用程序中包含 OAuth 密码。然而，Electron 应用程序仍然是 Web 应用程序，并且没有编译源代码的概念。我会向公众公开不安全的客户秘密。可能我可以构建一个服务器应用程序来支持它，但该应用程序是 OSS 项目。它没有资金来运行服务器进行授权。

我现在的问题是我应该如何为 Electron 应用程序实现 OAuth 2。在这种情况下，我无法使用 PWA，并且服务器授权流程（代码授权）远非理想。

Answer 1

正如 Paweł 解释的那样，更改用户代理就可以解决问题。但是，您可以通过在加载 URL 时传递一个对象来轻松设置用户代理

win = new BrowserWindow({width: 800, height: 600});
win.loadURL(authUrl, {userAgent: 'Chrome'})

我已经测试过它，它就像一个魅力

Answer 2

警告：此答案依赖于更改浏览器的用户代理。自 2021 年 1 月起，Google 对此表示反对并警告不要这样做（参见 EDIT4）。使用风险自负！

其他答案对我不起作用（在 Electron 9.0.5 中），但我最终找到了这个答案：

app.on("ready", ()=> {
    session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
        details.requestHeaders["User-Agent"] = "Chrome";
        callback({ cancel: false, requestHeaders: details.requestHeaders });
    });

    CreateMainWindow(); // your regular code to create root browser window
});

编辑：另外两种方法，我没有测试过，但也可能有效：

app.on("ready", ()=>{
    session.defaultSession.setUserAgent("Chrome");
    ...
}

app.userAgentFallback = "Chrome";

EDIT2：稍后再试，方法#2 不起作用，但#1 仍然有效。还没试过#3。

EDIT3：稍后再试，似乎不再需要这些变通方法了！谷歌似乎再次接受来自 Electron 应用程序的登录弹出窗口，而无需修改用户代理。 （奇怪的是他们会恢复这个；也许我在重新尝试时做错了什么）

EDIT4：虽然方法 #1 仍然适用于 atm，但我最近发现这篇博文：https://developers.googleblog.com/2020/08/guidance-for-our-effort-to-block-less-secure-browser-and-apps.html 显然 Google 正在限制在非标准浏览器中使用 Google 登录（可能包括 Electron ) 从 2021 年 1 月开始，并警告开发人员不要修改其浏览器的用户代理（我提到的所有三种可能性都是如此）。使用风险自负！ （他们没有说明会产生什么结果，但为了我自己的使用，我从现在开始选择使用下面显示的替代方案）

---

作为在您的应用程序中使用 Google 登录弹出窗口的替代方法（有些人可能会担心，因为 Electron 应用程序原则上可以在弹出窗口中插入代码以读取原始密码——这并不重要，因为 Electron 应用程序无论如何都可以安装键盘记录器等），您可以改为在用户的常规外部浏览器中打开一个选项卡，指向一个触发登录弹出窗口的特殊页面，然后将凭据发送到您的 Electron 应用程序之后。

说明可以看这里（方法3）：https://stackoverflow.com/a/64328193/2441655

Answer 3

在进行了疯狂的猜测后，我决定更改用户代理字符串并从中删除应用程序名称以及带有版本的Electron/。在此更改之后，它又开始工作了。

示例实现：

const win = new BrowserWindow(params);
let ua = win.webContents.userAgent;
ua = ua.replace(/APPLICATION NAME HERE\/[0-9\.-]*/,'');
ua = ua.replace(/Electron\/*/,'');
win.webContents.userAgent = ua;

这假设应用程序正在使用 symver 并且没有预发布标签。否则你将不得不稍微调整一下正则表达式。