Firebase Auth + Electron = 失败？答案

【问题标题】：Firebase Auth + Electron = failure?Firebase Auth + Electron = 失败？
【发布时间】：2018-05-15 12:11:30
【问题描述】：

我正在尝试让 firebase 身份验证与电子一起工作。我已经将它与 iOS 和 Android 一起使用，并希望将其用于该应用的桌面版本。

我主要尝试的是 google 登录。使用 firebase 的 web 版本最终会失败，无法接受 localhost 进行登录。我已经尝试了 node.js 版本的代码，但我可以'也不能让它工作。

谷歌这个：https://www.google.com/search?q=firebase+auth+electron

您会看到我尝试过的所有内容以及我查看过的所有 stackoverflow 问题。有些人说他们有它的工作，但我没有找到工作的例子。这是一个失败的原因还是有人可以指出我正确的方向？

很多人似乎有同样的问题，但没有答案。

【问题讨论】：

你可以发布链接到回购吗？我正在努力实现同样的目标，但无法做到。

标签： firebase firebase-authentication electron

【解决方案1】：

完成这项工作的一种方法是运行一个本地服务器，该服务器为您要显示的页面提供服务。然后在您的电子窗口中加载该本地服务器 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 网络库。

<!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>

【讨论】：

您可以在控制台中定义支持的域列表。无论您使用哪个域

【解决方案2】：

您必须在主窗口的 webPreferences 内将 nativeWindowOpen 设置为 true。像这样：

mainWindow = new BrowserWindow(
        {
            width: 1280,
            height: 720,
            webPreferences: {
                nodeIntegration: false,
                preload: path.join(__dirname, 'preload.js'),
                nativeWindowOpen: true
            }
        }
);

【讨论】：

nativeWindowOpen: true 允许我的 Firebase 身份验证信息在多个电子窗口之间无缝流动。 TBH 不确定原因，但很高兴我找到了这个

【解决方案3】：

您可以研究的是可以实现您需要但不完全是您想要的东西。虽然谷歌登录模块至少可以说是电子的，但我发现使用带有 Firebase 身份验证的 createUserWithEmailAndPassword 函数成功，检查一下

【讨论】：

【解决方案4】：

我在使用 React.js 连接 firebase 和 electron.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
   }
})

祝你好运✔✔✨✨

【讨论】：