Accéder à la 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 项目后,您就可以将自己的 Web 应用添加到其中了。

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

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

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

  2. 输入应用的别名。

    别名是方便内部使用的标识符,只有您能在 Firebase 控制台中看到。

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

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

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

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

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

  4. 点击注册应用

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

您可以将任何受支持的 Firebase 产品添加到您的应用中。

以哪种方式向您的应用添加 Firebase SDK,取决于您是否选择为应用使用 Firebase 托管、要与应用搭配使用的工具(如捆绑器)或是否配置了 Node.js 应用。

从托管网址添加

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

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

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

  1. 若要仅添加特定 Firebase 产品(例如身份验证和 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/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
      <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
    </body>
    


  2. 在您的应用中初始化 Firebase(如果使用预留的托管网址,则无需添加 Firebase 配置对象):

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

从 CDN 添加

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

  1. 若要仅添加特定 Firebase 产品(例如身份验证和 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/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
    </body>
    


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

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

使用模块捆绑器添加

您可将 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 产品(如身份验证和 Cloud Firestore),请使用 import 导入 Firebase 模块:

    // 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/firestore";
    
  3. 在您的应用中初始化 Firebase:

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

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 产品(如身份验证和 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 产品(如身份验证和 Cloud Firestore),请运行以下命令:

      // 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/firestore";
      
  3. 在您的应用中初始化 Firebase:

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

Firebase 配置对象

要在您的应用中初始化 Firebase,您需要提供应用的 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",
  appID: "app-id",
};

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

第 4 步:(可选)安装 CLI 并部署到 Firebase 托管

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

  1. 要部署到 Firebase,请使用 Firebase CLI 命令行工具。安装 CLI 或将其更新为最新版本。

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

    npm install -g firebase-tools
  2. 登录 Google。运行以下命令:

    firebase login

    此命令将您的本地机器与 Firebase 关联,并授予您对 Firebase 项目的访问权限。

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

    firebase init

    此初始化命令会:

    • 将您的本地应用目录与 Firebase 关联。
    • 生成一个 firebase.json 文件(Firebase 托管所需的必要文件)。
    • 提示您指定一个包含您的公共静态文件(HTML、CSS、JS 等)的公共根目录。

      Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改 firebase.json 文件的方式来稍后设置公共目录

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

    默认托管网站

    默认情况下,每个 Firebase 项目在 web.appfirebaseapp.com 网域上都有免费的子网域(project-id.web.appproject-id.firebaseapp.com)。

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

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

      • project-id.web.app
      • project-id.firebaseapp.com

    非默认托管网站

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

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

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

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. 部署到您的网站。从应用的根目录运行以下命令:

      firebase deploy --only hosting:site-name
    3. 在以下任一网站上查看您的网站:

      • site-name.web.app
      • site-name.firebaseapp.com

第 5 步:在您的应用中访问 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.performance()
实时数据库 firebase.database()

可用的库

其他设置选项

延迟加载 Firebase SDK(来自 CDN)

您可以等到整个页面加载完成后,延迟添加 Firebase SDK。

  1. 在 Firebase SDK 的每个 script 标记中添加 defer 标志,然后使用另一个脚本延迟进行 Firebase 的初始化,例如:

    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. 创建一个 init-firebase.js 文件,然后在该文件中包含以下内容:

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

在单个应用中使用多个 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 defaultFirestore = defaultProject.firestore();

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

但有时,您需要同时访问多个 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 defaultFirestore = firebase.firestore();

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

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

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

如果您为应用设置了 Firebase 托管,则下面的几个步骤可能先前已经完成。

  1. 安装或更新 Firebase CLI。从计算机的任意位置运行以下 npm 命令:

    npm install -g firebase-tools
  2. 登录 Google。运行以下命令:

    firebase login

    此命令将您的本地机器与 Firebase 关联,并授予您对 Firebase 项目的访问权限。

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

    firebase init

    此初始化命令会:

    • 将您的本地应用目录与 Firebase 关联。
    • 生成一个 firebase.json 文件(Firebase 托管所需的必要文件)。
    • 提示您指定一个包含您的公共静态文件(HTML、CSS、JS 等)的公共根目录。

      Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改 firebase.json 文件的方式来稍后设置公共目录

  4. 启动本地服务器以用于开发。从本地应用目录的根目录运行以下命令:

    firebase serve

后续步骤

了解 Firebase:

将 Firebase 服务添加到您的应用,如: