Erste Schritte mit App Check mit reCAPTCHA v3 in Web-Apps

Auf dieser Seite erfahren Sie, wie Sie App Check in einer Webanwendung mit dem integrierten reCAPTCHA v3-Anbieter aktivieren. Wenn Sie App Check aktivieren, können nur Ihre App und keine anderen Apps auf die Firebase-Ressourcen Ihres Projekts zugreifen. Hier finden Sie eine Übersicht.

reCAPTCHA v3 ist für Nutzer nicht sichtbar. Der reCAPTCHA v3-Anbieter fordert Nutzer nicht zu jeder Zeit auf, eine Herausforderung zu bestehen. Weitere Informationen finden Sie in der reCAPTCHA v3-Dokumentation.

Wenn Sie App Check mit einem eigenen benutzerdefinierten Anbieter verwenden möchten, lesen Sie den Hilfeartikel Benutzerdefinierten App Check-Anbieter implementieren.

1. Das Firebase-Projekt einrichten

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu, falls Sie das noch nicht getan haben.

  2. Registrieren Sie Ihre Website für reCAPTCHA v3 und erhalten Sie Ihren reCAPTCHA v3-Websiteschlüssel und Ihren Secret-Schlüssel.

  3. Registrieren Sie Ihre Apps für die Verwendung von App Check mit dem reCAPTCHA-Anbieter im Bereich App Check der Firebase-Konsole. Sie müssen den geheimen Schlüssel angeben, den Sie im vorherigen Schritt erhalten haben.

    Normalerweise müssen Sie alle Apps Ihres Projekts registrieren, da nur registrierte Apps auf die Backend-Ressourcen des Produkts zugreifen können, wenn Sie die Erzwingung für ein Firebase-Produkt aktivieren.

  4. Optional: Legen Sie in den Einstellungen für die App-Registrierung eine benutzerdefinierte Gültigkeitsdauer (Time to Live, TTL) für vom Anbieter ausgestellte App Check-Tokens fest. Sie können die TTL auf einen beliebigen Wert zwischen 30 Minuten und 7 Tagen festlegen. Beachten Sie beim Ändern dieses Werts die folgenden Einschränkungen:

    • Sicherheit: Kürzere TTLs bieten eine höhere Sicherheit, da das Zeitfenster verkürzt wird, in dem ein gehacktes oder abgefangenes Token von einem Angreifer missbraucht werden kann.
    • Leistung: Eine kürzere TTL bedeutet, dass Ihre App die Attestierung häufiger durchführt. Da der App-Attestierungsprozess bei jeder Ausführung zu einer Latenz bei Netzwerkanfragen führt, kann eine kurze TTL sich auf die Leistung Ihrer App auswirken.
    • Kontingent und Kosten: Kürzere TTLs und häufige Neuattestierungen verringern Ihr Kontingent schneller und können bei kostenpflichtigen Diensten zu höheren Kosten führen. Weitere Informationen finden Sie unter Kontingente und Limits.

    Die Standard-TTL von 1 Tag ist für die meisten Apps angemessen. Hinweis: Die App Check-Bibliothek aktualisiert Tokens nach etwa der Hälfte der TTL-Dauer.

2. App Check-Bibliothek zur App hinzufügen

Fügen Sie Ihrer Web-App Firebase hinzu, falls noch nicht geschehen. Importieren Sie die App Check-Bibliothek.

3. App Check initialisieren

Fügen Sie Ihrer Anwendung den folgenden Initialisierungscode hinzu, bevor Sie auf Firebase-Dienste zugreifen. Sie müssen den reCAPTCHA-Websiteschlüssel, den Sie in der reCAPTCHA-Konsole erstellt haben, an activate() übergeben.

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});
appcheck_initialize.js

Web

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);
index.js

Nächste Schritte

Nachdem die App Check-Bibliothek in Ihrer App installiert ist, können Sie sie bereitstellen.

Die aktualisierte Client-App sendet dann mit jeder Anfrage an Firebase App Check-Token. Für Firebase-Produkte müssen die Token jedoch erst dann gültig sein, wenn Sie die Erzwingung im Bereich App Check der Firebase Console aktivieren.

Messwerte beobachten und Erzwingung aktivieren

Bevor Sie die Erzwingung aktivieren, sollten Sie jedoch prüfen, ob dies die Nutzung für Ihre bestehenden rechtmäßigen Nutzer nicht beeinträchtigt. Wenn Sie jedoch eine verdächtige Nutzung Ihrer App-Ressourcen feststellen, sollten Sie die Erzwingung früher aktivieren.

Bei der Entscheidung können dir App Check Messwerte für die von dir verwendeten Dienste helfen:

App Check-Erzwingung aktivieren

Wenn Sie wissen, wie sich App Check auf Ihre Nutzer auswirkt, und bereit sind, fortzufahren, können Sie die Durchsetzung von App Check aktivieren:

App Check in Debug-Umgebungen verwenden

Wenn Sie Ihre Anwendung für App Check registriert haben und sie in einer Umgebung ausführen möchten, die von App Check normalerweise nicht als gültig eingestuft wird, z. B. lokal während der Entwicklung oder in einer Umgebung für kontinuierliche Integration (CI), können Sie einen Debug-Build Ihrer App erstellen, der den App Check-Debuganbieter anstelle eines echten Attestierungsanbieters verwendet.

Weitere Informationen finden Sie unter App Check mit dem Debug-Anbieter in Web-Apps verwenden.