App Check Web Codelab

1. Einführung

Zuletzt aktualisiert: 23.02.2023

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

Mit Firebase App Check können Sie verhindern, dass nicht autorisierte Clients auf Ihre Backend-Ressourcen zugreifen. Dazu müssen eingehende Anfragen mit einer Bestätigung versehen sein, dass die Anfrage von Ihrer echten App stammt. Traffic ohne entsprechende Bestätigung wird blockiert. Firebase App Check verwendet 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.

Mit App Check können Anfragen an Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication mit Identity Platform und an selbst gehostete Backends geschützt werden.

Aufgaben

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

Die von Ihnen erstellte Friendly Chat-App, mit der Sie beginnen.

Lerninhalte

  • Backend auf unbefugten Zugriff überwachen
  • Erzwingung zu Firestore und Cloud Storage hinzufügen
  • Anwendung mit einem Debug-Token für die lokale Entwicklung ausführen

Voraussetzungen

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

2. Beispielcode abrufen

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

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

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

Starter-App importieren

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

3. 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 einen Projektnamen ein (z. B. FriendlyChat).
  3. Klicken Sie auf Weiter.
  4. Wenn Sie dazu aufgefordert werden, lesen und akzeptieren Sie die Nutzungsbedingungen von Firebase 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 Google Analytics nicht. 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-Tarif upgraden

Wenn Sie Cloud Storage for Firebase verwenden möchten, muss Ihr Firebase-Projekt das Blaze-Preismodell (Pay as you go) nutzen. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

So führen Sie ein Upgrade Ihres Projekts auf den Blaze-Tarif durch:

  1. Wählen Sie in der Firebase Console die Option Upgrade aus.
  2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
    Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise in der Firebase Console zum Upgrade-Vorgang zurückkehren, um das Upgrade abzuschließen.

Firebase-Web-App zum Projekt hinzufügen

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png, um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Alias „Friendly Chat“ und klicken Sie das Kästchen neben Firebase Hosting für diese App einrichten an. Klicken Sie auf App registrieren.
  3. Im nächsten Schritt sehen Sie einen Befehl zum Installieren von Firebase mit npm und ein Konfigurationsobjekt. Sie kopieren dieses Objekt später im CodeLab. Klicken Sie also vorerst auf Weiter.

Fenster „Firebase zu meiner Web-App hinzufügen“

  1. Anschließend wird eine Option zum Installieren der Firebase CLI angezeigt. Wenn Sie es noch nicht installiert haben, tun Sie dies jetzt mit dem Befehl npm install -g firebase-tools. Klicken Sie anschließend auf Weiter.
  2. Anschließend sehen Sie eine Option, um sich in Firebase anzumelden und die Anwendung in Firebase Hosting bereitzustellen. Melden Sie sich mit dem Befehl firebase login in Firebase an und klicken Sie dann auf Weiter zur Console. In einem späteren Schritt stellen Sie die Anwendung in Firebase Hosting bereit.

Firebase-Produkte einrichten

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

  • Firebase Authentication, damit sich Nutzer ganz einfach in Ihrer App anmelden können.
  • Cloud Firestore, um strukturierte Daten in der Cloud zu speichern und sofort benachrichtigt zu werden, wenn sich Daten ändern.
  • Cloud Storage for Firebase zum Speichern von Dateien in der Cloud.
  • Firebase Hosting zum Hosten und Bereitstellen Ihrer Assets.
  • Firebase Cloud Messaging, um Push-Benachrichtigungen zu senden und Browser-Pop-up-Benachrichtigungen anzuzeigen.
  • Firebase Performance Monitoring, um Leistungsdaten von Nutzern für Ihre App zu erfassen.

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

Google Log-in für Firebase Authentication aktivieren

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

Sie müssen „Über Google anmelden“ aktivieren:

  1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
  2. Klicken Sie auf Authentifizierung, dann gegebenenfalls auf Jetzt starten und anschließend auf den Tab Anmeldemethode. Sie können auch hier klicken, um direkt dorthin zu gelangen.
  3. Google-Anmeldeanbieter aktivieren
  4. Legen Sie den öffentlichen Namen Ihrer App auf „Friendly Chat“ fest und wählen Sie im Drop-down-Menü eine E‑Mail-Adresse für den Projektsupport aus.
  5. Klicken Sie auf Speichern.

f96888973c3d00cc.png

Cloud Firestore einrichten

Die Webanwendung verwendet Cloud Firestore, um Chatnachrichten zu speichern und neue Chatnachrichten zu empfangen.

So richten Sie Cloud Firestore in Ihrem Firebase-Projekt ein:

  1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
  2. Klicken Sie auf Datenbank erstellen.
  3. Lassen Sie die Datenbank-ID auf (default) festgelegt.
  4. Wählen Sie einen Standort für Ihre Datenbank aus und klicken Sie auf Weiter.
    Für eine echte Anwendung sollten Sie einen Standort in der Nähe Ihrer Nutzer auswählen.
  5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
    Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen Sie eine App nicht, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
  6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

