App Check Web Codelab

1. Einleitung

Letzte Aktualisierung: 23.02.2023

Wie können Sie unbefugten Zugriff auf Ihre Firebase-Ressourcen verhindern?

Sie können Firebase App Check verwenden, um zu verhindern, dass nicht autorisierte Clients auf Ihre Back-End-Ressourcen zugreifen, indem Sie verlangen, dass eingehende Anfragen mit einer Bescheinigung versehen werden, dass die Anfrage von Ihrer Original-App stammt, und indem Sie Datenverkehr blockieren, der nicht über eine ordnungsgemäße Bescheinigung verfügt. Firebase App Check verlässt sich auf plattformspezifische Attestierungsanbieter , um die Authentizität des Clients zu überprüfen: Für Web-Apps unterstützt App Check reCAPTCHA v3 und reCAPTCHA Enterprise als Attestierungsanbieter.

App Check kann zum Schutz von Anfragen an Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication mit Identity Platform und an von Ihnen selbst gehostete Backends verwendet werden.

Was Sie bauen werden

In diesem Codelab sichern Sie eine Chat-Anwendung, indem Sie zunächst App Check hinzufügen und dann erzwingen.

Die von Ihnen erstellte, benutzerfreundliche Chat-App.

Was Sie lernen werden

  • So überwachen Sie Ihr Backend auf unbefugten Zugriff
  • So fügen Sie Durchsetzung zu Firestore und Cloud Storage hinzu
  • So führen Sie Ihre Anwendung mit einem Debug-Token für die lokale Entwicklung aus

Was du brauchen wirst

  • Die IDE/der Texteditor Ihrer Wahl
  • Der Paketmanager npm , der normalerweise mit Node.js geliefert wird
  • Die Firebase-CLI wurde für die Verwendung mit Ihrem Konto installiert und konfiguriert
  • Ein Terminal/eine Konsole
  • Ein Browser Ihrer Wahl, z. B. Chrome
  • Der Beispielcode des Codelabs (Informationen zum Erhalten des Codes finden Sie im nächsten Schritt des Codelabs.)

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository des Codelab über die Befehlszeile:

git clone https://github.com/firebase/codelab-friendlychat-web

Wenn Sie Git nicht installiert haben, können Sie alternativ das Repository als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE das Verzeichnis 📁 appcheck-start aus dem geklonten Repository. Dieses 📁 appcheck-start Verzeichnis enthält den Startcode für das Codelab, das eine voll funktionsfähige Chat-Web-App sein wird. Das Verzeichnis 📁 appcheck enthält den fertigen Code für das Codelab.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. Melden Sie sich bei Firebase an.
  2. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie dann Ihr Firebase-Projekt FriendlyChat. Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.
  3. Deaktivieren Sie „Google Analytics für dieses Projekt aktivieren“.
  4. Klicken Sie auf Projekt erstellen.

Die Anwendung, die wir erstellen werden, verwendet Firebase-Produkte, die für Web-Apps verfügbar sind:

  • Firebase-Authentifizierung, um Ihren Benutzern die einfache Anmeldung bei Ihrer App zu ermöglichen.
  • Cloud Firestore, um strukturierte Daten in der Cloud zu speichern und sofortige Benachrichtigungen zu erhalten, wenn sich Daten ändern.
  • Cloud Storage für Firebase zum Speichern von Dateien in der Cloud.
  • Firebase Hosting zum Hosten und Bereitstellen Ihrer Assets.
  • Firebase Cloud Messaging zum Senden von Push-Benachrichtigungen und zum Anzeigen von Browser-Popup-Benachrichtigungen.
  • Firebase-Leistungsüberwachung zum Sammeln von Benutzerleistungsdaten für Ihre App.

Einige dieser Produkte erfordern eine spezielle Konfiguration oder müssen über die Firebase-Konsole aktiviert werden.

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Spitznamen „Friendly Chat“ und aktivieren Sie dann das Kontrollkästchen neben „Auch Firebase Hosting für diese App einrichten“ . Klicken Sie auf App registrieren .
  3. Im nächsten Schritt sehen Sie einen Befehl zum Installieren von Firebase mithilfe von npm und einem Konfigurationsobjekt. Sie kopieren dieses Objekt später im Codelab, also drücken Sie zunächst auf „Weiter“ .

Das Fenster „Firebase zu Ihrer Web-App hinzufügen“ wird angezeigt

  1. Dann sehen Sie eine Option zum Installieren der Firebase-CLI. Wenn Sie es noch nicht installiert haben, tun Sie dies jetzt mit dem Befehl npm install -g firebase-tools . Klicken Sie dann auf Weiter .
  2. Dann sehen Sie eine Option zum Anmelden bei Firebase und zum Bereitstellen auf dem Firebase-Hosting. Melden Sie sich mit dem Befehl firebase login bei Firebase an und klicken Sie dann auf „Weiter zur Konsole“ . Die Bereitstellung auf Firebase-Hosting erfolgt in einem späteren Schritt.

Aktivieren Sie die Google-Anmeldung für die Firebase-Authentifizierung

Damit sich Benutzer mit ihren Google-Konten bei der Web-App anmelden können, verwenden wir die Google-Anmeldemethode.

Sie müssen die Google-Anmeldung aktivieren:

  1. Suchen Sie in der Firebase-Konsole im linken Bereich den Abschnitt „Build“ .
  2. Klicken Sie auf Authentifizierung , ggf. auf „Erste Schritte“ und dann auf die Registerkarte „Anmeldemethode “ (oder klicken Sie hier , um direkt dorthin zu gelangen).
  3. Aktivieren Sie den Google-Anmeldeanbieter
  4. Legen Sie den öffentlich zugänglichen Namen Ihrer App auf Friendly Chat fest und wählen Sie im Dropdown-Menü eine Projekt-Support-E-Mail aus.
  5. Klicken Sie auf Speichern

f96888973c3d00cc.png

Aktivieren Sie Cloud Firestore

Die Web-App verwendet Cloud Firestore, um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

Sie müssen Cloud Firestore aktivieren:

  1. Klicken Sie im Abschnitt „Erstellen“ der Firebase-Konsole auf „Firestore-Datenbank“ .
  2. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .

Cloud Firestore-Schaltfläche „Datenbank erstellen“.

  1. Wählen Sie die Option „Im Testmodus starten“ und klicken Sie dann auf „Weiter“ , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Der Testmodus stellt sicher, dass Sie während der Entwicklung frei in die Datenbank schreiben können. Im Startercode sind bereits Sicherheitsregeln für Sie geschrieben. Sie werden diese für dieses Codelab verwenden.

Das Fenster mit den Datenbanksicherheitsregeln. Die Option

  1. Legen Sie den Speicherort fest, an dem Ihre Cloud Firestore-Daten gespeichert werden. Sie können dies als Standard belassen oder eine Region in Ihrer Nähe auswählen. Klicken Sie auf „Aktivieren“, um Firestore bereitzustellen.

a3d24f9f4ace1917.png

Aktivieren Sie Cloud-Speicher

Die Web-App nutzt Cloud Storage für Firebase zum Speichern, Hochladen und Teilen von Bildern.

Sie müssen Cloud Storage aktivieren:

  1. Klicken Sie im Build- Bereich der Firebase-Konsole auf Storage .
  2. Wenn es keine Schaltfläche „Erste Schritte“ gibt, bedeutet dies, dass Cloud Storage bereits aktiviert ist und Sie die folgenden Schritte nicht ausführen müssen.
  3. Klicken Sie auf „Erste Schritte“ .
  4. Wählen Sie die Option „Im Testmodus starten“ und klicken Sie dann auf „Weiter“ , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Mit den Standardsicherheitsregeln kann jeder authentifizierte Benutzer alles in Cloud Storage schreiben. Wir werden später in diesem Codelab Sicherheitsregeln einsetzen, die bereits für uns geschrieben wurden.

