Cloud Firestore-Web-Codelab

1. Übersicht

Ziele

In diesem Codelab erstellen Sie eine Webanwendung für Restaurantempfehlungen, die auf Cloud Firestore basiert.

Lerninhalte

• Daten aus einer Web-App in Cloud Firestore lesen und schreiben
• Änderungen an Cloud Firestore-Daten in Echtzeit überwachen
• Cloud Firestore-Daten mit Firebase Authentication und Sicherheitsregeln schützen
• Komplexe Cloud Firestore-Abfragen schreiben

Voraussetzungen

Bevor Sie mit diesem Codelab beginnen, müssen Sie Folgendes installiert haben:

• npm, das normalerweise mit Node.js geliefert wird. Node 16+ wird empfohlen.
• Die IDE oder der Texteditor Ihrer Wahl, z. B. WebStorm, VS Code oder Sublime

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. FriendlyEats).
   
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Firebase-Produkte einrichten

Die Anwendung, die wir erstellen, verwendet einige im Web verfügbare Firebase-Dienste:

• Firebase Authentication zur einfachen Identifizierung Ihrer Nutzer
• Cloud Firestore zum Speichern strukturierter Daten in der Cloud und zum Erhalten sofortiger Benachrichtigungen, wenn die Daten aktualisiert werden
• Firebase Hosting zum Hosten und Bereitstellen Ihrer statischen Assets

In diesem Codelab haben wir Firebase Hosting bereits konfiguriert. Für Firebase Auth und Cloud Firestore zeigen wir Ihnen jedoch, wie Sie die Dienste über die Firebase Console konfigurieren und aktivieren.

Anonyme Authentifizierung aktivieren

Obwohl die Authentifizierung nicht im Fokus dieses Codelabs steht, ist es wichtig, dass unsere App eine Form der Authentifizierung hat. Wir verwenden die anonyme Anmeldung. Das bedeutet, dass der Nutzer still angemeldet wird, ohne dass er dazu aufgefordert wird.

Sie müssen die anonyme Anmeldung aktivieren.

1. Suchen Sie in der Firebase Console in der linken Navigationsleiste nach dem Abschnitt Build.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode (oder klicken Sie hier, um direkt dorthin zu gelangen).
3. Aktivieren Sie den Anonym-Anbieter für Anmeldungen und klicken Sie dann auf Speichern.

Dadurch kann sich die Anwendung im Hintergrund bei Ihren Nutzern anmelden, wenn sie auf die Web-App zugreifen. Weitere Informationen finden Sie in der Dokumentation zur anonymen Authentifizierung.

Cloud Firestore aktivieren

Die App verwendet Cloud Firestore zum Speichern und Empfangen von Restaurantinformationen und ‑bewertungen.

Sie müssen Cloud Firestore aktivieren. Klicken Sie im Abschnitt Build in der Firebase Console auf Firestore-Datenbank. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen.

Der Zugriff auf Daten in Cloud Firestore wird durch Sicherheitsregeln gesteuert. Wir werden später in diesem Codelab noch genauer auf Regeln eingehen. Zuerst müssen wir aber einige grundlegende Regeln für unsere Daten festlegen. Fügen Sie auf dem Tab „Regeln“ der Firebase Console die folgenden Regeln hinzu und klicken Sie dann auf Veröffentlichen.

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Wir werden diese Regeln und ihre Funktionsweise später im Codelab besprechen.

3. Beispielcode abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/firebase/friendlyeats-web

Der Beispielcode sollte in das Verzeichnis 📁friendlyeats-web geklont worden sein. Achten Sie ab jetzt darauf, alle Befehle in diesem Verzeichnis auszuführen:

cd friendlyeats-web/vanilla-js

Start-App importieren

Öffnen oder importieren Sie das Verzeichnis 📁friendlyeats-web mit Ihrer IDE (WebStorm, Atom, Sublime, Visual Studio Code usw.). Dieses Verzeichnis enthält den Startcode für das Codelab, der aus einer noch nicht funktionsfähigen App zur Empfehlung von Restaurants besteht. Im Laufe dieses Codelabs werden wir sie funktionsfähig machen. Sie müssen also bald Code in diesem Verzeichnis bearbeiten.

4. Firebase-Befehlszeilentool installieren

Mit der Firebase-Befehlszeile (CLI) können Sie Ihre Web-App lokal bereitstellen und in Firebase Hosting bereitstellen.

1. Installieren Sie die Befehlszeile mit dem folgenden npm-Befehl:

npm -g install firebase-tools

2. Prüfen Sie mit dem folgenden Befehl, ob die Befehlszeile korrekt installiert wurde:

firebase --version

Die Version der Firebase-CLI muss v7.4.0 oder höher sein.

3. Autorisieren Sie die Firebase CLI mit dem folgenden Befehl:

firebase login

Wir haben die Web-App-Vorlage so eingerichtet, dass die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis und den Dateien Ihrer App abgerufen wird. Dazu müssen wir Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

4. Achten Sie darauf, dass über die Befehlszeile auf das lokale Verzeichnis Ihrer App zugegriffen wird.
5. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:

firebase use --add

6. Wählen Sie bei Aufforderung Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt einen Alias.

Ein Alias ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch nur den Alias default.

7. Folgen Sie der restlichen Anleitung in der Befehlszeile.

5. Lokalen Server ausführen

Jetzt können wir mit der eigentlichen Arbeit an unserer App beginnen. Führen wir unsere App lokal aus.

1. Führen Sie den folgenden Firebase CLI-Befehl aus:

firebase emulators:start --only hosting

2. In der Befehlszeile sollte die folgende Antwort angezeigt werden:

hosting: Local server: http://localhost:5000

Wir verwenden den Firebase Hosting-Emulator, um unsere App lokal bereitzustellen. Die Web-App sollte nun unter http://localhost:5000 verfügbar sein.

3. Öffnen Sie Ihre App unter http://localhost:5000.

Sie sollten Ihre Kopie von FriendlyEats sehen, die mit Ihrem Firebase-Projekt verbunden ist.

Die App wurde automatisch mit Ihrem Firebase-Projekt verbunden und Sie wurden im Hintergrund als anonymer Nutzer angemeldet.

6. Daten in Cloud Firestore schreiben

In diesem Abschnitt schreiben wir einige Daten in Cloud Firestore, sodass wir die UI der App darstellen können. Das geht manuell über die Firebase Console, doch für dieses Lab tun wir dies direkt in der App, um Grundlagen des Schreibens in Cloud Firestore zu demonstrieren.

Datenmodell

Firestore-Daten werden in Sammlungen, Dokumente, Felder und untergeordnete Sammlungen aufgeteilt. Wir speichern jedes Restaurant als Dokument in einer Sammlung auf oberster Ebene namens restaurants.

Später speichern wir jede Rezension in einer Unterkollektion namens ratings unter jedem Restaurant.

Restaurants zu Firestore hinzufügen

Das Hauptmodellobjekt in unserer App ist ein Restaurant. Schreiben wir etwas Code, mit dem der Sammlung restaurants ein Restaurantdokument hinzugefügt wird.

1. Öffnen Sie scripts/FriendlyEats.Data.js in den heruntergeladenen Dateien.
2. Suchen Sie die Funktion FriendlyEats.prototype.addRestaurant.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Mit dem oben stehenden Code wird der Sammlung restaurants ein neues Dokument hinzugefügt. Die Dokumentdaten stammen aus einem einfachen JavaScript-Objekt. Dazu rufen wir zuerst eine Referenz auf eine Cloud Firestore-Sammlung restaurants ab und add dann die Daten.

Fügen wir Restaurants hinzu.

1. Kehren Sie in Ihrem Browser zur FriendlyEats-App zurück und aktualisieren Sie sie.
2. Klicken Sie auf Mock-Daten hinzufügen.

Die App generiert automatisch eine zufällige Gruppe von Restaurantobjekten und ruft dann Ihre addRestaurant-Funktion auf. Die Daten werden jedoch noch nicht in der eigentlichen Web-App angezeigt, da wir das Abrufen der Daten noch implementieren müssen (im nächsten Abschnitt des Codelabs).

Wenn Sie in der Firebase Console zum Cloud Firestore-Tab wechseln, sollten Sie jetzt neue Dokumente in der Sammlung restaurants sehen.

Herzlichen Glückwunsch! Sie haben gerade Daten aus einer Web-App in Cloud Firestore geschrieben.

Im nächsten Abschnitt erfahren Sie, wie Sie Daten aus Cloud Firestore abrufen und in Ihrer App anzeigen.

7. Daten aus Cloud Firestore anzeigen

In diesem Abschnitt erfahren Sie, wie Sie Daten aus Cloud Firestore abrufen und in Ihrer App anzeigen. Die beiden wichtigsten Schritte sind das Erstellen einer Abfrage und das Hinzufügen eines Snapshot-Listeners. Dieser Listener wird über alle vorhandenen Daten benachrichtigt, die der Anfrage entsprechen, und erhält Updates in Echtzeit.

