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 eine Bestätigung enthalten, dass die Anfrage von Ihrer echten App stammt. Außerdem können Sie Traffic ohne entsprechende Bestätigung blockieren. Firebase App Check verwendet plattformspezifische Attestierungsanbieter, um die Authentizität des Clients zu überprüfen. Für Webanwendungen werden reCAPTCHA v3 und reCAPTCHA Enterprise als Attestierungsanbieter unterstützt.

Mit App Check können Sie Anfragen an Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication mit Identity Platform und an Back-Ends schützen, die Sie selbst hosten.

Umfang

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

Lerninhalte

• Back-End auf unbefugten Zugriff überwachen
• Durchsetzung für 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
• Ein 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 auch als ZIP-Datei herunterladen.

Das Repository friendlychat-web enthält Beispielprojekte für mehrere Plattformen.

In diesem Codelab werden nur diese beiden Ordner verwendet:

• 📁 appcheck-start: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
• 📁 appcheck: Das ist der vollständige Code der fertigen Beispiel-App.

Hinweis: Wenn Sie die fertige App ausführen möchten, müssen Sie ein Firebase-Projekt in der Firebase Console erstellen. Eine Anleitung dazu finden Sie in diesem Codelab im Abschnitt Firebase-Projekt erstellen und einrichten.

Start-App importieren

Öffnen oder importieren Sie mit 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 vollständigen 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 dann einen Projektnamen ein (z. B. FriendlyChat).
   

   Dieser Projektname wird als Anzeigename in Firebase-Oberflächen verwendet. Firebase erstellt automatisch eine eindeutige Projekt-ID auf Grundlage dieses Projektnamens. Sie können jetzt optional auf das Symbol Bearbeiten klicken, um die gewünschte Projekt-ID festzulegen. Diese ID kann nach dem Erstellen des Projekts jedoch nicht mehr geändert werden.

   Notieren Sie sich Ihre Projekt-ID, da Sie diese später benötigen, um Ihr Firebase-Projekt in der Firebase CLI zu identifizieren. Wenn Sie Ihre ID vergessen, können Sie sie später jederzeit in den Projekteinstellungen nachsehen.

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-Tarif upgraden

Wenn Sie Cloud Storage for Firebase verwenden möchten, muss für Ihr Firebase-Projekt der Blaze-Tarif (Pay as you go) aktiviert sein. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie neu bei Firebase und Google Cloud sind, können Sie prüfen, ob Sie Anspruch auf ein Guthaben von 300$und ein Cloud-Rechnungskonto für den kostenlosen Testzeitraum haben.
• Wenn Sie dieses Codelab im Rahmen einer Veranstaltung durchführen, fragen Sie den Organisator, ob Cloud-Guthaben verfügbar ist.

So führen Sie für Ihr Projekt ein Upgrade auf den Tarif „Blaze“ durch:

1. Wählen Sie in der Firebase Console die Option zum Upgraden Ihres Abos 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 zur Firebase-Konsole zurückkehren, um das Upgrade abzuschließen.

Hinweis: Nach Abschluss dieses Codelabs können Sie ein Downgrade Ihres Projekts auf den kostenlosen Spark-Tarif durchführen.

Dem Projekt eine Firebase-Web-App hinzufügen

1. Klicken Sie auf das Websymbol , um eine neue Firebase-Web-App zu erstellen.
2. Registrieren Sie die App unter dem Namen „Friendly Chat“ und klicken Sie dann das Kästchen neben Richten Sie außerdem Firebase Hosting für die App ein an. Klicken Sie auf App registrieren.
3. Im nächsten Schritt wird ein Befehl zum Installieren von Firebase mit npm und ein Konfigurationsobjekt angezeigt. Sie kopieren dieses Objekt später im Codelab. Klicken Sie daher jetzt auf Weiter.

