将 Firebase 添加至您的 JavaScript 项目

前提条件

开始之前,您需要有一个要添加 Firebase 的 JavaScript(网页或 Node.js)应用。如果还没有应用,您可以下载我们的一个快速入门示例。如果您从 Firebase 2.x SDK 升级,请参阅网页/Node.js 升级指南以开始。

如果您希望在服务器或无服务器后端(如 Cloud Functions)等特权环境(而不是面向最终用户的客户端,例如 Node.js 桌面应用或 IoT 设备等)中使用 Node.js,则应该按照设置 Admin SDK 的说明进行操作。

将 Firebase 添加至您的应用

要将 Firebase 添加到您的应用,您需要有 Firebase 项目、Firebase SDK,以及一段包含一些项目详细信息的简短初始化代码。

  1. 如果您还没有 Firebase 项目,请在 Firebase 控制台中创建一个。
    • 如果您已经有与自己的应用相关联的现有 Google 项目,请点击导入 Google 项目。如果没有,请点击新建项目
    • 如果您的项目中已经有应用,请点击项目概览页面上的添加其他应用
  2. 点击将 Firebase 添加到您的网页应用
  3. 记下初始化代码段,稍后您会用到。

网页

点击复制,然后将代码段粘贴到应用 HTML 中。代码段应如下所示:

<script src="https://www.gstatic.com/firebasejs/4.12.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>

这段代码包含了初始化信息,用于配置 Firebase JavaScript SDK 以便使用身份验证Cloud Storage实时数据库Cloud Firestore。如果要减少应用所用的代码,您可以只添加需要的功能。可以单独安装的组件包括:

  • firebase-app - 核心的 firebase 客户端(必需)。
  • firebase-auth - Firebase 身份验证(可选)。
  • firebase-database - Firebase 实时数据库(可选)。
  • firebase-firestore - Cloud Firestore(可选)。
  • firebase-storage - Cloud Storage(可选)。
  • firebase-messaging - Firebase 云消息传递(可选)。
  • firebase-functions - Cloud Functions for Firebase(可选)。

在 CDN 中,添加您需要的具体组件(首先添加 firebase-app):

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-functions.js"></script>

<!-- Leave out Storage -->
<!-- <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

如果要使用 Bundler(比如 Browserify 或 Webpack),则只需 require() 您要使用的组件:

var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Leave out Storage
//require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

您也可以通过 npm 获取 Firebase SDK。如果您还没有 package.json 文件,可通过 npm init 创建一个。接下来,安装 firebase npm 软件包并将其保存到 package.json 中:

$ npm install firebase --save

要在应用中使用该模块,您可以在任何 JavaScript 文件中 require 它:

var firebase = require("firebase");

如果您使用的是 ES2015,则可以改为 import 该模块:

import * as firebase from "firebase";

然后,使用上面的代码段初始化 Firebase SDK,如下所示:

// 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",
};
firebase.initializeApp(config);

使用 Firebase 服务

一个 Firebase App 可以使用多项 Firebase 服务。每项服务都可以通过 firebase 命名空间访问:

请参阅各项服务的使用文档。

运行本地网络服务器用于开发

如果要开发网页应用,您会发现 Firebase JavaScript SDK 的部分部件要求从服务器(而不是从本地文件系统)提供您的网页应用。您可以按如下方式使用 Firebase CLI 运行本地服务器:

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

使用 Firebase 托管来托管网页应用

如果要开发网页应用且该应用完全属于静态内容,您可以使用 Firebase 托管轻松进行部署。

Firebase 托管可为新型的前端网页应用提供以开发者为中心的静态网页托管服务。使用 Firebase 托管,您只需一个命令即可将启用了 SSL 的网页应用部署到您在全球内容分发网络 (CDN) 上的网域。

SDK 导入和隐式初始化

使用 Firebase 托管来托管的网页应用可以受益于较简单的项目配置。将以下代码片段粘贴到应用 HTML 中,以导入 Firebase SDK,并自动为托管您的应用的项目配置它们:

    <script src="/__/firebase/4.12.1/firebase-app.js"></script>
    <script src="/__/firebase/4.12.1/firebase-auth.js"></script>
    <script src="/__/firebase/4.12.1/firebase-database.js"></script>
    <script src="/__/firebase/4.12.1/firebase-messaging.js"></script>
    <script src="/__/firebase/4.12.1/firebase-functions.js"></script>

    <!-- Leave out Storage -->
    <!-- <script src="/__/firebase/4.12.1/firebase-storage.js"></script> -->

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

初始化多个应用

在大多数情况下,您只需要初始化一个默认应用。您可以通过两种等效的方式利用该应用访问各项服务:

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

在有些使用情形下,您需要同时创建多个应用。例如,您可能需要从一个 Firebase 项目的实时数据库中读取数据,并在另一个项目中存储文件。或者,您可能需要对一个应用进行身份验证,而对另一个应用不进行身份验证。借助 Firebase SDK,您可以同时创建分别具有各自配置信息的多个应用。

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

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

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

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

后续步骤

了解 Firebase:

向您的应用添加 Firebase 功能:

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面