Erstellen wir zuerst die Abfrage, mit der die standardmäßige, ungefilterte Liste der Restaurants abgerufen wird.

1. Kehren Sie zur Datei scripts/FriendlyEats.Data.js zurück.
2. Suchen Sie die Funktion FriendlyEats.prototype.getAllRestaurants.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Im obigen Code erstellen wir eine Abfrage, mit der bis zu 50 Restaurants aus der Sammlung der obersten Ebene mit dem Namen restaurants abgerufen werden. Die Restaurants werden nach der durchschnittlichen Bewertung (derzeit alle null) sortiert. Nachdem wir diese Abfrage deklariert haben, übergeben wir sie an die Methode getDocumentsInQuery(), die für das Laden und Rendern der Daten verantwortlich ist.

Dazu fügen wir einen Snapshot-Listener hinzu.

1. Kehren Sie zur Datei scripts/FriendlyEats.Data.js zurück.
2. Suchen Sie die Funktion FriendlyEats.prototype.getDocumentsInQuery.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

Im obigen Code wird der Callback von query.onSnapshot jedes Mal ausgelöst, wenn sich das Ergebnis der Anfrage ändert.

• Beim ersten Mal wird der Callback mit der gesamten Ergebnismenge der Abfrage ausgelöst, also der gesamten restaurants-Sammlung aus Cloud Firestore. Anschließend werden alle einzelnen Dokumente an die Funktion renderer.display übergeben.
• Wenn ein Dokument gelöscht wird, entspricht change.type removed. In diesem Fall rufen wir also eine Funktion auf, die das Restaurant aus der Benutzeroberfläche entfernt.

Nachdem wir beide Methoden implementiert haben, aktualisieren Sie die App und prüfen Sie, ob die Restaurants, die wir zuvor in der Firebase Console gesehen haben, jetzt in der App sichtbar sind. Wenn Sie diesen Abschnitt erfolgreich abgeschlossen haben, liest und schreibt Ihre App jetzt Daten mit Cloud Firestore.

Wenn sich Ihre Liste der Restaurants ändert, wird dieser Listener automatisch aktualisiert. Wenn Sie in der Firebase Console ein Restaurant manuell löschen oder seinen Namen ändern, werden die Änderungen sofort auf Ihrer Website angezeigt.

8. Get()-Daten

Bisher haben wir gezeigt, wie Sie mit onSnapshot Updates in Echtzeit abrufen können. Das ist jedoch nicht immer das, was wir möchten. Manchmal ist es sinnvoller, die Daten nur einmal abzurufen.

Wir möchten eine Methode implementieren, die ausgelöst wird, wenn ein Nutzer in Ihrer App auf ein bestimmtes Restaurant klickt.

1. Kehren Sie zu Ihrer Datei scripts/FriendlyEats.Data.js zurück.
2. Suchen Sie die Funktion FriendlyEats.prototype.getRestaurant.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Nachdem Sie diese Methode implementiert haben, können Sie Seiten für jedes Restaurant aufrufen. Klicken Sie einfach auf ein Restaurant in der Liste, um die Detailseite des Restaurants aufzurufen:

Derzeit können Sie noch keine Bewertungen hinzufügen, da wir das Hinzufügen von Bewertungen erst später im Codelab implementieren müssen.

9. Daten sortieren und filtern

Derzeit wird in unserer App eine Liste von Restaurants angezeigt, aber Nutzer können nicht nach ihren Bedürfnissen filtern. In diesem Abschnitt verwenden Sie die erweiterten Abfragefunktionen von Cloud Firestore, um das Filtern zu ermöglichen.

Hier ist ein Beispiel für eine einfache Abfrage zum Abrufen aller Dim Sum-Restaurants:

var filteredQuery = query.where('category', '==', 'Dim Sum')

Wie der Name schon sagt, werden mit der Methode where() nur Mitglieder der Sammlung heruntergeladen, deren Felder den von uns festgelegten Einschränkungen entsprechen. In diesem Fall werden nur Restaurants heruntergeladen, bei denen category gleich Dim Sum ist.

In unserer App kann der Nutzer mehrere Filter verketten, um bestimmte Anfragen zu erstellen, z. B. „Pizza in San Francisco“ oder „Meeresfrüchte in Los Angeles, sortiert nach Beliebtheit“.

