Cloud Firestore-Web-Codelab

1. Übersicht

Ziele

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

Aufgaben in diesem Lab

• Daten aus einer Webanwendung 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 oder höher wird empfohlen
• Die IDE/den Texteditor Ihrer Wahl, z. B. WebStorm, VS Code oder Sublime

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

1. Klicken Sie in der Firebase Console auf Projekt hinzufügen und geben Sie als Namen für das Firebase-Projekt FriendlyEats ein.

Notieren Sie sich die Projekt-ID Ihres Firebase-Projekts.

2. Klicken Sie auf Projekt erstellen.

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

• Firebase Authentication zur einfachen Identifizierung Ihrer Nutzer
• Cloud Firestore speichert strukturierte Daten in der Cloud und benachrichtigt Sie sofort, wenn sich Daten ändern.
• Firebase Hosting zum Hosten und Bereitstellen Ihrer statischen Assets

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

Anonyme Authentifizierung aktivieren

Auch wenn die Authentifizierung nicht im Mittelpunkt dieses Codelabs steht, ist es wichtig, in unserer App eine gewisse Form der Authentifizierung zu haben. Wir verwenden die anonyme Anmeldung, d. h., der Nutzer wird ohne Aufforderung angemeldet.

Sie müssen die anonyme Anmeldung aktivieren.

1. Suchen Sie in der Firebase Console im linken Navigationsbereich den Abschnitt Build.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode. Sie können auch auf diesen Link klicken, um direkt dorthin zu gelangen.
3. Aktivieren Sie den Anmeldeanbieter Anonym und klicken Sie dann auf Speichern.

So können Nutzer von der Anwendung automatisch angemeldet werden, wenn sie auf die Webanwendung zugreifen. Weitere Informationen finden Sie in der Anleitung zur anonymen Authentifizierung.

Cloud Firestore aktivieren

Die App verwendet Cloud Firestore, um Restaurantinformationen und -bewertungen zu speichern und zu empfangen.

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. Später in diesem Codelab erfahren Sie mehr über Regeln. Zuerst müssen wir jedoch einige grundlegende Regeln für unsere Daten festlegen. Fügen Sie in der Firebase Console auf dem Tab Regeln 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. Führen Sie ab sofort alle Befehle von diesem Verzeichnis aus:

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. Es besteht aus einer noch nicht funktionsfähigen App für Restaurantempfehlungen. Wir werden sie im Laufe dieses Codelabs funktionsfähig machen. Sie müssen also bald Code in diesem Verzeichnis bearbeiten.

4. Firebase-Befehlszeilentool installieren

Mit der Firebase-Befehlszeile (Firebase Command Line Interface, CLI) können Sie Ihre Webanwendung 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

Sie benötigen die Version 7.4.0 oder höher der Firebase CLI.

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 mit Ihrem Firebase-Projekt verknüpfen.

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

firebase use --add

6. Wählen Sie auf 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 Anleitung in der Befehlszeile.

5. Lokalen Server ausführen

Wir können jetzt mit der Arbeit an unserer App beginnen. Führen wir unsere App jetzt 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 verknüpft wurde.

Die App hat automatisch eine Verbindung zu Ihrem Firebase-Projekt hergestellt und Sie als anonymen Nutzer angemeldet.

6. Daten in Cloud Firestore schreiben

In diesem Abschnitt schreiben wir einige Daten in Cloud Firestore, damit wir die Benutzeroberfläche der App befüllen können. Das geht manuell über die Firebase Console, doch wir tun 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 Untersammlung namens ratings unter jedem Restaurant.

Firestore Restaurants hinzufügen

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

1. Öffnen Sie unter den heruntergeladenen Dateien scripts/FriendlyEats.Data.js.
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 Code oben 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 ab und restaurantsadd die Daten.

Fügen Sie jetzt 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 Restaurantsobjekten und ruft dann Ihre addRestaurant-Funktion auf. Die Daten werden jedoch 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 den Tab Cloud Firestore aufrufen, sollten Sie jetzt neue Dokumente in der Sammlung restaurants sehen.

Herzlichen Glückwunsch! Sie haben gerade Daten aus einer Webanwendung 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 informiert, die mit der Abfrage übereinstimmen, und erhält Aktualisierungen in Echtzeit.

Erstellen Sie zuerst die Abfrage, mit der die standardmäßige, ungefilterte Liste der Restaurants zurückgegeben 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 Code oben wird eine Abfrage erstellt, mit der bis zu 50 Restaurants aus der übergeordneten Sammlung namens restaurants abgerufen werden, die nach der durchschnittlichen Bewertung sortiert werden (derzeit alle null). 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 löst query.onSnapshot jedes Mal den Callback aus, wenn sich das Ergebnis der Abfrage ändert.

• Beim ersten Mal wird der Rückruf mit der gesamten Ergebnismenge der Abfrage ausgelöst, also mit 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, ist change.type gleich 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 zu sehen 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. Versuchen Sie, in der Firebase Console ein Restaurant manuell zu löschen oder seinen Namen zu ändern. Die Änderungen werden sofort auf Ihrer Website angezeigt.

8. Get()-Daten

Bisher haben wir gezeigt, wie Sie mit onSnapshot Updates in Echtzeit abrufen. Das ist jedoch nicht immer das, was wir wollen. 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:

