将 Firebase SDK 与您的 Web 应用集成

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

自动初始化 Firebase Admin SDK 和 Web SDK

Firebase App Hosting 等 Google 环境通过在构建时和运行时进行无参数构造函数调用，简化了应用初始化。这项功能同时适用于 Node.js 版 Firebase Admin SDK（这是一个服务器端 SDK，可解锁大量 Firebase 功能，在 Web 应用中非常有用）和 Firebase JavaScript SDK。

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

不使用参数进行初始化

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

Admin SDK

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

JavaScript SDK

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

这种 Admin SDK 初始化策略适用于 App Hosting 以及其他 Google 服务器环境，包括 Cloud Run、App Engine 和 Cloud Functions。对于 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 安装后脚本设置自动初始化。安装后脚本会查找环境变量 FIREBASE_WEBAPP_CONFIG，该变量会在 App Hosting Cloud Build 环境中自动设置。

如果您在 Cloud Build 之外安装 JS SDK（例如在本地安装，以便与 Firebase 模拟器套件搭配使用），则需要在安装 Firebase JavaScript SDK 时自行设置此环境变量。

如需在安装时手动设置环境，请执行以下操作：

从 Firebase 控制台中复制您的 Firebase 网站应用配置对象。
在终端中，先设置 FIREBASE_WEBAPP_CONFIG 环境变量，然后再运行 npm install 命令。

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

每次更改 Firebase 项目或 Web 应用时，请重新运行此命令。

针对 SSR 使用 `FirebaseServerApp`

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

FirebaseServerApp 是 FirebaseApp 的变体，在服务器端渲染 (SSR) 环境中使用。它包含的一些工具可用于继续跨客户端渲染 (CSR) / 服务器端渲染 (SSR) 进行连接的 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 后端免遭滥用。