Wir erstellen eine Methode, mit der eine Abfrage erstellt wird, die unsere Restaurants anhand mehrerer von unseren Nutzern ausgewählter Kriterien filtert.

1. Kehren Sie zu Ihrer Datei scripts/FriendlyEats.Data.js zurück.
2. Suchen Sie die Funktion FriendlyEats.prototype.getFilteredRestaurants.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

Mit dem Code oben werden mehrere where-Filter und eine einzelne orderBy-Klausel hinzugefügt, um eine zusammengesetzte Abfrage basierend auf der Nutzereingabe zu erstellen. Unsere Anfrage gibt jetzt nur noch Restaurants zurück, die den Anforderungen des Nutzers entsprechen.

Aktualisieren Sie die FriendlyEats-App in Ihrem Browser und prüfen Sie, ob Sie nach Preis, Stadt und Kategorie filtern können. Beim Testen werden in der JavaScript-Konsole Ihres Browsers Fehler angezeigt, die so aussehen:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

Diese Fehler treten auf, weil für die meisten zusammengesetzten Abfragen in Cloud Firestore Indexe erforderlich sind. Durch die Anforderung von Indexen für Abfragen bleibt Cloud Firestore auch bei großem Umfang schnell.

Wenn Sie den Link aus der Fehlermeldung öffnen, wird die Benutzeroberfläche zum Erstellen von Indexen in der Firebase Console automatisch mit den richtigen Parametern geöffnet. Im nächsten Abschnitt schreiben und stellen wir die für diese Anwendung erforderlichen Indexe bereit.

10. Indexe bereitstellen

Wenn wir nicht jeden Pfad in unserer App durchlaufen und jedem Link zur Indexerstellung folgen möchten, können wir mit der Firebase CLI ganz einfach viele Indexe gleichzeitig bereitstellen.

1. Im heruntergeladenen lokalen Verzeichnis Ihrer App finden Sie eine firestore.indexes.json-Datei.

In dieser Datei werden alle Indexe beschrieben, die für alle möglichen Filterkombinationen erforderlich sind.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}

2. Stellen Sie diese Indexe mit dem folgenden Befehl bereit:

firebase deploy --only firestore:indexes

Nach einigen Minuten sind Ihre Indexe aktiv und die Fehlermeldungen verschwinden.

11. Daten in eine Transaktion schreiben

In diesem Abschnitt fügen wir die Möglichkeit hinzu, dass Nutzer Rezensionen für Restaurants einreichen können. Bisher waren alle unsere Schreibvorgänge atomar und relativ einfach. Wenn bei einem der Vorgänge ein Fehler aufgetreten ist, würden wir den Nutzer wahrscheinlich einfach auffordern, es noch einmal zu versuchen, oder unsere App würde den Schreibvorgang automatisch wiederholen.

Unsere App wird viele Nutzer haben, die eine Bewertung für ein Restaurant hinzufügen möchten. Daher müssen wir mehrere Lese- und Schreibvorgänge koordinieren. Zuerst muss die Rezension eingereicht werden, dann müssen die Bewertung des Restaurants count und average rating aktualisiert werden. Wenn einer dieser Vorgänge fehlschlägt, der andere jedoch nicht, entsteht ein inkonsistenter Zustand, in dem die Daten in einem Teil unserer Datenbank nicht mit den Daten in einem anderen Teil übereinstimmen.

Glücklicherweise bietet Cloud Firestore Transaktionsfunktionen, mit denen wir mehrere Lese- und Schreibvorgänge in einem einzigen atomaren Vorgang ausführen können, sodass unsere Daten konsistent bleiben.

1. Kehren Sie zu Ihrer Datei scripts/FriendlyEats.Data.js zurück.
2. Suchen Sie die Funktion FriendlyEats.prototype.addRating.
3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

Im Block oben wird eine Transaktion ausgelöst, um die numerischen Werte von avgRating und numRatings im Restaurantdokument zu aktualisieren. Gleichzeitig fügen wir die neue rating der Untergruppe ratings hinzu.

12. Daten schützen

Zu Beginn dieses Codelabs haben wir die Sicherheitsregeln unserer App so festgelegt, dass der Zugriff auf unsere Anwendung eingeschränkt wird.

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Diese Regeln schränken den Zugriff ein, damit Clients nur sichere Änderungen vornehmen. Beispiel:

• Bei Aktualisierungen eines Restaurantdokuments können nur die Bewertungen geändert werden, nicht der Name oder andere unveränderliche Daten.
• Bewertungen können nur erstellt werden, wenn die Nutzer-ID mit dem angemeldeten Nutzer übereinstimmt. Dadurch wird Spoofing verhindert.

