��� Firebase SDK 与您的 Web 应用集成

Firebase App Hosting 非常适合使用 Firebase JavaScript SDK 和 Firebase Admin SDK for Node.js 构建的动态 Web 应用。在功能全面的 Web 应用中，Firebase SDK（例如 Authentication、Cloud Firestore 和 App Check）发挥着重要作用。本指南介绍了一些关键策略，可帮助您优化 Firebase SDK，并开始在 Firebase App Hosting 上将 Firebase 集成到 Web 应用中。

自动初始化 Firebase Admin SDK 和 Web SDK

Google 环境（例如 Firebase App Hosting）通过在构建时间时和运行时调用无实参构造函数来简化应用初始化。这是 Firebase Admin SDK for Node.js（一种服务器端 SDK，可解锁大量 Firebase 功能，在 Web 应用中非常有用）和 Firebase JavaScript SDK 的一项功能。

借助 initializeApp()，您可以让 Firebase App Hosting 自动为您填充 Web 应用配置，同时仍可选择对特定���进行精细控制（如果您想替换默认值）。

在不使用实参的情况下进行初始化

如需使用默认配置值初始化 Firebase Admin SDK 或 Firebase JavaScript SDK，请使用 initializeApp()，而不提供任何实参。

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

对于 Admin SDK，此初始化策略适用于 App Hosting 以及其他 Google 服务器环境，包括 Cloud Run、App Engine 和 Cloud Run 函数。

JavaScript SDK

import { initializeApp } from 'firebase/app';
const app = initializeApp();

对于 JavaScript SDK，此初始化策略适用于 App Hosting。

覆盖自动填充的值

您可以替换自动注入的默认配置。请注意，这些选项在 Admin SDK 和 JavaScript SDK 之间有所不同。

Admin SDK 覆盖

如需选择为 Realtime Database、Cloud Storage 或 Cloud Functions 等服务指定自定义初始化选项，请使用 FIREBASE_CONFIG 环境变量。如果 FIREBASE_CONFIG 变量的内容以 { 字符开头，则会被解析为 JSON 对象。如果不是以该字符开头，则 SDK 会假定该字符串是包含选项的 JSON 文件的路径。

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

JavaScript SDK 替换

如需替换 App Hosting 为 JavaScript SDK 初始化注入的默认 FIREBASE_WEBAPP_CONFIG 值，您可以在 apphosting.yaml 中指定值：

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

在其他环境中使用自动初始化

安装 Firebase JavaScript SDK 时，系统会使用 npm postinstall 脚本设置自动初始化。postinstall 脚本会查找环境变量 FIREBASE_WEBAPP_CONFIG，该变量在 App Hosting Cloud Build 构建环境中会自动设置。

如果您要在 Cloud Build 之外安装 JS SDK，则需要在安装 Firebase JavaScript SDK 时自行设置此环境变量。

在安装时手动设置环境：

  1. 从 Firebase 控制台复制 Firebase Web 应用配置对象。

  2. 在运行 npm install 命令之前，请在终端中设置 FIREBASE_WEBAPP_CONFIG 环境变量。

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

每当您更改 Firebase 项目或 Web 应用时，请重新运行此命令。中间缓存（例如 .next/cache）可能也需要清除。

使用 FirebaseServerApp 进行 SSR

如果您在开发 Web 应用时使用过 Firebase JS SDK 或其他 Firebase 客户端 SDK，那么您可能会熟悉 FirebaseApp 接口以及如何使用它来配置应用实例。为了在服务器端实现类似操作，Firebase 提供了 FirebaseServerApp。

FirebaseServerApp 是 FirebaseApp 的变体，在服务器端渲染 (SSR) 环境中使用。它包含了一些工具可用于继续跨客户端渲染 (CSR) / 服务器端渲染进行连接的 Firebase 会话。

使用 FirebaseServerApp 来执行以下操作：

  • 在用户上下文中执行服务器端代码，这与具有完全管理权限的 Firebase Admin SDK 相反。
  • 在 SSR 环境中启用 App Check。
  • 继续在客户端中创建的 Firebase Auth 会话。

如需详细了解如何将 FirebaseServerApp 用于这些目的，请参阅在具有 SSR 的动态 Web 应用中使用 Firebase。

在 Web 应用中启用 App Check

您可以使用 App Check 来增强 App Hosting 上动态 Web 应用的安全性。通过实现在具有 SSR 的动态 Web 应用中使用 Firebase 中介绍的一些特定服务器端策略，您可以保护 App Hosting 后端免遭滥用。