我正在尝试让 firebase auth 与 Electron 一起使用。我已经可以在 iOS 和 Android 上使用它,并希望将其用于桌面版本的应用程序。
我主要尝试的是谷歌登录。使用firebase的网络版本最终会失败,本地主机不被接受登录。我已经尝试了代码的node.js版本,但我无法得到那个工作要么。
谷歌这个:https://www.google.com/search?q=firebase+auth+electron
你会看到我尝试过的所有内容以及我浏览过的所有 stackoverflow 问题。有些人说他们可以工作,但我没有找到工作的例子。这是一个失败的原因还是有人可以指出我正确的方向?
很多人似乎有同样的问题,但没有答案。
您必须在主窗口的
nativeWindowOpen
内将 true
设置为 webPreferences
。像这样:
mainWindow = new BrowserWindow(
{
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js'),
nativeWindowOpen: true
}
}
);
实现此目的的一种方法是运行一个本地服务器来提供您想要显示的页面。然后在您的电子窗口中加载该本地服务器 URL。
因为如果直接在电子窗口中加载,Firebase 库会抱怨,但您可以使用本地服务器来绕过它,如下所示:
import {
app,
BrowserWindow
} from 'electron'
import ex from 'express'
import path from 'path'
const express = ex()
let win
const port = 12345
const appPath = app.getAppPath()
express.use(require('express').static(path.join(appPath, '/')))
express.get('/', (_, res) => res.sendFile(path.join(appPath, '/index.html')))
express.listen(port, () => console.log('Running on ' + port))
function getWindow () {
if (win === undefined) {
// Create the browser window.
win = new BrowserWindow({
frame: false,
transparent: true,
alwaysOnTop: true,
width: 1280,
height: 768,
center: true
})
win.loadURL('http://localhost:' + port)
}
return win
}
app.on('ready', () => {
getWindow().show()
})
上面的代码将是您在运行电子时运行的
index.js
。然后,在通过本地网络服务器提供服务的 index.html
中,您加载 firebase Web 库。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Example</title>
</head>
<body>
<script src="/__/firebase/6.3.0/firebase-app.js"></script>
<script src="/__/firebase/6.3.0/firebase-auth.js"></script>
</body>
</html>
您可以研究的是能够实现您需要的东西,但不完全是您想要的东西。虽然 google 登录模块至少可以用 Electron 来表示,但我发现使用 createUserWithEmailAndPassword 函数和 Firebase 身份验证取得了成功,请检查一下
在使用 React.js 连接 firebase 和 electro.js 时,我遇到了同样的问题,但有一种简单的方法可以让您使用 firebase 弹出身份验证。创建新的 browserWindow 时的主流程内部。在 webPreferences 对象下添加属性 nativeWindowOpen 或将其设置为 true。 确保您的 webPreferences 对象的 nativeWindowOpen 属性设置为 true。
示例
window = new electron.BrowserWindow({
width: 1200,
height: 650,
webPreferences:{
nodeIntegration: true,
enableRemoteModule: true,
nativeWindowOpen: true, // this allows you to use popups when doing authentication using firebase in an electron app
}
})
祝你好运✔✔✨✨
在 2024 年偶然发现了这一点。很好奇是否有人有 Electron 30 的解决方案,因为他们贬低了 nativeWindowOpen 选项。