Google 致力于为黑人社区推动种族平等。查看具体举措。

将 Firebase 添加到您的 JavaScript 项目

请按照本指南中的说明，在您的 Web 应用中使用 Firebase JavaScript SDK，或者将其用作客户端以供最终用户访问（例如，在 Node.js 桌面应用或 IoT 应用中）。

前提条件

  • 安装您的首选编辑器或 IDE。

  • 使用您的 Google 帐号登录 Firebase。

如果您还没有 JavaScript 项目，只是想试用某一 Firebase 产品，则可以下载我们的某个快速入门示例。

第 1 步：创建 Firebase 项目

您需要先创建一个要关联到您应用的 Firebase 项目，然后才能将该 Firebase 添加到您的 JavaScript 应用。

如需详细了解 Firebase 项目以及将应用添加到项目的最佳做法，请访问了解 Firebase 项目。

第 2 步：在 Firebase 中注册您的应用

有了 Firebase 项目后，您就可以将自己的 Web 应用添加到其中了。

如需详细了解将应用添加到 Firebase 项目的最佳做法和注意事项，请访问了解 Firebase 项目。

  1. 在 Firebase 控制台的项目概览页面的中心位置，点击 Web 图标 () 以启动设置工作流。

    如果您已向 Firebase 项目添加了应用，请点击添加应用以显示平台选项。

  2. 输入应用的别名。
    此别名是方便内部使用的标识符，只有您能在 Firebase 控制台中看到。

  3. （可选）为您的 Web 应用设置 Firebase 托管。

    • 您可以现在就设置 Firebase 托管，也可以稍后再设置。您还可以随时在项目设置中将您的 Firebase Web 应用关联到 Hosting 网站。

    • 如果您选择现在立即设置托管，请从下拉列表中选择一个要与您的 Firebase Web 应用相关联的网站。

      • 此列表显示您项目的默认托管网站，以及您在项目中设置的任何其他网站。

      • 已关联某个 Firebase Web 应用的网站将无法再关联其他应用。每个 Hosting 网站只能关联一个 Firebase Web 应用。

  4. 点击注册应用。

第 3 步：添加 Firebase SDK 并初始化 Firebase

Firebase 为大多数 Firebase 产品（包括 Remote Config、FCM 等）提供了 JavaScript 库。您可以将任何可用库添加到应用中。

以哪种方式将 Firebase SDK 添加到 Web 应用，取决于您是否选择为应用使用 Firebase Hosting、要与应用搭配使用什么工具（如模块捆绑器），或者是否配置 Node.js 应用。如需有关在这些备选方案之间进行选择的更多帮助，请参阅将 Web SDK 添加到应用的方法。

使用模块捆绑器添加

您可将 Firebase JavaScript SDK 配置为部分导入，仅加载您需要的 Firebase 产品。如果您使用的是捆绑器（如 Browserify 或 webpack），则可以在需要时 import 单个 Firebase 产品。

  1. 安装 Firebase JavaScript SDK：

    1. 如果还没有 package.json 文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：

      npm init

    2. 运行以下命令，安装 firebase npm 软件包并将其保存到 package.json 文件：

      npm install --save firebase

  2. 若要仅添加特定 Firebase 产品（如 Authentication 和 Cloud Firestore），请使用 import 导入 Firebase 模块：

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. 在您的应用中初始化 Firebase：

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

从 CDN 添加

您可将 Firebase JavaScript SDK 配置为部分导入，仅加载您需要的 Firebase 产品。Firebase 将各 Firebase JavaScript SDK 库存储在我们的全球 CDN（内容分发网络）上。

  1. 若要仅添加特定 Firebase 产品（例如 Authentication 和 Cloud Firestore），请在使用任何 Firebase 服务之前将以下脚本添加到 <body> 标记的最下面：

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>
</body>


  2. 在您的应用中初始化 Firebase：

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

从 Hosting 网址添加

使用 Firebase Hosting 时，您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的 Hosting 网址添加 SDK。

通过此设置选项，在您将应用部署到 Firebase 后，应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目，但不必跟踪用于 firebase.initializeApp() 的 Firebase 配置。

此设置选项也适用于在本地测试您的 Web 应用。

  1. 若要仅添加特定 Firebase 产品（例如，Analytics、Authentication 或 Cloud Firestore），请在使用任何 Firebase 服务之前将以下脚本添加到 <body> 标记的最下面：

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.3.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.3.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.3.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.3.1/firebase-firestore.js"></script>
</body>


  2. 在您的应用中初始化 Firebase（如果使用预留的 Hosting 网址，则无需添加 Firebase 配置对象）：

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