4. Anschließend wird eine Option zum Installieren der Firebase CLI angezeigt. Falls noch nicht geschehen, installieren Sie es jetzt mit dem Befehl npm install -g firebase-tools. Klicken Sie anschließend auf Weiter.
5. Anschließend wird eine Option angezeigt, mit der Sie sich in Firebase anmelden und in Firebase Hosting bereitstellen können. Melden Sie sich mit dem Befehl firebase login in Firebase an und klicken Sie dann auf Weiter zur Konsole. 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 ermöglicht es Ihren Nutzern, sich mühelos in der App anzumelden.
• Cloud Firestore speichert strukturierte Daten in der Cloud und benachrichtigt Sie sofort, wenn sich Daten ändern.
• Cloud Storage for Firebase zum Speichern von Dateien in der Cloud.
• Firebase Hosting hostet und stellt Assets bereit.
• Firebase Cloud Messaging versendet Push-Benachrichtigungen und zeigt Pop-up-Benachrichtigungen des Browsers an.
• Firebase Performance Monitoring, um Leistungsdaten von Nutzern für Ihre App zu erheben.

Für einige dieser Produkte ist eine spezielle Konfiguration erforderlich oder sie müssen über die Firebase Console aktiviert werden.

Google-Anmeldung für Firebase Authentication aktivieren

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

Sie müssen Google Log-in aktivieren:

1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
2. Klicken Sie auf Authentifizierung und dann gegebenenfalls auf Jetzt starten. Klicken Sie dann auf den Tab Anmeldemethode (oder klicken Sie hier, um direkt dorthin zu gelangen).
3. Google Log-in-Anbieter 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.

Cloud Firestore einrichten

Die Web-App verwendet Cloud Firestore zum Speichern von Chat-Nachrichten und zum Empfangen neuer Chat-Nachrichten.

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. Belassen Sie die Database ID (Datenbank-ID) auf (default).
4. Wählen Sie einen Speicherort für Ihre Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort auswählen, der sich in der Nähe Ihrer Nutzer befindet.
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 öffentlich, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

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

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 standardmäßigen Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die kostenlose Stufe für Google Cloud Storage genutzt werden. 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. Veröffentlichen Sie keine App öffentlich, ohne Sicherheitsregeln für Ihren Storage-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

4. Firebase konfigurieren

Rufen Sie im Verzeichnis appcheck-start folgenden Befehl auf:

firebase use --add

Wählen Sie bei 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 von Firebase konfigurieren.

1. Rufen Sie in der Firebase Console die Projekteinstellungen auf.
2. Wählen Sie auf der Karte „Ihre Apps“ den Alias der App aus, für die Sie ein Konfigurationsobjekt benötigen.
3. Wählen Sie im Bereich mit dem Firebase SDK-Snippet die Option Config aus.
4. Kopieren Sie den Konfigurationsobjekt-Snippet und fügen Sie ihn 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",
};

Der oben stehende Code sollte Ihr anwendungsspezifisches Firebase-Konfigurationsobjekt und nicht die Platzhalterwerte enthalten.

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

firebase experiments:enable webframeworks

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

Jetzt sollten wir bereit sein, Ihr Projekt auszuführen und zu testen, ob das Standardprojekt funktioniert.

5. App ohne App Check ausprobieren

Nachdem Sie Ihre App konfiguriert und das SDK eingerichtet haben, versuchen Sie, die App so zu verwenden, wie sie ursprünglich konzipiert war. Installieren Sie zuerst alle Abhängigkeiten. Wechseln Sie in Ihrem Terminal zum Verzeichnis appcheck-start/hosting. Führen Sie in diesem Verzeichnis npm install aus. Dadurch werden alle Abhängigkeiten abgerufen, die für die Funktion Ihres Projekts erforderlich sind. Wenn Sie die App im aktuellen Zustand starten möchten, können Sie firebase serve ausführen. Sie werden aufgefordert, sich mit einem Google-Konto anzumelden. Melden Sie sich an und versuchen Sie dann, einige Chatnachrichten und Fotos in den Chat zu posten.

