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 vollwertigen Webanwendung spielen Firebase-SDKs wie Authentication, Cloud Firestore und App Check eine wichtige Rolle. In diesem Leitfaden 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 verfügbar – einem serverseitigen SDK, das einen großen Bereich der Firebase-Funktionen freischaltet und in Ihrer Webanwendung sehr nützlich sein kann – als auch im Firebase JavaScript SDK.

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

Ohne Argumente initialisieren

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

Admin SDK

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

JavaScript SDK

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

Diese Strategie für die Admin SDK-Initialisierung funktioniert in App Hosting und anderen Google-Serverumgebungen wie Cloud Run, App Engine und Cloud Functions. Für das JavaScript SDK funktioniert diese Strategie auf 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 dem JavaScript SDK unterscheiden.

Admin SDK Überschreibung

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 dem Zeichen { beginnt, wird er als JSON-Objekt geparst. Andernfalls geht das SDK davon aus, dass der String der Pfad zu 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-Überschreibung

Wenn Sie die Standardwerte für FIREBASE_WEBAPP_CONFIG überschreiben möchten, die App Hosting für die Initialisierung des JavaScript SDK einschleust, 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 nach der Installation 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, z. B. lokal für die Verwendung mit der Firebase Emulator Suite, 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-Webanwendung aus der Firebase Console.

  2. Legen Sie die Umgebungsvariable FIREBASE_WEBAPP_CONFIG in einem Terminal 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 Webanwendung ändern.

FirebaseServerApp für SSR verwenden

Wenn Sie bei der Entwicklung Ihrer Webanwendung mit dem Firebase JS SDK oder anderen Firebase-Client-SDKs gearbeitet haben, sind Sie wahrscheinlich mit der FirebaseApp-Benutzeroberfläche und der Konfiguration 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 serverseitigen Rendering-Umgebungen (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:

  • Serverseitigen Code im Kontext des Nutzers ausführen, im Gegensatz zu Firebase Admin SDK, das über volle Administratorrechte verfügt.
  • Aktivieren Sie die Verwendung von App Check in SSR-Umgebungen.
  • Eine Firebase Auth-Sitzung fortsetzen, die auf dem 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 auf App Hosting verbessern. Wenn Sie einige der spezifischen serverseitigen Strategien implementieren, die im Artikel Firebase in dynamischen Webanwendungen mit SSR verwenden beschrieben werden, können Sie Ihre App Hosting-Backends vor Missbrauch schützen.