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 voll funktionsfähigen Webanwendung spielen Firebase SDKs wie Authentication, Cloud Firestore und App Check eine wichtige Rolle. In dieser Anleitung werden einige wichtige Strategien beschrieben, mit denen Sie Firebase SDKs optimieren und Firebase in Ihre Webanwendung auf Firebase App Hosting einbinden können.

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. Diese Funktion ist sowohl im Firebase Admin SDK für Node.js, einem serverseitigen SDK, das viele Firebase Funktionen freischaltet und sehr nützlich für Ihre Webanwendung sein kann, als auch im Firebase JavaScript SDK verfügbar.

Mit initializeApp() können Sie die Webanwendungskonfiguration 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 entweder das Firebase Admin SDK oder das Firebase JavaScript SDK mit Standard konfigurationswerten initialisieren möchten, verwenden Sie initializeApp() ohne Argumente.

Admin SDK

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

Für das Admin SDK funktioniert diese Initialisierungsstrategie in App Hosting sowie in anderen Google-Serverumgebungen wie Cloud Run, App Engine und Cloud Run-Funktionen.

JavaScript SDK

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

Für das JavaScript SDK funktioniert diese Initialisierungsstrategie in App Hosting.

Automatisch ausgefüllte Werte überschreiben

Sie können die Standardkonfiguration überschreiben, die automatisch eingefügt wird. Beachten Sie, dass sich diese Optionen zwischen dem Admin SDK und JavaScript SDK unterscheiden.

Admin SDK überschreiben

Wenn Sie optional 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 Variablen FIREBASE_CONFIG mit einem {-Zeichen beginnt, wird er als JSON-Objekt geparst. Andernfalls geht das SDK davon aus, dass die String der Pfad einer JSON-Datei mit den Optionen ist.

# apphosting.yaml

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

JavaScript SDK überschreiben

Wenn Sie die Standardwerte von FIREBASE_WEBAPP_CONFIG überschreiben möchten, die von App Hosting für die Initialisierung des JavaScript SDK eingefügt werden, 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 Skript eingerichtet, wenn Sie das Firebase JavaScript SDK installieren. Das postinstall Skript sucht nach der Umgebungsvariablen FIREBASE_WEBAPP_CONFIG, die automatisch in der App Hosting Cloud Build-Umgebung 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 Ihr Firebase-Webanwendungskonfigurationsobjekt aus der Firebase Konsole.

  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

Jedes Mal, wenn Sie Ihr Firebase-Projekt oder Ihre Webanwendung ändern, führen Sie diesen Befehl noch einmal aus. Möglicherweise müssen auch Zwischenspeicher wie .next/cache geleert werden.

FirebaseServerApp für SSR verwenden

Wenn Sie bei der Entwicklung Ihrer Webanwendung bereits mit dem Firebase JS SDK oder anderen Firebase-Client-SDKs gearbeitet haben, kennen Sie wahrscheinlich die FirebaseApp-Schnittstelle und wissen, wie Sie damit App-Instanzen konfigurieren. Um ähnliche Vorgänge auf der Serverseite zu ermöglichen, bietet Firebase FirebaseServerApp.

FirebaseServerApp ist eine Variante von FirebaseApp für die Verwendung in SSR-Umgebungen (Server-Side Rendering). Es enthält Tools, um Firebase-Sitzungen fortzusetzen, die die Grenze zwischen CSR (Client-Side Rendering) und SSR überschreiten.

Verwenden Sie FirebaseServerApp für folgende Zwecke:

  • Serverseitigen Code im Nutzerkontext ausführen, im Gegensatz zum Firebase Admin SDK, das über vollständige Administratorrechte verfügt.
  • Die Verwendung von App Check in SSR-Umgebungen aktivieren.
  • Eine Firebase Auth-Sitzung fortsetzen, die im Client erstellt wurde.

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

App Check in Ihrer Webanwendung aktivieren

Mit App Check können Sie die Sicherheit Ihrer dynamischen Webanwendung auf App Hosting verbessern. Wenn Sie einige der spezifischen serverseitigen Strategien implementieren, die unter Firebase in dynamischen Webanwendungen mit SSR verwenden beschrieben werden, können Sie Ihre App Hosting Back-Ends vor Missbrauch schützen.