请按照本指南中的说明,在您的 Web 应用中使用 Firebase JavaScript SDK,或者将其用作客户端以供最终用户访问(例如,在 Node.js 桌面应用或 IoT 应用中)。
前提条件
安装您的首选编辑器或 IDE。
使用您的 Google 帐号登录 Firebase。
如果您还没有 JavaScript 项目,只是想试用某一 Firebase 产品,则可以下载我们的某个快速入门示例。
第 1 步:创建 Firebase 项目
您需要先创建一个要关联到您应用的 Firebase 项目,然后才能将该 Firebase 添加到您的 JavaScript 应用。
如需详细了解 Firebase 项目以及将应用添加到项目的最佳做法,请访问了解 Firebase 项目。
第 2 步:在 Firebase 中注册您的应用
有了 Firebase 项目后,您就可以将自己的 Web 应用添加到其中了。
如需详细了解将应用添加到 Firebase 项目的最佳做法和注意事项,请访问了解 Firebase 项目。
在 Firebase 控制台的项目概览页面的中心位置,点击 Web 图标 ( ) 以启动设置工作流。
如果您已向 Firebase 项目添加了应用,请点击添加应用以显示平台选项。
输入应用的别名。
此别名是方便内部使用的标识符,只有您能在 Firebase 控制台中看到。(可选)为您的 Web 应用设置 Firebase 托管。
点击注册应用。
第 3 步:添加 Firebase SDK 并初始化 Firebase
Firebase 为大多数 Firebase 产品(包括 Remote Config、FCM 等)提供了 JavaScript 库。您可以将任何可用库添加到应用中。
以哪种方式将 Firebase SDK 添加到 Web 应用,取决于您是否选择为应用使用 Firebase Hosting、要与应用搭配使用什么工具(如模块捆绑器),或者是否配置 Node.js 应用。如需有关在这些备选方案之间进行选择的更多帮助,请参阅将 Web SDK 添加到应用的方法。
使用模块捆绑器添加
您可将 Firebase JavaScript SDK 配置为部分导入,仅加载您需要的 Firebase 产品。如果您使用的是捆绑器(如 Browserify 或 webpack),则可以在需要时 import
单个 Firebase 产品。
安装 Firebase JavaScript SDK:
如果还没有
package.json
文件,请从 JavaScript 项目的根目录运行以下命令来创建一个:npm init
运行以下命令,安装
firebase
npm 软件包并将其保存到package.json
文件:npm install --save firebase
若要仅添加特定 Firebase 产品(如 Authentication 和 Cloud Firestore),请使用
import
导入 Firebase 模块:// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // 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 // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
从 CDN 添加
您可将 Firebase JavaScript SDK 配置为部分导入,仅加载您需要的 Firebase 产品。Firebase 将各 Firebase JavaScript SDK 库存储在我们的全球 CDN(内容分发网络)上。
若要仅添加特定 Firebase 产品(例如 Authentication 和 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/8.3.1/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script> </body>
在您的应用中初始化 Firebase:
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
从 Hosting 网址添加
使用 Firebase Hosting 时,您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的 Hosting 网址添加 SDK。
通过此设置选项,在您将应用部署到 Firebase 后,应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目,但不必跟踪用于 firebase.initializeApp()
的 Firebase 配置。
此设置选项也适用于在本地测试您的 Web 应用。
若要仅添加特定 Firebase 产品(例如,Analytics、Authentication 或 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/8.3.1/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.3.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.3.1/firebase-auth.js"></script> <script src="/__/firebase/8.3.1/firebase-firestore.js"></script> </body>
在您的应用中初始化 Firebase(如果使用预留的 Hosting 网址,则无需添加 Firebase 配置对象):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Node.js 应用
安装 Firebase JavaScript SDK:
如果您还没有
package.json
文件,请从 JavaScript 项目的根目录运行以下命令来创建一个:npm init
运行以下命令,安装
firebase
npm 软件包并将其保存到package.json
文件:npm install --save firebase
使用以下任一选项,在您的应用中使用 Firebase 模块:
您可以使用
require
从任何 JavaScript 文件获取模块若要仅添加特定 Firebase 产品(如 Authentication 和 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 产品(如 Authentication 和 Cloud Firestore),请运行以下命令:
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import 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 // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
了解 Firebase 配置对象
要在您的应用中初始化 Firebase,您需要提供应用的 Firebase 项目配置。您可以随时获取 Firebase 配置对象。
如果您使用预留的 Hosting 网址,系统会从您的 Firebase 项目中自动拉取 Firebase 配置,因此您无需在代码中明确提供配置对象。
我们不建议手动修改配置对象,尤其是以下必需的“Firebase 选项”:
apiKey
、projectId
和appID
。如果您使用这些必需的“Firebase 选项”的无效值或缺失值对您的应用进行初始化,则您的应用的用户可能会遇到严重问题。如果您在 Firebase 项目中启用了 Google Analytics(分析),则配置对象会包含字段
measurementId
。如需详细了解此字段,请参阅 Analytics(分析)使用入门页面。
下面是启用了所有服务的配置对象的格式(这些值会自动填充):
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field 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", measurementId: "G-MEASUREMENT_ID", };
下面是一个包含示例值的配置对象:
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" };
第 4 步:(可选)安装 CLI 并部署到 Firebase Hosting
如果您已将 Firebase Web 应用与 Firebase Hosting 网站关联,则可以现在(即设置 Web 应用时)就部署网站内容并进行配置,也可以日后再进行部署和配置。
要部署到 Firebase,请使用命令行工具 Firebase CLI。
初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令:
firebase init
将您的内容和托管配置部署到 Firebase Hosting。
默认 Hosting 网站
默认情况下,每个 Firebase 项目在
web.app
和firebaseapp.com
网域( 和PROJECT_ID.web.app
)上都有免费的子网域。PROJECT_ID.firebaseapp.com
部署到您的网站。从应用的根目录运行以下命令:
firebase deploy
在以下任一默认网站上查看您的网站:
PROJECT_ID.web.app
PROJECT_ID.firebaseapp.com
非默认托管网站
Firebase 项目支持多个网站(这些网站被视为您的非默认网站)。您可以在控制台的 Web 应用设置工作流中为您的项目添加其他网站,也可以从控制台的 Hosting 页面添加。
将网站添加到您的
firebase.json
文件(在firebase init
期间创建的文件)。请注意,此
firebase.json
配置假设您的每个网站都有单独的代码库。{ "hosting": { "site": "SITE_ID", "public": "public", // ... } }
部署到您的网站。从应用的根目录运行以下命令:
firebase deploy --only hosting:SITE_ID
在以下任一网站上查看您的网站:
SITE_ID.web.app
SITE_ID.firebaseapp.com
第 5 步:在您的应用中访问 Firebase
Firebase JavaScript SDK 支持以下 Firebase 产品。每个产品都是可选的,并且可从 firebase
命名空间访问。
如需了解可用的方法,请参阅 Firebase JavaScript 参考文档。
Firebase 产品 | 命名空间 | 网络 | Node.js |
---|---|---|---|
Analytics | firebase.analytics() |
||
Authentication | firebase.auth() |
||
Cloud Firestore | firebase.firestore() |
||
Cloud Functions for Firebase 客户端 SDK | firebase.functions() |
||
Cloud Messaging | firebase.messaging() |
||
Cloud Storage | firebase.storage() |
||
Performance Monitoring(Beta 版) | firebase.performance() |
||
Realtime Database | firebase.database() |
||
Remote Config(Beta 版) | firebase.remoteConfig() |
可用的库
后续步骤
了解 Firebase:
探索 Firebase 应用示例。
借助 Firebase Web Codelab 获得实际上手经验。
浏览 GitHub 中的开源代码。
查看 Firebase JavaScript SDK 的支持环境。
借助 Firebase 维护的其他开源库(如 AngularFire、RxFire 和 FirebaseUI for web)加快开发速度。
准备启动您的应用:
- 在 Google Cloud Console 中为您的项目设置预算提醒。
- 在 Firebase 控制台中监控“使用量和结算”信息中心,以全面了解您的项目在多个 Firebase 服务中的使用情况。
- 查看 Firebase 发布核对清单。
将 Firebase 服务添加到您的应用:
使用 Firebase Hosting 托管您的应用。
使用身份验证设置用户身份验证流程。
使用 Cloud Firestore 或 Realtime Database 存储数据(如用户信息)。
使用 Cloud Storage 存储文件,如照片和视频。
使用性能监控深入了解您应用的性能问题。
使用 Cloud Functions 函数触发在安全环境中运行的后端代码。
使用 Cloud Messaging 发送通知。