请按照本指南中的说明，在您的 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 项目。
在 Firebase 控制台的项目概览页面中，点击 Web 图标 () 以启动设置工作流。
如果您已向 Firebase 项目添加了应用，请点击添加应用以显示平台选项。
输入应用的别名。
别名是方便内部使用的标识符，只有您能在 Firebase 控制台中看到。
（可选）为您的 Web 应用设置 Firebase 托管。
点击注册应用。
第 3 步：添加 Firebase SDK 并初始化 Firebase
您可以将任何受支持的 Firebase 产品添加到您的应用中。
以哪种方式向您的应用添加 Firebase SDK，取决于您是否选择为应用使用 Firebase 托管、要与应用搭配使用的工具（如捆绑器）或是否配置了 Node.js 应用。
从托管网址添加
使用 Firebase 托管时，您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的托管网址添加 SDK。
通过此设置选项，在您将应用部署到 Firebase 后，应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目，但不必跟踪用于 firebase.initializeApp() 的 Firebase 配置。
此设置选项也适用于在本地测试您的 Web 应用。
若要仅添加特定 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>在您的应用中初始化 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（内容分发网络）上。
若要仅添加特定 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>在您的应用中初始化 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 产品。
安装 Firebase JavaScript SDK：
如果还没有
package.json文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：npm init
运行以下命令，安装
firebasenpm 软件包并将其保存到package.json文件：npm install --save firebase
若要仅添加特定 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";在您的应用中初始化 Firebase：
// TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Node.js 应用
安装 Firebase JavaScript SDK：
如果您还没有
package.json文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：npm init
运行以下命令，安装
firebasenpm 软件包并将其保存到package.json文件：npm install --save firebase
使用以下任一选项，在您的应用中使用 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";
在您的应用中初始化 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 应用时）就部署网站内容并进行配置，也可以日后再进行部署和配置。
要部署到 Firebase，请使用 Firebase CLI 命令行工具。安装 CLI 或将其更新为最新版本。
从计算机的任意位置运行以下 npm 命令：
npm install -g firebase-tools
登录 Google。运行以下命令：
firebase login
此命令将您的本地机器与 Firebase 关联，并授予您对 Firebase 项目的访问权限。
初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令：
firebase init
此初始化命令会：
- 将您的本地应用目录与 Firebase 关联。
- 生成一个
firebase.json文件（Firebase 托管所需的必要文件）。 提示您指定一个包含您的公共静态文件（HTML、CSS、JS 等）的公共根目录。
Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改
firebase.json文件的方式来稍后设置公共目录。
将您的内容和托管配置部署到 Firebase 托管。
默认托管网站
默认情况下，每个 Firebase 项目在
web.app和firebaseapp.com网域上都有免费的子网域（project-id.web.appproject-id.firebaseapp.com部署到您的网站。从应用的根目录运行以下命令：
firebase deploy
在以下任一默认网站上查看您的网站：
project-id.web.appproject-id.firebaseapp.com
非默认托管网站
Firebase 项目支持多个网站（这些网站被视为您的非默认网站）。您可以在控制台的 Web 应用设置工作流中为您的项目添加其他网站，也可以从控制台的托管页面添加。
将网站添加到您的
firebase.json文件（firebase init期间创建的文件）。请注意，此
firebase.json配置假设您的每个网站都有单独的代码库。{ "hosting": { "site": "site-name>", "public": "public", // ... } }部署到您的网站。从应用的根目录运行以下命令：
firebase deploy --only hosting:site-name
在以下任一网站上查看您的网站：
site-name.web.appsite-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。
在 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>创建一个
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 托管，则下面的几个步骤可能先前已经完成。
安装或更新 Firebase CLI。从计算机的任意位置运行以下 npm 命令：
npm install -g firebase-tools
登录 Google。运行以下命令：
firebase login
此命令将您的本地机器与 Firebase 关联，并授予您对 Firebase 项目的访问权限。
初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令：
firebase init
此初始化命令会：
- 将您的本地应用目录与 Firebase 关联。
- 生成一个
firebase.json文件（Firebase 托管所需的必要文件）。 提示您指定一个包含您的公共静态文件（HTML、CSS、JS 等）的公共根目录。
Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改
firebase.json文件的方式来稍后设置公共目录。
启动本地服务器以用于开发。从本地应用目录的根目录运行以下命令：
firebase serve
后续步骤
了解 Firebase：
探索 Firebase 应用示例。
借助 Firebase Web Codelab 获得实际上手经验。
浏览 GitHub 中的开源代码。
借助 Firebase 维护的其他开源库（如 AngularFire、RxFire 和 FirebaseUI for web）加快开发速度。
准备启动您的应用：
将 Firebase 服务添加到您的应用，如：
使用 Firebase 托管功能托管您的应用。
使用身份验证设置用户身份验证流程。
使用 Cloud Firestore 或实时数据库存储数据（如用户信息）。
使用 Cloud Storage 存储文件，如照片和视频。
使用性能监控深入了解您应用的性能问题。
使用 Cloud Functions 函数触发在安全环境中运行的后端代码。
使用云消息传递功能发送通知。