1c875cef812a4384.png

  1. Der Cloud-Speicherort ist mit derselben Region vorausgewählt, die Sie für Ihre Cloud Firestore-Datenbank ausgewählt haben. Klicken Sie auf Fertig, um die Einrichtung abzuschließen.

d038569661620910.png

4. Konfigurieren Sie Firebase

Rufen Sie im appcheck-start Verzeichnis Folgendes auf:

firebase use --add

Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias. Für dieses Projekt können Sie einfach den Alias ​​default angeben. Als Nächstes müssen Sie Ihr lokales Projekt für die Zusammenarbeit mit Firebase konfigurieren.

  1. Gehen Sie in der Firebase-Konsole zu Ihren Projekteinstellungen
  2. Wählen Sie in der Karte „Ihre Apps“ den Spitznamen der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie im Firebase SDK-Snippet-Bereich „Config“ aus.
  4. Kopieren Sie das Konfigurationsobjekt-Snippet und fügen Sie es dann zu appcheck-start/hosting/src/firebase-config.js hinzu. Der Rest des Codelabs geht davon aus, dass die Variable den Namen config trägt.

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Rufen Sie dann aus demselben appcheck-start Folgendes auf:

firebase experiments:enable webframeworks

Dies ermöglicht die Unterstützung des Webframeworks , mit dem dieses Projekt erstellt wurde.

Wir sollten jetzt bereit sein, Ihr Projekt auszuführen und zu testen, ob das Standardprojekt funktioniert!

5. Probieren Sie die App ohne App Check aus

Nachdem Sie nun Ihre App konfiguriert und das SDK eingerichtet haben, versuchen Sie, die App so zu verwenden, wie sie ursprünglich entworfen wurde. Beginnen Sie zunächst mit der Installation aller Abhängigkeiten. Navigieren Sie von Ihrem Terminal aus zum Verzeichnis appcheck-start/hosting . Führen Sie in diesem Verzeichnis npm install aus. Dadurch werden alle Abhängigkeiten abgerufen, damit Ihr Projekt funktioniert. Um die App in ihrem aktuellen Zustand zu starten, können Sie firebase serve ausführen. Die App fordert Sie auf, sich mit einem Google-Konto anzumelden. Tun Sie dies und versuchen Sie dann, ein paar Chat-Nachrichten und ein paar Fotos im Chat zu posten.

Nachdem Sie es nun vor Ort getestet haben, ist es an der Zeit, es in der Produktion zu sehen! Führen Sie firebase deploy aus, um die Webanwendung im Web bereitzustellen. Dieser Teil ist ein entscheidender Schritt bei der Demonstration der Funktionsweise von App Check in der realen Welt, da dafür eine Domäne für den reCAPTCHA Enterprise-Bescheinigungsanbieter konfiguriert werden muss.

Hoffentlich nutzen Sie die Standardfunktion, die die App bietet. Chat-Nachrichten posten und alles andere, was nur über eine solche App möglich sein sollte. Der Nachteil des aktuellen Status besteht darin, dass jeder mit Ihrer App-Konfiguration aus dem vorherigen Schritt auf Ihre Backend-Ressourcen zugreifen kann. Sie müssen weiterhin die Sicherheitsregeln Ihrer Firestore- und Cloud-Speichersysteme einhalten, können aber ansonsten weiterhin die dort gespeicherten Daten abfragen, speichern und darauf zugreifen.

In den nächsten Schritten werden Sie Folgendes tun:

  • Registrieren Sie sich für den App Check
  • Durchsetzung validieren
  • Beginnen Sie mit der Durchsetzung von Regeln

6. Aktivieren Sie App Check und Durchsetzung