Nachdem Sie die Funktion 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 demonstrieren, wie App Check in der Praxis funktioniert, da eine Domain für den reCAPTCHA Enterprise-Attestierungsanbieter konfiguriert werden muss.

Hoffentlich können Sie die Standardfunktionen der App nutzen. Chatnachrichten posten und alles andere, was nur über eine solche App erfolgen sollte. Der Nachteil des aktuellen Zustands ist, dass jeder mit Ihrer App-Konfiguration aus dem vorherigen Schritt auf Ihre Backend-Ressourcen zugreifen kann. Sie müssen weiterhin die Sicherheitsregeln einhalten, die in Ihren Firestore- und Cloud Storage-Systemen gelten. Ansonsten können sie dort gespeicherte Daten abfragen, speichern und darauf zugreifen.

In den nächsten Schritten werden Sie Folgendes tun:

• Für App Check registrieren
• Durchsetzung validieren
• Regeln durchsetzen

6. App Check und Erzwingung aktivieren

Zuerst benötigen Sie einen reCAPTCHA Enterprise-Schlüssel für Ihr Projekt, den Sie App Check hinzufügen. 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 Unternehmensschlüssel auf Schlüssel erstellen. Geben Sie in diesem Abschnitt 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 App auf Firebase Hosting hosten möchten, verwenden Sie den Standard-Hostingnamen, der in der Regel ${YOUR_PROJECT_ID}.web.app lautet. Sie finden Ihre Hosting-Domain in der Firebase Console im Hosting-Bereich. Wenn Sie diese Informationen eingegeben haben, drücken Sie Fertig und Schlüssel erstellen.

Nach Abschluss des Vorgangs wird oben auf der Seite Schlüsseldetails eine ID angezeigt.

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 dann auf reCAPTCHA Enterprise. Fügen Sie die kopierte ID in das Textfeld für den reCAPTCHA Enterprise-Websiteschlüssel ein. Behalten Sie für die restlichen Einstellungen die Standardwerte bei. Ihre Seite „App-Check“ sollte in etwa so aussehen:

Nicht bestätigte und nicht durchgesetzte Anfragen

Nachdem Sie einen registrierten Schlüssel in der Firebase Console haben, kehren Sie zur Ausführung Ihrer Website im Browser zurück, indem Sie firebase serve ausführen. Hier wird die Web-App lokal ausgeführt und Sie können wieder Anfragen an das Firebase-Backend senden. Da Anfragen an das Firebase-Backend gesendet werden, werden sie von App Check überwacht, aber nicht erzwungen. Wenn Sie den Status der eingehenden Anfragen sehen möchten, können Sie in der Firebase-Konsole auf der Seite „App Check“ den Bereich Cloud Firestore auf dem Tab „APIs“ aufrufen. Da Sie den Client noch nicht für die Verwendung von App Check konfiguriert haben, sollte die Ausgabe etwa so aussehen:

Das Backend empfängt 100% nicht bestätigte 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. Zunächst kann sie Aufschluss darüber geben, ob auf allen Ihren Client-Apps die aktuelle Version Ihres Clients ausgeführt wird. Wenn das der Fall ist, können Sie App Check problemlos erzwingen, ohne sich Sorgen machen zu müssen, dass der Zugriff für einen authentischen Client Ihrer Anwendung deaktiviert wird. Außerdem können Sie so sehen, wie viele Versuche, auf Ihr Backend zuzugreifen, nicht aus Ihrer App stammen. Das können Nutzer sein, die Ihr Backend ohne Ihr Wissen direkt abfragen. Da Sie sehen können, dass Anfragen nicht bestätigt werden, ist es an der Zeit, sich anzusehen, was mit Nutzern passiert, die möglicherweise eine nicht bestätigte Anfrage an Ihr Backend haben, bevor Sie ihre Anfragen bestätigen.

Nicht bestätigte und durchgesetzte Anfragen

