将 Firebase 添加到您的 JavaScript 项目

前提条件

开始之前，您需要有一个要添加 Firebase 的 JavaScript（网页或 Node.js）应用。如果还没有应用，您可以下载我们的某个快速入门示例。

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

将 Firebase 添加到您的应用

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

在 Firebase 控制台中创建一个 Firebase 项目。
- 如果您当前没有 Firebase 项目，请点击添加项目，然后输入现有的 Google Cloud Platform 项目名称或新项目名称。
- 如果您有一个打算使用的现有 Firebase 项目，请从控制台中选择该项目。
在 Firebase 控制台的项目概览页面中，点击将 Firebase 添加到您的网页应用。如果您的项目已经有应用，请从项目概览页面中选择添加应用。
将项目的自定义代码段复制并粘贴到网页的 <head> 标记中（在其他脚本标记之前）。

下面是一个初始化代码段示例：

网页

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

<script src="https://www.gstatic.com/firebasejs/5.9.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",
    projectId: "<PROJECT_ID>",
    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）：

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-storage.js"></script> -->

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

如果要使用 Bundler（比如 Browserify 或 Webpack），则只需包含 (require()) 您要使用的组件：

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// 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 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.auth() - 身份验证
firebase.storage() - Cloud Storage
firebase.database() - 实时数据库
firebase.firestore() - Cloud Firestore
firebase.messaging() - 云消息传递
firebase.functions() - Cloud Functions

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

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

如果要构建网页应用，您会发现 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 托管，您只需使用一个命令即可在一个全球内容分发网络 (CDN) 上将启用了 SSL 的网页应用部署到您的网域。

SDK 导入和隐式初始化

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

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.9.1/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.9.1/firebase-auth.js"></script>
    <script src="/__/firebase/5.9.1/firebase-database.js"></script>
    <script src="/__/firebase/5.9.1/firebase-messaging.js"></script>
    <script src="/__/firebase/5.9.1/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.9.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 应用示例。
借助 Firebase 网页代码实验室获得实际上手经验。
浏览 GitHub 中的开源代码。

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

借助身份验证功能设置用户身份验证机制。
借助实时数据库功能存储用户信息，或通过 Cloud Storage 存储 blob 数据。
借助云消息传递功能接收通知。