Beginnen wir damit, einen reCAPTCHA-Enterprise-Schlüssel für Ihr Projekt zu besorgen und diesen zu App Check hinzuzufügen. Sie beginnen mit dem Besuch des reCAPTCHA Enterprise- Bereichs der Google Cloud Console. Wählen Sie Ihr Projekt aus und Sie werden dann aufgefordert, die reCAPTCHA Enterprise API zu aktivieren. Aktivieren Sie die API und warten Sie einige Minuten, bis der Vorgang abgeschlossen ist. Klicken Sie dann neben Unternehmensschlüssel auf Schlüssel erstellen . Geben Sie dann in diesem Abschnitt einen Anzeigenamen an und wählen Sie einen Website- Typschlüssel aus. Sie müssen die Domänen angeben, auf denen Ihre App gehostet wird. Da Sie planen, dies auf Firebase Hosting zu hosten, verwenden Sie den Standard-Hostingnamen, der im Allgemeinen ${YOUR_PROJECT_ID}.web.app lautet. Sie finden Ihre Hosting-Domain im Abschnitt „Hosting“ der Firebase Console. Nachdem Sie diese Informationen eingegeben haben, klicken Sie auf „Fertig“ und dann auf „Schlüssel erstellen“ .

reCAPTCHA-Bildschirm zum Erstellen eines Schlüssels

Sobald Sie fertig sind, sehen Sie oben auf der Seite „Schlüsseldetails“ eine ID.

Das reCAPTCHA-Unternehmensregistrierungsfenster

Fahren Sie fort und kopieren Sie diese ID in Ihre Zwischenablage. Dies ist der Schlüssel, den Sie für App Check verwenden. Besuchen Sie als Nächstes den App Check- Bereich der Firebase-Konsole und klicken Sie auf „Erste Schritte“ . Klicken Sie dann auf Registrieren und dann auf reCAPTCHA Enterprise und geben Sie die kopierte ID in das Textfeld für den reCAPTCHA Enterprise Site Key ein. Behalten Sie die restlichen Einstellungen als Standard bei. Ihre App-Check-Seite sollte etwa so aussehen:

Das App Check-Apps-Fenster, in dem Sie Ihr reCAPTCHA-Unternehmenstoken registrieren

Unbestätigte und nicht durchgesetzte Anfragen

Nachdem Sie nun einen registrierten Schlüssel in der Firebase-Konsole haben, kehren Sie zur Ausführung Ihrer Site im Browser zurück, indem Sie firebase serve ausführen. Hier läuft die Web-App lokal und Sie können wieder Anfragen an das Firebase-Backend stellen. Da Anfragen gegen das Firebase-Backend gerichtet sind, werden diese Anfragen von App Check überwacht, aber nicht durchgesetzt. Wenn Sie den Status der eingehenden Anfragen sehen möchten, können Sie den Abschnitt „Cloud Firestore“ auf der Registerkarte „APIs“ der Seite „App Check“ in der Firebase-Konsole besuchen. Da Sie den Client noch nicht für die Verwendung von App Check konfiguriert haben, sollten Sie etwas Ähnliches sehen:

Ein App-Check-Dashboard, das 100 % nicht bestätigte Kundenanfragen für Ihre App anzeigt.

Im Backend gehen zu 100 % unbestätigte Anfragen ein. Dieser Bildschirm ist nützlich, da er zeigt, dass fast alle Clientanfragen von Clients kommen, die App Check nicht integriert haben.

Dieses Dashboard kann einige Dinge anzeigen. Das erste, was angezeigt werden kann, ist, ob auf allen Ihren Client-Apps die neueste Version Ihres Clients ausgeführt wird. Wenn dies der Fall ist, können Sie App Check sicher durchsetzen, ohne sich Gedanken darüber machen zu müssen, den Zugriff für einen echten Client Ihrer Anwendung zu sperren. Darüber hinaus können Sie daraus erfahren, wie viele Zugriffsversuche auf Ihr Backend erfolgten, ohne dass diese über Ihre App erfolgten. Dabei kann es sich um Benutzer handeln, die Ihr Backend ohne Ihr Wissen direkt abfragen. Da Sie sehen können, dass Anfragen nicht verifiziert sind, ist es an der Zeit, zu sehen, was mit den Benutzern passieren würde, die möglicherweise eine nicht verifizierte Anfrage an Ihr Backend haben, bevor Sie mit der Verifizierung ihrer Anfragen fortfahren.