Drücken Sie auf dem vorherigen Bildschirm auf die Schaltfläche Erzwingen und dann noch einmal auf Erzwingen, wenn Sie dazu aufgefordert werden.

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 werden, werden jetzt blockiert. 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, sollte in etwa Folgendes angezeigt werden:

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

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

7. reCAPTCHA Enterprise-Schlüssel auf der Website hinzufügen

Wir fügen den Unternehmensschlü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 nach Abschluss dieses Vorgangs 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 dann eine Funktion zum Einrichten von App Check. 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 müssen Sie App Check für die Verwendung mit Ihrem ausgewählten Anbieter initialisieren. In diesem Fall ist das reCAPTCHA Enterprise. Außerdem sollten Sie Ihr App Check-Token automatisch im Hintergrund aktualisieren, um Verzögerungen zu vermeiden, wenn Nutzer mit Ihrem Dienst interagieren und ihr 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 wurde, müssen Sie die Funktion „setupAppCheck“ aufrufen, die Sie gerade erstellt haben. Fügen Sie unten in der Datei hosting/src/index.js den Aufruf der Methode hinzu, die Sie gerade hinzugefügt haben.

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. Sie sollten feststellen, dass die Anwendung weiterhin nicht lokal geladen werden kann. Das liegt daran, dass Sie nur Ihre Firebase-Domain beim reCAPTCHA-Attestierungsanbieter registriert haben, nicht aber die Localhost-Domain. Sie sollten „localhost“ niemals als genehmigte Domain registrieren, da Nutzer so über eine Anwendung, die lokal auf ihrem Computer ausgeführt wird, 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.

Kopieren Sie das bereitgestellte Debug-Token (im Beispiel : 55183c20-de61-4438-85e6-8065789265be) und fügen Sie es im Überlaufmenü Ihrer App in die App Check-Konfiguration ein.

Geben Sie dem Token einen eindeutigen Namen, an den Sie sich später erinnern 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 zum Generieren eines Debug-Tokens und Einbetten in Ihre Anwendung. Wenn Sie ein Token in die App einbetten, könnte es versehentlich an Endnutzer weitergegeben werden. Diese könnten es dann nutzen, um Ihre Prüfungen zu umgehen. Wenn Sie ein Debug-Token verteilen möchten, z. B. in einer CI-Umgebung, finden Sie hier weitere Informationen.

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

In der Produktion testen

Wenn Sie sicher sind, dass App Check lokal funktioniert, stellen Sie die Webanwendung in der Produktion bereit. Rufen Sie firebase deploy ü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 auf Firebase Hosting gehostet wird, können Sie sie unter ${YOUR_PROJECT_ID}.web.app aufrufen. Sie können die JavaScript-Konsole öffnen. Dort sollte das Debug-Token nicht mehr angezeigt werden und Chats sollten in Ihrem Projekt geladen werden. Nachdem Sie einige Zeit mit der Anwendung interagiert haben, können Sie außerdem den App Check-Bereich der Firebase-Konsole aufrufen und prüfen, ob alle Anfragen an Ihre Anwendung jetzt verifiziert werden.

8. Glückwunsch!

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

Sie richten die Firebase Console so ein, dass sie ein reCAPTCHA Enterprise-Token für Produktionsumgebungen verarbeitet, und richten sogar Debug-Tokens für die lokale Entwicklung ein. So können Ihre Apps weiterhin über genehmigte Clients auf Firebase-Ressourcen zugreifen und betrügerische Aktivitäten in Ihrer Anwendung werden verhindert.

Wie geht es weiter?

In der folgenden Dokumentation erfahren Sie, wie Sie Firebase App Check hinzufügen:

• Durchsetzung in Cloud Functions aktivieren
• App Check-Tokens in benutzerdefinierten Back-Ends prüfen

Referenzdokumente

• Erste Schritte mit App Check und reCAPTCHA Enterprise in Webanwendungen
• Debug-Anbieter in Web-Apps verwenden