Node.js 应用

  1. 安装 Firebase JavaScript SDK：

    1. 如果您还没有 package.json 文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：

      npm init

    2. 运行以下命令，安装 firebase npm 软件包并将其保存到 package.json 文件：

      npm install --save firebase

  2. 使用以下任一选项，在您的应用中使用 Firebase 模块：

    • 您可以使用 require 从任何 JavaScript 文件获取模块

      若要仅添加特定 Firebase 产品（如 Authentication 和 Cloud Firestore），请运行以下命令：

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");


    • 您可以使用 ES2015 通过 import 导入模块

      若要仅添加特定 Firebase 产品（如 Authentication 和 Cloud Firestore），请运行以下命令：

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. 在您的应用中初始化 Firebase：

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

了解 Firebase 配置对象

要在您的应用中初始化 Firebase，您需要提供应用的 Firebase 项目配置。您可以随时获取 Firebase 配置对象。

  • 如果您使用预留的 Hosting 网址，系统会从您的 Firebase 项目中自动拉取 Firebase 配置，因此您无需在代码中明确提供配置对象。

  • 我们不建议手动修改配置对象，尤其是以下必需的“Firebase 选项”：apiKey、projectId 和 appID。如果您使用这些必需的“Firebase 选项”的无效值或缺失值对您的应用进行初始化，则您的应用的用户可能会遇到严重问题。

  • 如果您在 Firebase 项目中启用了 Google Analytics（分析），则配置对象会包含字段 measurementId。如需详细了解此字段，请参阅 Analytics（分析）使用入门页面。

下面是启用了所有服务的配置对象的格式（这些值会自动填充）：

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

下面是一个包含示例值的配置对象：

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

第 4 步：（可选）安装 CLI 并部署到 Firebase Hosting

如果您已将 Firebase Web 应用与 Firebase Hosting 网站关联，则可以现在（即设置 Web 应用时）就部署网站内容并进行配置，也可以日后再进行部署和配置。

要部署到 Firebase，请使用命令行工具 Firebase CLI。

  1. 参阅 Firebase CLI 文档以了解如何安装 CLI 或将其更新为最新版本。

  2. 初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令：

    firebase init

  3. 将您的内容和托管配置部署到 Firebase Hosting。

    默认 Hosting 网站

    默认情况下，每个 Firebase 项目在 web.app 和 firebaseapp.com 网域（PROJECT_ID.web.app 和 PROJECT_ID.firebaseapp.com）上都有免费的子网域。

    1. 部署到您的网站。从应用的根目录运行以下命令：

      firebase deploy

    2. 在以下任一默认网站上查看您的网站：

      • PROJECT_ID.web.app
      • PROJECT_ID.firebaseapp.com

    非默认托管网站

    Firebase 项目支持多个网站（这些网站被视为您的非默认网站）。您可以在控制台的 Web 应用设置工作流中为您的项目添加其他网站，也可以从控制台的 Hosting 页面添加。

    1. 将网站添加到您的 firebase.json 文件（在 firebase init 期间创建的文件）。

      请注意，此 firebase.json 配置假设您的每个网站都有单独的代码库。

      {
  "hosting": {
    "site": "SITE_ID",
    "public": "public",

    // ...
  }
}

    2. 部署到您的网站。从应用的根目录运行以下命令：

      firebase deploy --only hosting:SITE_ID

    3. 在以下任一网站上查看您的网站：

      • SITE_ID.web.app
      • SITE_ID.firebaseapp.com

第 5 步：在您的应用中访问 Firebase

Firebase JavaScript SDK 支持以下 Firebase 产品。每个产品都是可选的，并且可从 firebase 命名空间访问。

如需了解可用的方法，请参阅 Firebase JavaScript 参考文档。

Firebase 产品 命名空间 网络 Node.js
Analytics firebase.analytics()
Authentication firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase 客户端 SDK firebase.functions()
Cloud Messaging firebase.messaging()
Cloud Storage firebase.storage()
Performance Monitoring（Beta 版） firebase.performance()
Realtime Database firebase.database()
Remote Config（Beta 版） firebase.remoteConfig()

可用的库

后续步骤

了解 Firebase：

将 Firebase 服务添加到您的应用：