Momentan können Sie keine Bewertungen hinzufügen, da wir diese Funktion erst später in das Codelab einbinden.

9. Daten sortieren und filtern

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

Hier ein Beispiel für eine einfache Abfrage, mit der alle Dim Sum Restaurants abgerufen werden:

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

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

In unserer App können Nutzer mehrere Filter kombinieren, um bestimmte Suchanfragen zu erstellen, z. B. „Pizza in San Francisco“ oder „Meeresfrüchte in Los Angeles nach Beliebtheit sortiert“.

Wir erstellen eine Methode, mit der eine Abfrage erstellt wird, die unsere Restaurants anhand mehrerer von 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);
};

Im Code oben werden mehrere where-Filter und eine einzelne orderBy-Klausel hinzugefügt, um eine zusammengesetzte Abfrage basierend auf der Nutzereingabe zu erstellen. Unsere Abfrage 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, Ort und Kategorie filtern können. Während des Tests werden in der JavaScript-Konsole Ihres Browsers Fehler angezeigt, die in etwa 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 in Cloud Firestore für die meisten zusammengesetzten Abfragen Indexe erforderlich sind. Durch die Indexierung von Abfragen bleibt Cloud Firestore auch bei großem Umfang schnell.

Wenn Sie den Link in der Fehlermeldung öffnen, wird automatisch die Benutzeroberfläche zum Erstellen von Indexen in der Firebase Console geöffnet. Die richtigen Parameter sind bereits ausgefüllt. Im nächsten Abschnitt erstellen und stellen wir die für diese Anwendung erforderlichen Indexe bereit.

10. Indexe bereitstellen

Wenn wir nicht jeden Pfad in unserer App untersuchen 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 online und die Fehlermeldungen verschwinden.

11. Daten in einer Transaktion schreiben

In diesem Abschnitt fügen wir die Möglichkeit hinzu, dass Nutzer Rezensionen zu Restaurants senden können. Bisher waren alle unsere Schreibvorgänge atomar und relativ einfach. Wenn bei einem der Schreibvorgänge ein Fehler auftritt, werden wir den Nutzer wahrscheinlich nur auffordern, es noch einmal zu versuchen, oder unsere App versucht automatisch noch einmal, die Daten zu schreiben.

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 selbst eingereicht werden, dann müssen die Bewertungen count und average rating des Restaurants aktualisiert werden. Wenn einer dieser Schritte fehlschlägt, der andere aber nicht, sind die Daten in einem Teil der Datenbank nicht mit denen in einem anderen Teil identisch.

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 obigen Block lösen wir eine Transaktion aus, um die numerischen Werte von avgRating und numRatings im Restaurantdokument zu aktualisieren. Gleichzeitig fügen wir der Untersammlung ratings die neue rating hinzu.

12. Daten schützen

Zu Beginn dieses Codelabs haben wir die Sicherheitsregeln unserer App festgelegt, um den Zugriff auf unsere App einzuschränken.

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 Kunden 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 User-ID mit dem angemeldeten Nutzer übereinstimmt. So wird Spoofing verhindert.

Alternativ zur Firebase Console können Sie auch die Firebase CLI verwenden, um Regeln in Ihrem Firebase-Projekt bereitzustellen. Die Datei firestore.rules in Ihrem Arbeitsverzeichnis enthält bereits die Regeln oben. Wenn Sie diese Regeln aus Ihrem lokalen Dateisystem statt ü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 mit Cloud Firestore grundlegende und erweiterte Lese- und Schreibvorgänge ausführen und 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.

Aktivieren Sie zuerst App-Überprüfung und reCAPTCHA.

reCAPTCHA Enterprise aktivieren

1. Wählen Sie in der Cloud Console unter „Sicherheit“ die Option reCAPTCHA Enterprise 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 „Kästchen-Bestätigung verwenden“ nicht ausgewählt ist.
5. Klicken Sie auf Schlüssel erstellen und bewahren Sie den generierten Schlüssel an einem sicheren Ort auf. Sie benötigen ihn 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-Überprüfung und dann auf die Schaltfläche Jetzt starten. Sie werden möglicherweise direkt zur Konsole weitergeleitet.
3. Klicken Sie auf Registrieren, geben Sie Ihren reCaptcha Enterprise-Schlüssel ein und klicken Sie dann auf Speichern.
4. Wählen Sie in der API-Ansicht Speicher und dann Erzwingen aus. Gehen Sie für Cloud Firestore genauso vor.

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

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

Das bedeutet, dass App Check nicht validierte Anfragen standardmäßig blockiert. Fügen wir Ihrer App jetzt eine 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 einer ReCaptchaEnterpriseProvider mit Ihrem Schlüssel initialisiert und isTokenAutoRefreshEnabled ermöglicht die automatische Aktualisierung von Tokens in Ihrer App.

Wenn Sie lokale Tests aktivieren möchten, suchen Sie in der Datei FriendlyEats.js den 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 Webanwendung protokolliert, z. B.:

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 jetzt in der Firebase Console die Ansicht „Apps“ 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 der Konsole ein.

Glückwunsch! App-Überprüfung sollte jetzt in Ihrer App funktionieren.