Catch up on highlights from Firebase at Google I/O 2023. Learn more

Beginnen Sie mit der Verwendung von App Check mit reCAPTCHA v3 in Web-Apps

Auf dieser Seite wird gezeigt, wie Sie App Check in einer Web-App mithilfe des integrierten reCAPTCHA v3-Anbieters aktivieren. Wenn Sie App Check aktivieren, tragen Sie dazu bei, dass nur Ihre App auf die Firebase-Ressourcen Ihres Projekts zugreifen kann. Sehen Sie sich eine Übersicht über diese Funktion an.

reCAPTCHA v3 ist ein kostenloser Dienst. App Check unterstützt auch reCAPTCHA Enterprise , einen kostenpflichtigen Dienst mit einem kostenlosen Kontingent. Informationen zu den Unterschieden zwischen reCAPTCHA v3 und reCAPTCHA Enterprise finden Sie im Funktionsvergleich .

Beachten Sie, dass reCAPTCHA v3 für Benutzer unsichtbar ist. Der reCAPTCHA v3-Anbieter fordert die Benutzer zu keinem Zeitpunkt auf, eine Herausforderung zu lösen. Weitere Informationen finden Sie in der reCAPTCHA v3-Dokumentation .

Wenn Sie App Check mit Ihrem eigenen benutzerdefinierten Anbieter verwenden möchten, finden Sie weitere Informationen unter Implementieren eines benutzerdefinierten App Check-Anbieters .

1. Richten Sie Ihr Firebase-Projekt ein

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

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

  3. Registrieren Sie Ihre Apps für die Verwendung von App Check beim reCAPTCHA-Anbieter im App Check -Bereich 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, denn sobald Sie die Erzwingung für ein Firebase-Produkt aktivieren, können nur registrierte Apps auf die Back-End-Ressourcen des Produkts zugreifen.

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

    • Sicherheit: Kürzere TTLs bieten mehr Sicherheit, da sie das Fenster verkleinern, in dem ein durchgesickertes oder abgefangenes Token von einem Angreifer missbraucht werden kann.
    • Leistung: Kürzere TTLs bedeuten, dass Ihre App die Bestätigung häufiger durchführt. Da der App-Bestätigungsprozess bei jeder Ausführung Latenz für Netzwerkanforderungen hinzufügt, kann eine kurze TTL die Leistung Ihrer App beeinträchtigen.
    • Kontingent und Kosten: Kürzere TTLs und häufige Neubescheinigungen erschöpfen Ihr Kontingent schneller und kosten bei kostenpflichtigen Diensten möglicherweise mehr. Siehe Kontingente und Limits .

    Die Standard-TTL von 1 Tag ist für die meisten Apps angemessen. Beachten Sie, dass die App Check-Bibliothek Token bei etwa der Hälfte der TTL-Dauer aktualisiert.

2. Fügen Sie Ihrer App die App Check-Bibliothek hinzu

Fügen Sie Ihrer Web-App Firebase hinzu, falls Sie dies noch nicht getan haben. Stellen Sie sicher, dass Sie die App Check-Bibliothek importieren.

3. App-Check initialisieren

Fügen Sie Ihrer Anwendung den folgenden Initialisierungscode hinzu, bevor Sie auf Firebase-Dienste zugreifen. Sie müssen Ihren reCAPTCHA- Site-Schlüssel übergeben, den Sie in der reCAPTCHA-Konsole erstellt haben, um activate() zu aktivieren.

Web version 9

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 version 8

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

Sobald die App Check-Bibliothek in Ihrer App installiert ist, stellen Sie sie bereit.

Die aktualisierte Client-App beginnt mit dem Senden von App-Check-Tokens zusammen mit jeder Anfrage, die sie an Firebase sendet, aber Firebase-Produkte verlangen nicht, dass die Tokens gültig sind, bis Sie die Erzwingung im Abschnitt „App-Check“ der Firebase-Konsole aktivieren.

Überwachen Sie Metriken und aktivieren Sie die Durchsetzung

Bevor Sie die Erzwingung aktivieren, sollten Sie jedoch sicherstellen, dass dadurch Ihre vorhandenen legitimen Benutzer nicht gestört werden. Wenn Sie andererseits eine verdächtige Nutzung Ihrer App-Ressourcen feststellen, sollten Sie die Erzwingung möglicherweise früher aktivieren.

Um diese Entscheidung zu treffen, können Sie sich die App Check-Metriken für die von Ihnen verwendeten Dienste ansehen:

App-Check-Erzwingung aktivieren

Wenn Sie verstehen, wie sich App Check auf Ihre Benutzer auswirkt, und Sie fortfahren möchten, können Sie die Erzwingung von App Check aktivieren:

Verwenden Sie App Check in Debug-Umgebungen

Wenn Sie Ihre App nach der Registrierung für App Check in einer Umgebung ausführen möchten, die App Check normalerweise nicht als gültig einstufen würde, z. B. lokal während der Entwicklung oder in einer Continuous Integration (CI)-Umgebung, können Sie diese erstellen ein Debugbuild Ihrer App, der den App Check-Debuganbieter anstelle eines echten Nachweisanbieters verwendet.

Siehe Verwenden von App Check mit dem Debug-Anbieter in Web-Apps .