Unbestätigte und erzwungene Anfragen

Fahren Sie fort und drücken Sie im vorherigen Bildschirm auf die Schaltfläche „Erzwingen “ und dann erneut auf „Erzwingen“ , wenn Sie dazu aufgefordert werden.

Ein Dashboard für nicht überprüfte Metriken mit einer hervorgehobenen Schaltfläche „Erzwingen“.

Dadurch wird die App-Prüfung erzwungen. Es blockiert nun Anfragen an Ihre Backend-Dienste, die nicht durch den von Ihnen gewählten Bescheinigungsanbieter (in diesem Fall reCAPTCHA Enterprise) verifiziert wurden. Kehren Sie zu Ihrer laufenden Web-App zurück, die unter http://localhost:5000 ausgeführt werden sollte. Wenn Sie die Seite aktualisieren und versuchen, Daten aus der Datenbank abzurufen, passiert nichts. Wenn Sie die Chrome-Konsole öffnen, um die Fehler zu lesen, sollten Sie etwas Ähnliches wie das Folgende sehen:

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

Hierbei handelt es sich um App Check-Blockierungsanfragen, die in ihren Anfragen an Ihre Firebase-Ressourcen kein gültiges Attestierungstoken übergeben haben. Sie können die App Check-Erzwingung vorerst deaktivieren. Im nächsten Abschnitt erfahren Sie, wie Sie reCAPTCHA Enterprise App Check zum Friendly Chat-Beispiel hinzufügen.

7. Fügen Sie den reCAPTCHA Enterprise-Schlüssel zur Site hinzu

Wir werden den Unternehmensschlüssel in Ihre Anwendung einfügen. Öffnen Sie zunächst hosting/src/firebase-config.js und fügen Sie Ihren reCAPTCHA-Enterprise-Schlüssel zum folgenden Code-Snippet hinzu:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

Sobald dies abgeschlossen ist, öffnen Sie hosting/src/index.js und fügen in Zeile 51 einen Import aus „firebase-config.js“ hinzu, um Ihren reCAPTCHA-Schlüssel abzurufen und auch die App Check-Bibliothek zu importieren, damit Sie mit reCAPTCHA arbeiten können Unternehmensanbieter.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

Anschließend erstellen Sie in der nächsten Zeile eine Funktion zum Einrichten von App Check. Die Funktion prüft zunächst, ob Sie sich in einer Entwicklungsumgebung befinden und druckt in diesem Fall ein Debug-Token aus, das Sie für die lokale Entwicklung verwenden können.

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

Jetzt ist es an der Zeit, App Check für die Zusammenarbeit mit Ihrem ausgewählten Anbieter zu initialisieren – in diesem Fall reCAPTCHA Enterprise. Sie möchten dann auch Ihr App Check-Token automatisch im Hintergrund aktualisieren, um Verzögerungen durch die Interaktion des Benutzers mit Ihrem Dienst zu verhindern, falls sein App Check-Token veraltet ist.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

Sobald Sie sichergestellt haben, dass die App initialisiert ist, müssen Sie die soeben erstellte Funktion setupAppCheck aufrufen. Fügen Sie am Ende der Datei hosting/src/index.js den Aufruf zu Ihrer kürzlich hinzugefügten Methode hinzu.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Testen Sie zunächst vor Ort

