Firebase SDKs in Ihre Webanwendung einbinden

Firebase App Hosting eignet sich hervorragend für dynamische Webanwendungen, die mit dem Firebase JavaScript SDK und Firebase Admin SDK für Node.js erstellt wurden. In einer Web-App mit vollem Funktionsumfang spielen Firebase-SDKs wie Authentication, Cloud Firestore und App Check eine wichtige Rolle. In diesem Leitfaden werden einige wichtige Strategien zur Optimierung von Firebase-SDKs beschrieben. Außerdem wird erläutert, wie Sie Firebase in Ihre Web-App auf Firebase App Hosting einbinden.

Firebase Admin SDK- und Web-SDKs automatisch initialisieren

Google-Umgebungen wie Firebase App Hosting bieten eine vereinfachte App-Initialisierung durch einen Konstruktoraufruf ohne Argumente zur Build- und Laufzeit. Dies ist eine Funktion des Firebase Admin SDK für Node.js, einem serverseitigen SDK, das einen großen Teil der Firebase-Funktionen freischaltet und in Ihrer Web-App sehr nützlich sein kann, sowie des Firebase JavaScript SDK.

Mit initializeApp() können Sie die Web-App-Konfiguration automatisch von Firebase App Hosting ausfüllen lassen. Sie haben aber weiterhin die Möglichkeit, bestimmte Werte detailliert zu steuern, wenn Sie Standardwerte überschreiben möchten.

Ohne Argumente initialisieren

Wenn Sie das JavaScript SDK Firebase Admin SDK oder Firebase mit Standardkonfigurationswerten initialisieren möchten, verwenden Sie initializeApp(), ohne Argumente anzugeben.

Admin SDK

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

Für Admin SDK funktioniert diese Initialisierungsstrategie sowohl in App Hosting als auch in anderen Google-Serverumgebungen, einschließlich Cloud Run, App Engine und Cloud Run-Funktionen.

JavaScript SDK

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

Beim JavaScript SDK funktioniert diese Initialisierungsstrategie in App Hosting.

Automatisch ausgefüllte Werte überschreiben

Sie können die automatisch eingefügte Standardkonfiguration überschreiben. Diese Optionen unterscheiden sich zwischen dem Admin SDK und dem JavaScript SDK.

Admin SDK Überschreibung

Wenn Sie benutzerdefinierte Initialisierungsoptionen für Dienste wie Realtime Database, Cloud Storage oder Cloud Functions angeben möchten, verwenden Sie die Umgebungsvariable FIREBASE_CONFIG. Wenn der Inhalt der Variable FIREBASE_CONFIG mit einem {-Zeichen beginnt, wird er als JSON-Objekt geparst. Andernfalls geht das SDK davon aus, dass der String der Pfad einer JSON-Datei ist, die die Optionen enthält.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"databaseURL":"https://project-id-default-rtdb.firebaseio.com","projectId":"my-project-id"}'

JavaScript SDK-Überschreibung

Wenn Sie die Standardwerte für FIREBASE_WEBAPP_CONFIG überschreiben möchten, die App Hosting für die JavaScript SDK-Initialisierung einfügt, können Sie Werte in apphosting.yaml angeben:

# 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"}'

Automatische Initialisierung in anderen Umgebungen verwenden

Die automatische Initialisierung wird mit einem npm-postinstall-Script eingerichtet, wenn Sie das Firebase JavaScript SDK installieren. Das Script postinstall sucht nach der Umgebungsvariablen FIREBASE_WEBAPP_CONFIG, die automatisch in der Cloud Build-Umgebung App Hosting festgelegt wird.

Wenn Sie das JS SDK außerhalb von Cloud Build installieren, müssen Sie diese Umgebungsvariable selbst festlegen, wenn Sie das Firebase JavaScript SDK installieren.

So richten Sie die Umgebung bei der Installation manuell ein:

  1. Kopieren Sie das Konfigurationsobjekt Ihrer Firebase-Web-App aus der Firebase-Console.

  2. Legen Sie in einem Terminal die Umgebungsvariable FIREBASE_WEBAPP_CONFIG fest, bevor Sie den Befehl npm install ausführen.

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

Führen Sie diesen Befehl jedes Mal aus, wenn Sie Ihr Firebase-Projekt oder Ihre Web-App ändern. Möglicherweise müssen auch Zwischencaches (wie .next/cache) geleert werden.

FirebaseServerApp für SSR verwenden

Wenn Sie bei der Entwicklung Ihrer Web-App mit dem Firebase JS SDK oder anderen Firebase-Client-SDKs gearbeitet haben, sind Sie wahrscheinlich mit der FirebaseApp-Schnittstelle und ihrer Verwendung zum Konfigurieren von App-Instanzen vertraut. Für ähnliche Vorgänge auf der Serverseite bietet Firebase FirebaseServerApp.

FirebaseServerApp ist eine Variante von FirebaseApp für die Verwendung in Umgebungen mit serverseitigem Rendering (SSR). Es enthält Tools, mit denen Firebase-Sitzungen fortgesetzt werden können, die die Grenze zwischen clientseitigem Rendering (CSR) und serverseitigem Rendering (SSR) überschreiten.

Funktionen von FirebaseServerApp:

  • Führen Sie serverseitigen Code im Nutzerkontext aus, im Gegensatz zum Firebase Admin SDK, der uneingeschränkte Administratorrechte hat.
  • Verwendung von App Check in SSR-Umgebungen aktivieren.
  • Firebase Auth-Sitzung fortsetzen, die im Client erstellt wurde.

Ausführliche Informationen zur Verwendung von FirebaseServerApp für diese Zwecke finden Sie unter Firebase in dynamischen Webanwendungen mit SSR verwenden.

App Check in Ihrer Webanwendung aktivieren

Mit App Check können Sie die Sicherheit Ihrer dynamischen Webanwendung in App Hosting erhöhen. Wenn Sie einige der spezifischen serverseitigen Strategien implementieren, die unter Firebase in dynamischen Web-Apps mit SSR verwenden beschrieben werden, können Sie Ihre App Hosting-Backends vor Missbrauch schützen.