Интеграция Firebase SDK с веб-приложением

Firebase App Hosting отлично подходит для динамических веб-приложений, созданных с помощью Firebase JavaScript SDK и Firebase Admin SDK для Node.js. В полнофункциональном веб-приложении SDK Firebase, такие как Authentication, Cloud Firestore и App Check, играют важную роль. В этом руководстве описаны основные стратегии, которые помогут оптимизировать SDK Firebase и начать встраивать Firebase в веб-приложение на платформе Firebase App Hosting.

Автоматически инициализировать Firebase Admin SDK и веб-SDK

Среды Google, такие как Firebase App Hosting, упрощают инициализацию приложения за счет вызова конструктора без аргументов во время сборки и выполнения. Эта функция доступна как в Firebase Admin SDK для Node.js (серверном SDK, который открывает доступ к широкому спектру функций Firebase и может быть очень полезен в вашем веб-приложении), так и в Firebase JavaScript SDK.

С помощью initializeApp() вы можете разрешить Firebase App Hosting автоматически заполнять конфигурацию веб-приложения, сохраняя при этом возможность точного контроля над определенными значениями, если вы хотите переопределить значения по умолчанию.

Инициализировать без аргументов

Чтобы инициализировать SDK Firebase Admin SDK или Firebase JavaScript со значениями конфигурации по умолчанию, используйте 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: '{"databaseURL":"https://project-id-default-rtdb.firebaseio.com","projectId":"my-project-id"}'

Переопределение JavaScript SDK

Чтобы переопределить значения FIREBASE_WEBAPP_CONFIG по умолчанию, которые App Hosting вставляет для инициализации JavaScript SDK, вы можете указать значения в 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"}'

Как использовать автоматическую инициализацию в других средах

Автоматическая инициализация настраивается с помощью скрипта npm postinstall при установке Firebase JavaScript SDK. Скрипт postinstall ищет переменную среды FIREBASE_WEBAPP_CONFIG, которая автоматически задается в среде сборки Cloud Build App Hosting.

Если вы устанавливаете JS SDK вне Cloud Build, вам нужно будет самостоятельно задать эту переменную среды при установке Firebase JavaScript SDK.

Чтобы настроить среду вручную во время установки:

  1. Скопируйте объект конфигурации веб-приложения Firebase из консоли Firebase.

  2. В терминале задайте переменную среды FIREBASE_WEBAPP_CONFIG, прежде чем выполнять команду npm install.

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

Если вы измените проект Firebase или веб-приложение, выполните эту команду снова. Также может потребоваться очистить промежуточные кеши (например, .next/cache).

Используйте FirebaseServerApp для SSR

Если вы использовали Firebase JS SDK или другие клиентские SDK Firebase при разработке веб-приложения, то, скорее всего, знакомы с интерфейсом FirebaseApp и знаете, как с его помощью настраивать экземпляры приложения. Чтобы упростить аналогичные операции на стороне сервера, Firebase предоставляет FirebaseServerApp.

FirebaseServerApp – это вариант FirebaseApp для использования в средах серверной отрисовки (SSR). В нем есть инструменты для продолжения сеансов Firebase, которые охватывают отрисовку на стороне клиента и на стороне сервера.

Используя FirebaseServerApp, вы можете:

  • Выполнять код на стороне сервера в контексте пользователя, в отличие от Firebase Admin SDK, у которого есть полные права администратора.
  • Разрешить использование App Check в средах SSR.
  • Продолжить сеанс Firebase Auth, созданный в клиенте.

Подробную информацию об использовании FirebaseServerApp для этих целей можно найти в статье Использование Firebase в динамических веб-приложениях с SSR.

Как включить App Check в веб-приложении

Вы можете использовать App Check, чтобы усилить защиту динамического веб-приложения на App Hosting. Реализовав некоторые из стратегий на стороне сервера, описанных в статье Использование Firebase в динамических веб-приложениях с SSR, вы можете защитить свои серверные части App Hosting от злоупотреблений.