Testen Sie Ihre Anwendung zunächst lokal. Wenn Sie die Anwendung noch nicht lokal bereitstellen, führen Sie firebase serve aus. Sie sollten feststellen, dass die Anwendung immer noch nicht lokal geladen werden kann. Dies liegt daran, dass Sie Ihre Firebase-Domäne nur beim reCAPTCHA-Nachweisanbieter und nicht bei der localhost-Domäne registriert haben. Sie sollten localhost niemals als genehmigte Domäne registrieren, da Benutzer dadurch über eine Anwendung, die lokal auf ihrem Computer ausgeführt wird, auf Ihre eingeschränkten Backends zugreifen können. Da Sie stattdessen self.FIREBASE_APPCHECK_DEBUG_TOKEN = true setzen, sollten Sie in Ihrer JavaScript-Konsole nach einer Zeile suchen, die etwa so aussieht:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Sie sollten das bereitgestellte Debug-Token (im Beispielfall: 55183c20-de61-4438-85e6-8065789265be ) nehmen und es in die App Check-Konfiguration im Überlaufmenü Ihrer App einfügen.

Das App Check-Dashboard zeigt den Speicherort der Debug-Tokens verwalten an

Geben Sie dem Token einen eindeutigen Namen, den Sie sich merken können, und klicken Sie auf Speichern . Mit dieser Option können Sie ein vom Client generiertes Token mit Ihrer App verwenden. Dies ist eine sicherere Alternative als die Generierung eines Debug-Tokens und dessen Einbettung in Ihre Anwendung. Das Einbetten eines Tokens in die App könnte dazu führen, dass es versehentlich an Endbenutzer verteilt wird und diese Endbenutzer es unter Umgehung Ihrer Kontrollen ausnutzen könnten. Wenn Sie ein Debug-Token beispielsweise in einer CI-Umgebung verteilen möchten, lesen Sie diese Dokumentation , um mehr über die Verteilung zu erfahren.

Ein Beispiel für das Ausfüllen des Debug-Tokens mit einem Alias

Sobald Sie das Debug-Token in der Firebase-Konsole registriert haben, können Sie die App Check-Erzwingung erneut aktivieren und testen, ob der App-Inhalt lokal geladen wird, indem Sie firebase serve vom Terminal aus aufrufen. Sie sollten sehen, dass die zuvor eingegebenen Daten an die lokale Version der Webanwendung übermittelt werden. Die Meldung mit dem Debug-Token sollte weiterhin auf der Konsole angezeigt werden.

Probieren Sie es in der Produktion aus

Wenn Sie davon überzeugt sind, dass App Check lokal funktioniert, stellen Sie die Webanwendung in der Produktion bereit. Rufen Sie von Ihrem Terminal aus erneut firebase deploy auf und laden Sie die Seite neu. Dadurch wird Ihre Webanwendung für die Ausführung auf Firebase Hosting gepackt. Sobald Ihre Anwendung auf Firebase Hosting gehostet ist, versuchen Sie, Ihre Anwendung unter ${YOUR_PROJECT_ID}.web.app zu besuchen. Sie können die JavaScript-Konsole öffnen und sollten das dort gedruckte Debug-Token nicht mehr sehen und Chats sehen, die in Ihrem Projekt geladen werden. Nachdem Sie einige Augenblicke mit der Anwendung interagiert haben, können Sie außerdem den Abschnitt „App-Überprüfung“ der Firebase-Konsole aufrufen und überprüfen, ob alle Anfragen an Ihre Anwendung überprüft wurden.

8. Herzlichen Glückwunsch!

Herzlichen Glückwunsch, Sie haben Firebase App Check erfolgreich zu einer Web-App hinzugefügt!

Sie richten die Firebase-Konsole für die Verarbeitung eines reCAPTCHA-Enterprise-Tokens für Produktionsumgebungen ein und richten sogar Debug-Tokens für die lokale Entwicklung ein. Dadurch wird sichergestellt, dass Ihre Apps weiterhin auf Firebase-Ressourcen von genehmigten Clients zugreifen können und betrügerische Aktivitäten innerhalb Ihrer Anwendung verhindert werden.

Was kommt als nächstes?

Sehen Sie sich die folgende Dokumentation an, um Firebase App Check hinzuzufügen:

Referenzdokumente