在 Electron 中使用 Firebase

Question

我正在尝试通过 Electron 使用 Firebase。当我像在网页上一样安装它时，它不起作用，因为 Electron 页面在本地托管并且没有 hostname。这是我遇到的错误...

Uncaught Error: This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.

我无法将空（或通配符）授权域添加到 Firebase 控制台，因此我被卡住了。有人知道如何解决这个问题吗？

编辑：这是我正在使用的代码，它只是标准样板，没有任何额外内容...

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
  var config = {
    apiKey: "AIzaSyBvmmPB0_Oddc-02cUj3Ntt3wi8jSxxxx",
    authDomain: "xxxxx-d24ad.firebaseapp.com",
    databaseURL: "https://xxxxx-d24ad.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);
</script>

Answer 1

我不知道这是否是最佳解决方案，但它是一种解决方法。

使用简单的快速服务器

创建文件server.js

"server.js"

var express = require('express');
var http = require('http');
var path = require('path');

var appServer = express();
appServer.use(express.static(path.join(__dirname, '')));

appServer.get('*', (req, res) => {
    res.sendFile(__dirname + 'index.html');
});

http.createServer(appServer).listen(3007, function() {
    console.log('Express server listening on port');
});

在你的main.js(electron-main-js-file)

在上面main.js启动节点服务器

require('./server');

并更改 "win.loadURL"

win.loadURL('http://localhost:3007');

我已经 fork 你的项目并实现了，firebase 的错误消失了，但是 jQuery 没有定义，我想你可以解决这个问题。

https://github.com/diegoddox/sad-electron-firebase-error

Answer 2

现在，您可以通过从配置中删除 authDomain 行来抑制此错误。 Auth signInWithPopup/signInWithRedirect 操作需要 authDomain，但其他一切都应该有效。

仅当您实际尝试执行 signInWithPopup/Redirect 时才会抛出该错误的库版本正在开发中。

Answer 3

您可以使用 firebase auth 的 GitHub、Twitter、Facebook、Google Provider with electron，方法是使用手动登录流程和 firebase auth signInWithCredential 方法。

https://firebase.google.com/docs/auth/web/github-auth#handle_the_sign-in_flow_manually

我为这些案例创建了有用的库。

https://github.com/mironal/electron-oauth-helper#firebase-auth-integration

// Github manually flow example.

const { OAuth2Provider } = require("electron-oauth-helper")

const config = { /* oauth config. please see example/main/config.example.js.  */}
const provider = new OAuth2Provider(config)
provider.perform()
  .then(resp => {
    const query = querystring.parse(resp)
    const credential = firebase.auth.GithubAuthProvider.credential(query.access_token)
    firebase.auth().signInWithCredential(credential)
    .then(user => {
        console.log(user)
    })
    .catch(error => console.error(error))
  })
  .catch(error => console.error(error))

Answer 4

它通过 .signInWithPopup 在 Electron 6.0.1（Google、Facebook 和 Twitter Auth）中工作。环境：

node 10.16.2 LTS
electron 6.0.1
vs2017-win2016
electron-forge 5.2.4

电子的package.json

 "dependencies": {
 "@capacitor/electron": "^1.1.0",
 "electron-compile": "^6.4.4",
 "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
   "babel-plugin-transform-async-to-generator": "^6.24.1",
   "babel-preset-env": "^1.7.0",
   "babel-preset-react": "^6.24.1",
   "electron-forge": "^5.2.4",
   "electron-prebuilt-compile": "4.0.0"
  },

Angular的包裹

  "dependencies": {
"@angular/animations": "^8.2.0-next.1",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.2.0-next.1",
"@angular/core": "^8.2.0-next.1",
"@angular/fire": "^5.2.1",
"@angular/forms": "^8.2.0-next.1",
"@angular/material": "^8.0.0",
"@angular/platform-browser": "^8.2.0-next.1",
"@angular/platform-browser-dynamic": "^8.2.0-next.1",
"@angular/pwa": "^0.800.2",
"@angular/router": "^8.2.0-next.1",
"@angular/service-worker": "^8.2.0-next.1",
"@capacitor/core": "1.1.0",
"@ionic/angular": "^4.6.2",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/router": "^4.2.0",
"@ngxs/logger-plugin": "^3.3.2",
"@ngxs/store": "^3.3.2",
"angulartics2": "^7.5.2",
"echarts": "^4.2.1",
"firebase": "^6.1.1",
"hammerjs": "^2.0.8",
"immutable": "^4.0.0-rc.12",
"ngx-echarts": "^4.1.1",
"ngx-permissions": "^7.0.3",
"ngx-stars": "^1.3.0",
"rxjs": "6.5.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.802.0-next.0",
  "@angular/cli": "~8.2.0-next.0",
  "@angular/compiler": "^8.2.0-next.1",
  "@angular/compiler-cli": "~8.2.0-next.1",
  "@angular/language-service": "~8.2.0-next.1",
  "@capacitor/cli": "^1.0.0",
  "@compodoc/compodoc": "^1.1.10",
  "@ionic/angular-toolkit": "~2.0.0",
  "@ngxs/devtools-plugin": "^3.4.3",
  "@ngxs/schematics": "0.0.1-alpha.5",
  "@types/echarts": "^4.1.9",
  "@types/jasmine": "^3.3.12",
  "@types/jasminewd2": "~2.0.6",
  "@types/node": "~11.13.4",
  "ajv": "^6.9.1",
  "codelyzer": "~5.0.0",
  "html-minifier": "^4.0.0",
  "ionic": "^5.0.1",
  "jasmine-core": "~3.4.0",
  "jasmine-spec-reporter": "~4.2.1",
   "karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-mocha-reporter": "^2.2.5",
"protractor": "~5.4.0",
"sonarqube-scanner": "^2.4.0",
"ts-node": "~8.0.3",
"tslint": "~5.15.0",
"tslint-sonarts": "^1.9.0",
"typescript": "~3.4.3"
},

我为 Windows 编译了：

DEBUG='electron-forge:*' node_modules/.bin/electron-forge make

在 Electron 中使用 Firebase

Using Firebase with Electron

html

javascript

firebase

electron