在 Firebase 托管中使用 Firebase 和 React

Posted 2023-02-23

【中文标题】在 Firebase 托管中使用 Firebase 和 React

【英文标题】：Using Firebase with React in Firebase Hosting

【发布时间】：2018-02-24 18:26:32

【问题描述】：

我正在开发一个使用“create react app”（https://github.com/facebookincubator/create-react-app）创建的 React 应用。 它将托管在 Firebase 托管中，我想使用文档 (https://firebase.google.com/docs/web/setup#sdk_imports_and_implicit_initialization) 中描述的隐式初始化，以部署到多个项目（我有一个开发项目和几个生产项目）

<script src="/__/firebase/init.js"></script>

我需要在我的 React 组件中的上述脚本中初始化“firebase”对象。我应该如何在多个 React 组件文件中导入它？ 我知道这只有在我在开发期间和部署它时使用“firebase serve”服务时才可用，所以在开发期间我试图添加

<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = 
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  ;
  firebase.initializeApp(config);
</script>

我的 index.html 文件的代码，如 Firebase 文档中所述。但是，当我尝试在 ReactComponent 中导入 Firebase 时，它​​找不到它或抱怨没有初始化项目（我在 html 标记中所做的）

如何从我的 html 脚本标签导入 Firebase 初始化的 App 和 Firebase 库？？

【问题讨论】：

嗨，Pablo，你在哪里能解决这个问题？自己寻找解决方案。

【参考方案1】：

尝试通过 npm 安装 firebase 包。然后你可以很容易地在任何你想要的任何反应组件中使用它通过导入

import firebase from 'firebase';

您也可以在 configureFirebase.js 文件中导入 firebase，您可以在其中使用一些配置初始化 firebase 应用程序，然后导出配置的 firebase 实例并在任何组件中使用此实例

这会很有帮助：

import firebase from 'firebase'
const config =  /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    apiKey: "unreadablestuff",
    authDomain: "your-domain-name.firebaseapp.com",
    databaseURL: "https://your-domain-name.firebaseio.com",
    storageBucket: "your-domain-name.appspot.com",
    messagingSenderId: "123123123123"
;
const fire = firebase.initializeApp(config);
export default fire;

【参考方案2】：

您直接在浏览器中提供带有脚本标记的 firebase API。当你运行你的包时，它已经在浏览器中可用了。

您在幕后使用webpack 和create-react-app，但我认为您可能需要将其弹出，以便您可以告诉它该软件包将在您的环境（浏览器）中使用@987654326 @属性。

https://webpack.js.org/configuration/externals/

据我对此问题的了解，无法使用create-react-app 将externals 添加到webpack。

https://github.com/facebook/create-react-app/issues/780

也许最好将 <script> 标记与 firebase 一起删除，然后直接在您的 CRA 项目中安装和导入它。

这可能会有所帮助： https://www.codementor.io/yurio/all-you-need-is-react-firebase-4v7g9p4kf

【参考方案3】：

当您使用 create-react 应用程序和 webpack 时，您应该已经在使用 nodejs firebase：

npm install --save firebase

要在部署时即时获取配置，您必须访问此网址：

/__/firebase/init.json

因此，在尝试初始化 firebase 之前，您需要进行异步调用以获取存储在此位置的 json 对象。所以这里有一些示例代码（使用 axios 进行异步调用）包含在您的 index.js 中：

    import React from "react";
    import ReactDOM from "react-dom";
    import * as firebase from "firebase/app";
    import axios from "axios";

    const getFirebaseConfig = new Promise((resolve, reject) => 
      axios
        .get(`/__/firebase/init.json`)
        .then(res => 
          resolve(res.data);
        )
        .catch(err => reject(err));
    );

    getFirebaseConfig
      .then(result => 
        firebase.initializeApp(result);

        ReactDOM.render(
          <div>XXXXX</div>,
          document.getElementById("root")
        );
      )
      .catch(err => console.log(err));

此外，为了使这更加简化（使用带有 npm start 的 dev firebase 配置，并在部署时即时获取 prod firebase 配置），您可以执行以下操作：

fbconfig.js：

if (process.env.NODE_ENV === "production") 
  module.exports = require("./prod");
 else 
  module.exports = require("./dev");

dev.js：

const firebaseConfig = 
  // your dev firebase configuration
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
;

const getFirebaseConfig = new Promise((resolve, reject) => 
  resolve(firebaseConfig);
);

export default getFirebaseConfig;

prod.js：

import axios from "axios";

const getFirebaseConfig = new Promise((resolve, reject) => 
  axios
    .get(`/__/firebase/init.json`)
    .then(res => 
      resolve(res.data);
    )
    .catch(err => reject(err));
);

export default getFirebaseConfig;

最后在 index.js 中：

import getFirebaseConfig from "./fbconfig";

getFirebaseConfig.then(result => 
  firebase.initializeApp(result);
  ...etc
)
.catch(err => console.log(err));

【讨论】：

这是我在互联网上找到的最好方法，因为将配置文件发送到服务器是不安全的。

问题是导出由变量初始化的服务，即：firestore()、firebase.auth等。

@FrancisRodrigues 必须指出 Firebase 配置对象是公开的，不会引起任何安全问题。即使使用保留 URL 部署应用程序，您仍然可以通过“yourproject.firebaseapp.com/__/firebase/init.json”访问配置。