Die Webanwendung verwendet Cloud Storage for Firebase, um Bilder zu speichern, hochzuladen und zu teilen.

So richten Sie Cloud Storage for Firebase in Ihrem Firebase-Projekt ein:

  1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Storage aus.
  2. Klicken Sie auf Jetzt starten.
  3. Wählen Sie einen Standort für Ihren Standard-Storage-Bucket aus.
    Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 können die Always Free-Stufe für Google Cloud Storage nutzen. Für Buckets an allen anderen Standorten gelten die Preise und die Nutzung von Google Cloud Storage.
  4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
    Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Verteilen oder veröffentlichen Sie eine App nicht, ohne Sicherheitsregeln für Ihren Storage-Bucket hinzuzufügen.
  5. Klicken Sie auf Erstellen.

4. Firebase konfigurieren

Rufen Sie im Verzeichnis appcheck-start Folgendes auf:

firebase use --add

Wählen Sie bei entsprechender Aufforderung Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt 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 Verwendung mit Firebase konfigurieren.

  1. Rufen Sie die Projekteinstellungen in der Firebase Console auf.
  2. Wählen Sie auf der Karte „Meine Apps“ den Alias der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie im Bereich „Firebase SDK-Snippet“ die Option Konfiguration aus.
  4. Kopieren Sie das Snippet des Konfigurationsobjekts und fügen Sie es in appcheck-start/hosting/src/firebase-config.js ein. Im weiteren Verlauf des Codelabs wird davon ausgegangen, dass die Variable config heißt.

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.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Rufen Sie im selben appcheck-start-Verzeichnis Folgendes auf:

firebase experiments:enable webframeworks

Dadurch wird die Unterstützung für Web-Frameworks aktiviert, mit der dieses Projekt erstellt wurde.

Jetzt können Sie Ihr Projekt ausführen und testen, ob das Standardprojekt funktioniert.

5. App ohne App Check testen

Nachdem Sie Ihre App konfiguriert und das SDK eingerichtet haben, versuchen Sie, die App so zu verwenden, wie sie ursprünglich konzipiert wurde. Installieren Sie zuerst alle Abhängigkeiten. Öffnen Sie in Ihrem Terminal das Verzeichnis appcheck-start/hosting. Führen Sie in diesem Verzeichnis npm install aus. Dadurch werden alle Abhängigkeiten abgerufen, die für Ihr Projekt erforderlich sind. Wenn Sie die Anwendung in ihrem aktuellen Zustand starten möchten, können Sie firebase serve ausführen. Die App fordert Sie auf, sich mit einem Google-Konto anzumelden. Melden Sie sich an und posten Sie dann ein paar Chatnachrichten und Fotos im Chat.

Nachdem Sie die Anwendung lokal getestet haben, ist es an der Zeit, sie in der Produktion zu sehen. Führen Sie firebase deploy aus, um die Webanwendung im Web bereitzustellen. Dieser Teil ist ein wichtiger Schritt, um zu zeigen, wie App Check in der Praxis funktioniert, da für den reCAPTCHA Enterprise-Attestierungsanbieter eine Domain konfiguriert werden muss.

Hoffentlich können Sie die Standardfunktionen der App nutzen. Chatnachrichten posten und alles andere, was nur über eine solche App möglich sein sollte. Der Nachteil des aktuellen Zustands ist, dass jeder, der Ihre App-Konfiguration aus dem vorherigen Schritt hat, auf Ihre Backend-Ressourcen zugreifen kann. Sie müssen sich weiterhin an die Sicherheitsregeln halten, die von Ihren Firestore- und Cloud Storage-Systemen vorgegeben werden. Ansonsten können sie aber weiterhin Daten abfragen, speichern und darauf zugreifen.

In den nächsten Schritten führen Sie die folgenden Aufgaben aus:

  • Für App Check registrieren
  • Maßnahme validieren
  • Regeln erzwingen

6. App Check und Erzwingung aktivieren

Rufen Sie zuerst einen reCAPTCHA Enterprise-Schlüssel für Ihr Projekt ab und fügen Sie ihn zu App Check hinzu. Rufen Sie zuerst den Bereich reCAPTCHA Enterprise in der Google Cloud Console auf. Wählen Sie Ihr Projekt aus. 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 Enterprise-Schlüssel auf Schlüssel erstellen. Geben Sie dann in diesem Bereich einen Anzeigenamen an und wählen Sie einen Schlüssel vom Typ Website aus. Sie müssen die Domains angeben, auf denen Ihre App gehostet wird. Da Sie die Anwendung auf Firebase Hosting hosten möchten, verwenden Sie den Standard-Hosting-Namen, der in der Regel ${YOUR_PROJECT_ID}.web.app lautet. Sie finden Ihre Hosting-Domain in der Firebase Console im Bereich „Hosting“. Nachdem Sie diese Informationen eingegeben haben, klicken Sie auf Fertig und Schlüssel erstellen.