Alternativ zur Firebase Console können Sie die Firebase CLI verwenden, um Regeln in Ihrem Firebase-Projekt bereitzustellen. Die Datei firestore.rules in Ihrem Arbeitsverzeichnis enthält bereits die oben genannten Regeln. Wenn Sie diese Regeln über Ihr lokales Dateisystem (und nicht über die Firebase Console) bereitstellen möchten, führen Sie den folgenden Befehl aus:

firebase deploy --only firestore:rules

13. Fazit

In diesem Codelab haben Sie gelernt, wie Sie grundlegende und erweiterte Lese- und Schreibvorgänge mit Cloud Firestore ausführen und wie Sie den Datenzugriff mit Sicherheitsregeln schützen. Die vollständige Lösung finden Sie im Repository „quickstarts-js“.

Weitere Informationen zu Cloud Firestore finden Sie in den folgenden Ressourcen:

• Einführung in Cloud Firestore
• Datenstruktur auswählen
• Cloud Firestore-Webbeispiele

14. [Optional] Mit App Check erzwingen

Firebase App Check bietet Schutz, indem es dazu beiträgt, unerwünschten Traffic zu Ihrer App zu validieren und zu verhindern. In diesem Schritt sichern Sie den Zugriff auf Ihre Dienste, indem Sie App Check mit reCAPTCHA Enterprise hinzufügen.

Als Erstes müssen Sie App Check und reCaptcha aktivieren.

reCAPTCHA Enterprise aktivieren

1. Suchen Sie in der Cloud Console unter „Sicherheit“ nach reCAPTCHA Enterprise und wählen Sie die Option aus.
2. Aktivieren Sie den Dienst wie aufgefordert und klicken Sie auf Schlüssel erstellen.
3. Geben Sie einen Anzeigenamen ein und wählen Sie Website als Plattformtyp aus.
4. Fügen Sie die bereitgestellten URLs der Domainliste hinzu und achten Sie darauf, dass die Option „Checkbox-Challenge verwenden“ nicht ausgewählt ist.
5. Klicken Sie auf Schlüssel erstellen und speichern Sie den generierten Schlüssel an einem sicheren Ort. Sie benötigen sie später in diesem Schritt.

App Check aktivieren

1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
2. Klicken Sie auf App Check und dann auf die Schaltfläche Get Started (Erste Schritte) oder werden Sie direkt zur Konsole weitergeleitet.
3. Klicken Sie auf Registrieren und geben Sie den reCaptcha Enterprise-Schlüssel ein, wenn Sie dazu aufgefordert werden. Klicken Sie dann auf Speichern.
4. Wählen Sie in der API-Ansicht Speicher aus und klicken Sie auf Erzwingen. Wiederholen Sie den Vorgang für Cloud Firestore.

App Check sollte jetzt erzwungen werden. Aktualisieren Sie Ihre App und versuchen Sie, ein Restaurant zu erstellen oder anzusehen. Sie sollten die folgende Fehlermeldung erhalten:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Das bedeutet, dass nicht validierte Anfragen standardmäßig von App Check blockiert werden. Fügen wir Ihrer App nun die Validierung hinzu.

Rufen Sie die Datei FriendlyEats.View.js auf, aktualisieren Sie die Funktion initAppCheck und fügen Sie Ihren reCaptcha-Schlüssel hinzu, um App Check zu initialisieren.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

Die appCheck-Instanz wird mit einem ReCaptchaEnterpriseProvider mit Ihrem Schlüssel initialisiert und isTokenAutoRefreshEnabled ermöglicht die automatische Aktualisierung von Tokens in Ihrer App.

Um lokale Tests zu aktivieren, suchen Sie in der Datei FriendlyEats.js nach dem Abschnitt, in dem die App initialisiert wird, und fügen Sie der Funktion FriendlyEats.prototype.initAppCheck die folgende Zeile hinzu:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Dadurch wird ein Debug-Token in der Konsole Ihrer lokalen Web-App protokolliert, ähnlich wie hier:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Rufen Sie nun in der Firebase Console die Apps-Ansicht von App Check auf.

Klicken Sie auf das Dreipunkt-Menü und wählen Sie Debug-Tokens verwalten aus.

Klicken Sie dann auf Debug-Token hinzufügen und fügen Sie das Debug-Token aus Ihrer Konsole ein.

Glückwunsch! App Check sollte jetzt in Ihrer App funktionieren.