Firebase SDKs in Ihre Webanwendung einbinden

Firebase App Hosting eignet sich hervorragend für dynamische Web-Apps, die mit dem Firebase JavaScript SDK und Firebase Admin SDK für Node.js erstellt wurden. In einer vollwertigen Web-App 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 ermöglichen 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 viele Firebase-Funktionen freischaltet und sehr nützlich für Ihre Web-App sein kann, als auch im Firebase JavaScript SDK.

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

Ohne Argumente initialisieren

Wenn Sie 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 sowie in anderen Google-Serverumgebungen wie Cloud Run, App Engine und Cloud Functions. Für das JavaScript SDK funktioniert diese Strategie auf App Hosting.

Automatisch eingefügte Werte überschreiben

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

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 Variablen FIREBASE_CONFIG mit dem 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: '{"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 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 Umgebungsvariable FIREBASE_WEBAPP_CONFIG, die in der Cloud Build-Umgebung App Hosting automatisch 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 Firebase-Konfigurationsobjekt für Web-Apps aus der Firebase Console.

  2. Legen Sie im 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 immer dann aus, wenn Sie Ihr Firebase-Projekt oder Ihre Web-App ändern.

FirebaseServerApp für SSR verwenden

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

FirebaseServerApp ist eine Variante von FirebaseApp für die Verwendung in Umgebungen mit serverseitigem Rendering (SSR). Es enthält Tools, um Firebase-Sitzungen fortzusetzen, die sich über clientseitiges Rendering (CSR) und serverseitiges Rendering erstrecken.

Funktionen von FirebaseServerApp:

  • Führen Sie serverseitigen Code im user-Kontext aus, im Gegensatz zum Firebase Admin SDK, der über vollständige Administratorrechte verfügt.
  • Verwendung von App Check in SSR-Umgebungen aktivieren
  • Eine im Client erstellte Firebase Auth-Sitzung fortsetzen.

Ausführliche Informationen zur Verwendung von FirebaseServerApp für diese Zwecke finden Sie unter Firebase in dynamischen Web-Apps 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 unter Firebase in dynamischen Web-Apps mit SSR verwenden beschrieben werden, können Sie Ihre App Hosting-Back-Ends vor Missbrauch schützen.