Bildschirm „reCAPTCHA-Schlüssel erstellen“

Anschließend wird oben auf der Seite Schlüsseldetails eine ID angezeigt.

Das Fenster für die reCAPTCHA Enterprise-Registrierung

Kopieren Sie diese ID in die Zwischenablage. Dies ist der Schlüssel, den Sie für App Check verwenden. Rufen Sie als Nächstes in der Firebase Console den Bereich App Check auf und klicken Sie auf Jetzt starten. Klicken Sie dann auf Registrieren und anschließend auf reCAPTCHA Enterprise. Fügen Sie die kopierte ID in das Textfeld für den reCAPTCHA Enterprise-Websiteschlüssel ein. Behalten Sie in allen anderen Feldern die Standardwerte bei. Ihre App Check-Seite sollte in etwa so aussehen:

Das Fenster „App Check-Apps“, in dem Sie Ihr reCAPTCHA Enterprise-Token registrieren

Nicht bestätigte und nicht erzwungene Anfragen

Nachdem Sie einen Schlüssel in der Firebase Console registriert haben, können Sie Ihre Website im Browser wieder mit firebase serve ausführen. Die Web-App wird jetzt lokal ausgeführt und Sie können wieder Anfragen an das Firebase-Backend senden. Da die Anfragen an das Firebase-Backend gerichtet sind, werden sie von App Check überwacht, aber nicht erzwungen. Wenn Sie den Status der eingehenden Anfragen sehen möchten, rufen Sie in der Firebase Console auf der Seite „App Check“ auf dem Tab APIs den Bereich Cloud Firestore auf. Da Sie den Client noch nicht für die Verwendung von App Check konfiguriert haben, sollte die Ausgabe in etwa so aussehen:

Ein App Check-Dashboard, auf dem 100 % nicht verifizierte Clientanfragen für Ihre App angezeigt werden.

Das Backend erhält zu 100 % nicht verifizierte Anfragen. Dieser Bildschirm ist nützlich, da er zeigt, dass fast alle Clientanfragen von Clients stammen, in die App Check nicht integriert ist.

Dieses Dashboard kann auf verschiedene Dinge hinweisen. Erstens kann sie angeben, ob auf allen Client-Apps die aktuelle Version des Clients ausgeführt wird. Wenn dies der Fall ist, können Sie App Check bedenkenlos erzwingen, ohne sich Sorgen machen zu müssen, dass der Zugriff für einen echten Client Ihrer Anwendung deaktiviert wird. Außerdem können Sie so sehen, wie viele Zugriffsversuche auf Ihr Backend nicht von Ihrer App stammen. Das können Nutzer sein, die Ihr Backend ohne Ihr Wissen direkt abfragen. Da Sie sehen, dass Anfragen nicht verifiziert sind, ist es an der Zeit, sich anzusehen, was mit den Nutzern passiert, die möglicherweise eine nicht verifizierte Anfrage an Ihr Backend haben, bevor Sie ihre Anfragen verifizieren.

Nicht bestätigte und durchgesetzte Anfragen

Klicken Sie auf dem vorherigen Bildschirm auf Erzwingen und dann noch einmal auf Erzwingen, wenn Sie dazu aufgefordert werden.

Ein Dashboard mit nicht verifizierten Messwerten und einer hervorgehobenen Schaltfläche „Erzwingen“

Dadurch wird App Check erzwungen. Anfragen an Ihre Backend-Dienste, die nicht über den von Ihnen ausgewählten Attestierungsanbieter (in diesem Fall reCAPTCHA Enterprise) bestätigt wurden, werden jetzt blockiert. Kehren Sie zu Ihrer laufenden Webanwendung 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, sollte in etwa Folgendes angezeigt werden:

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

Das bedeutet, dass App Check Anfragen blockiert, die kein gültiges Attestierungstoken in ihren Anfragen an Ihre Firebase-Ressourcen übergeben haben. Sie können die App Check-Erzwingung vorerst deaktivieren. Im nächsten Abschnitt erfahren Sie, wie Sie reCAPTCHA Enterprise App Check dem Friendly Chat-Beispiel hinzufügen.

7. reCAPTCHA Enterprise-Schlüssel zur Website hinzufügen

Wir fügen den Enterprise-Schlüssel in Ihre Anwendung ein. Öffnen Sie zuerst hosting/src/firebase-config.js und fügen Sie Ihren reCAPTCHA Enterprise-Schlüssel in das folgende Code-Snippet ein:

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

