产品 使用场景 价格 文档 支持
Vai alla console

将 Firebase 添加到您的 JavaScript 项目

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

准备工作

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

  • 打开 JavaScript 项目（Web 或 Node.js）。

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

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

第 1 步：创建 Firebase 项目

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

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

第 2 步：获取 Firebase 配置对象

本指南中的每个配置步骤都要求您使用 Firebase 配置对象进行初始化。

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",
};

您可以随时获取 Firebase 配置对象。

第 3 步：配置您的应用以使用 Firebase

您可以配置一个 Web 应用或 Node.js 应用以使用 Firebase。

WEB NODE.JS

配置 Web 应用

使用以下任一选项配置您的 JavaScript Web 应用以使用 Firebase：

选项 1：从 CDN 隐式添加特定 SDK

您可以配置 Firebase JavaScript SDK 的部分导入 - 仅加载您需要的 Firebase 产品。

Firebase 将 Firebase JavaScript SDK 的每个库存储在全球级内容分发网络 (CDN) 上。

例如，要仅添加身份验证和实时数据库，请在应用的 body 标记中使用以下 script 标记：

<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/5.10.1/firebase-app.js"></script>

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

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
<body>


另外，您可以延迟添加 Firebase SDK，在整个页面加载完成后再添加。

首先，向 Firebase SDK 的每个 script 标记添加 defer 标志，然后使用第二个脚本延迟 Firebase 的初始化，例如：

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

接下来，创建一个 init-firebase.js 文件，然后在该文件中包含以下内容：

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
适用于 JavaScript 应用的可用 Firebase SDK（隐式地来自 CDN）
Firebase 产品 库参考
Firebase 核心
（必需）		 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
身份验证 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase 客户端 SDK 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
云消息传递 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
实时数据库 

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

选项 2：捆绑或动态加载特定 SDK

您可以配置 Firebase JavaScript SDK 的部分导入 - 仅加载您需要的 Firebase 产品。

如果您使用的是 Bundler（如 Browserify 或 webpack），则可以在需要时 import 要使用的单个 Firebase 产品。

  1. 安装 Firebase JavaScript SDK：

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

      npm init

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

      npm install --save firebase

  2. 在您的应用中使用 Firebase 模块。例如，要仅加载身份验证和实时数据库，请使用以下 import 语句：

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

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

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
 // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
适用于 JavaScript 应用的可用 Firebase SDK（import 模块）
Firebase 产品 库参考
Firebase 核心（必需） import "firebase/app";
身份验证 import "firebase/auth";
Cloud Firestore import "firebase/firestore";
Cloud Functions for Firebase 客户端 SDK import "firebase/functions";
云消息传递 import "firebase/messaging";
Cloud Storage import "firebase/storage";
实时数据库 import "firebase/database";

选项 3：添加整个 Firebase JavaScript SDK

要加载整个 Firebase JavaScript SDK，请在您应用的 body 标记中使用以下 script 标记：

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

  <!-- Loads the entire Firebase JavaScript SDK -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>

  <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
  </script>
</body>

配置 Node.js 应用

  1. 安装 Firebase JavaScript SDK：

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

      npm init

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

      npm install --save firebase

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

    • 您可以 require 来自任何 JavaScript 文件的模块：

      • 要仅添加您要使用的 Firebase 产品（如身份验证和实时数据库），请运行以下命令：

        // 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/database");

      • 要添加整个 Firebase JavaScript SDK，请运行以下命令：

        var firebase = require("firebase");

    • 您可以使用 ES2015 import 模块：

      • 要仅添加您要使用的 Firebase 产品（如身份验证和实时数据库），请运行以下命令：

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

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

      • 要添加整个 Firebase JavaScript SDK，请运行以下命令：

        import firebase from "firebase";

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

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
 // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
适用于 JavaScript 应用的可用 Firebase SDK（Node.js 的模块）
Firebase 产品 库模块
Firebase 核心（必需） "firebase/app"
身份验证 "firebase/auth"
Cloud Firestore "firebase/firestore"
Cloud Functions for Firebase 客户端 SDK "firebase/functions"
实时数据库 "firebase/database"

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

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

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

Firebase 产品 命名空间 Web Node.js
身份验证 firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase 客户端 SDK firebase.functions()
云消息传递 firebase.messaging()
Cloud Storage firebase.storage()
实时数据库 firebase.database()

其他设置选项

在单个应用中使用多个 Firebase 项目

在大多数情况下，您只需要在一个默认应用中初始化 Firebase。您可以通过两种等效的方式利用该应用访问 Firebase：

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultDatabase = defaultProject.database();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

但有时，您需要同时访问多个 Firebase 项目。例如，您可能需要从一个 Firebase 项目的数据库中读取数据，但在其他 Firebase 项目中存储文件。或者，您可能需要对一个项目进行身份验证，而对第二个项目不进行身份验证。

借助 Firebase JavaScript SDK，您可以在一个应用中同时初始化和使用多个 Firebase 项目，并且每个项目使用其各自的 Firebase 配置信息。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherDatabase = otherProject.database();

运行本地 Web 服务器以用于开发

如果要构建 Web 应用，您会发现 Firebase JavaScript SDK 的部分组件要求从服务器（而不是从本地文件系统）提供您的 Web 应用。您可以使用 Firebase CLI 运行本地服务器。

  1. 安装 Firebase CLI。

    从计算机的任意位置运行以下命令：

    npm install -g firebase-tools

  2. 将您的本地应用目录与 Firebase 相关联，并生成一个 firebase.json 文件（Firebase 托管需要执行此操作）。

    从本地应用目录的根目录运行以下命令：

    firebase init

    在初始化期间，系统会提示您指定一个包含您公共静态文件的目录（您的公共根目录）。Firebase 查找的目录的默认名称为“public”。您还可以通过直接修改您的 firebase.json 文件，稍后设置公共目录。

  3. 启动本地服务器以用于开发。

    从本地应用目录的根目录运行以下命令：

    firebase serve

从预留网址加载 SDK

如果您使用 Firebase 托管功能来托管您的 Web 应用，则可以将您的应用配置为从预留网址动态加载 Firebase JavaScript SDK 库。

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

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

例如，要仅添加身份验证和实时数据库，请在应用的 body 标记中使用以下 script 标记：

<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/5.10.1/firebase-app.js"></script>

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

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
适用于 JavaScript 应用的可用 Firebase SDK（预留网址）
Firebase 产品 库参考（预留网址）
Firebase 核心
（必需）		 

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
身份验证 

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore 

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase 客户端 SDK 

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
云消息传递 

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage 

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
实时数据库 

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
Firebase JavaScript SDK
（整个 SDK）		 

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

如需详细了解该设置选项，请参阅托管文档。

后续步骤

了解 Firebase：

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