Öffnen Sie anschließend hosting/src/index.js und fügen Sie in Zeile 51 einen Import aus firebase-config.js hinzu, um Ihren reCAPTCHA-Schlüssel abzurufen. Importieren Sie außerdem die App Check-Bibliothek, damit Sie mit dem reCAPTCHA Enterprise-Anbieter arbeiten können.

// 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';

In der nächsten Zeile erstellen Sie eine Funktion, um App Check einzurichten. Die Funktion prüft zuerst, ob Sie sich in einer Entwicklungsumgebung befinden. Wenn ja, wird ein Debug-Token ausgegeben, 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 dem ausgewählten Anbieter zu initialisieren – in diesem Fall reCAPTCHA Enterprise. Außerdem sollten Sie Ihr App Check-Token automatisch im Hintergrund aktualisieren, um Verzögerungen bei der Interaktion des Nutzers mit Ihrem Dienst zu vermeiden, falls das App Check-Token abgelaufen 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
 }

Nachdem 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 der kürzlich hinzugefügten Methode hinzu.

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

Zuerst lokal testen

Testen Sie Ihre Anwendung zuerst lokal. Wenn Sie die Anwendung noch nicht lokal bereitstellen, führen Sie firebase serve aus. Die Anwendung kann lokal immer noch nicht geladen werden. Das liegt daran, dass Sie Ihre Firebase-Domain nur beim reCAPTCHA-Attestierungsanbieter und nicht bei der Localhost-Domain registriert haben. Sie sollten „localhost“ niemals als genehmigte Domain registrieren, da Nutzer so über eine lokal auf ihrem Computer ausgeführte Anwendung auf Ihre eingeschränkten Back-Ends zugreifen können. Da Sie self.FIREBASE_APPCHECK_DEBUG_TOKEN = true festgelegt haben, sollten Sie stattdessen in der JavaScript-Konsole nach einer Zeile suchen, die in 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.

Nehmen Sie das bereitgestellte Debug-Token (im Beispiel : 55183c20-de61-4438-85e6-8065789265be) und fügen Sie es in die App Check-Konfiguration im Dreipunkt-Menü für Ihre App ein.

App Check-Dashboard mit dem Speicherort von „Debug-Tokens verwalten“

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. Das ist eine sicherere Alternative, als ein Debug-Token zu generieren und in Ihre Anwendung einzubetten. Wenn Sie ein Token in die App einbetten, könnte es versehentlich an Endnutzer weitergegeben werden, die es dann nutzen könnten, um Ihre Prüfungen zu umgehen. Wenn Sie ein Debug-Token verteilen möchten, z. B. in einer CI-Umgebung, finden Sie in dieser Dokumentation weitere Informationen dazu.

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

Nachdem Sie das Debug-Token in der Firebase Console registriert haben, können Sie die App Check-Erzwingung wieder aktivieren und testen, ob die App-Inhalte lokal geladen werden, indem Sie firebase serve im Terminal aufrufen. Die zuvor eingegebenen Daten sollten in der lokalen Version der Webanwendung angezeigt werden. Die Nachricht mit dem Debug-Token sollte weiterhin in der Konsole angezeigt werden.

In der Produktion ausprobieren

Wenn Sie mit der lokalen Funktionsweise von App Check zufrieden sind, stellen Sie die Webanwendung in der Produktion bereit. Rufen Sie firebase deploy noch einmal über Ihr Terminal auf und aktualisieren Sie die Seite. Dadurch wird Ihre Webanwendung für die Ausführung in Firebase Hosting verpackt. Sobald Ihre Anwendung in Firebase Hosting gehostet wird, können Sie sie unter ${YOUR_PROJECT_ID}.web.app aufrufen. Wenn Sie die JavaScript-Konsole öffnen, sollte das Debug-Token dort nicht mehr angezeigt werden und die Chats sollten in Ihrem Projekt geladen werden. Nachdem Sie einige Zeit mit der Anwendung interagiert haben, können Sie den Bereich „App Check“ in der Firebase Console aufrufen und prüfen, ob alle Anfragen an Ihre Anwendung jetzt verifiziert sind.

8. Glückwunsch!

Glückwunsch! Sie haben Firebase App Check erfolgreich einer Web-App hinzugefügt.

Sie haben die Firebase Console so eingerichtet, dass ein reCAPTCHA Enterprise-Token für Produktionsumgebungen verarbeitet wird, und sogar Debug-Tokens für die lokale Entwicklung eingerichtet. So können Ihre Apps weiterhin von genehmigten Clients aus auf Firebase-Ressourcen zugreifen und betrügerische Aktivitäten innerhalb Ihrer Anwendung werden verhindert.

Wie geht es weiter?

In der folgenden Dokumentation finden Sie Informationen dazu, wie Sie Firebase App Check hinzufügen:

Referenzdokumente