Premiers pas avec App Check avec reCAPTCHA v3 dans les applications Web

Cette page explique comment activer App Check dans une application Web à l'aide de l'API intégrée reCAPTCHA v3. Lorsque vous activez App Check, vous vous assurez que seule votre application peut accéder aux ressources Firebase de votre projet. Consultez une Présentation de cette fonctionnalité

Notez que reCAPTCHA v3 est invisible pour les utilisateurs. Le fournisseur reCAPTCHA v3 ne demandera jamais aux utilisateurs de résoudre un défi. Consultez la documentation reCAPTCHA v3.

Si vous souhaitez utiliser App Check avec votre propre fournisseur personnalisé, consultez Implémenter un fournisseur App Check personnalisé

1. Configurer votre projet Firebase

  1. Ajoutez Firebase à votre projet JavaScript si ce n'est pas déjà fait l'avez déjà fait.

  2. Enregistrez votre site pour reCAPTCHA v3 et obtenez votre clé de site et votre clé secrète reCAPTCHA v3.

  3. Enregistrez vos applications pour qu'elles utilisent App Check avec le fournisseur reCAPTCHA dans la section App Check de la console Firebase. Vous devrez fournir la clé secrète que vous avez obtenue à l'étape précédente.

    En règle générale, vous devez enregistrer toutes les applications de votre projet, car une fois l'application forcée pour un produit Firebase, seules les applications enregistrées pourront accéder aux ressources backend du produit.

  4. Facultatif: Dans les paramètres d'enregistrement de l'application, définissez une valeur TTL personnalisée. (TTL) pour App Check jetons émis par le fournisseur. Vous pouvez définir le TTL sur une valeur comprise entre 30 minutes et sept jours. Lorsque vous modifiez cette valeur, tenez compte des compromis suivants :

    • Sécurité : les valeurs TTL plus courtes offrent une sécurité renforcée, car elles réduisent la période pendant laquelle un jeton divulgué ou intercepté peut être utilisé de manière abusive par un pirate informatique.
    • Performances : des TTL plus courts signifient que votre application effectuera des attestations plus fréquemment. Comme le processus d'attestation des applications ajoute de la latence au réseau chaque fois qu'elle est exécutée, une valeur TTL courte peut avoir un impact de votre application.
    • Quota et coût : les TTL plus courts et les réattestations fréquentes réduisent plus rapidement votre quota. Pour les services payants, cela peut entraîner des coûts plus élevés. Voir les quotas et limites.

    La valeur TTL par défaut de 1 jour est raisonnable pour la plupart des applications. Notez que la bibliothèque App Check s'actualise jetons à environ la moitié de la durée TTL.

2. Ajouter la bibliothèque App Check à votre application

Ajoutez Firebase à votre application Web si ce n'est pas déjà fait. Assurez-vous que pour importer la bibliothèque App Check.

3. Initialiser App Check

Ajoutez le code d'initialisation suivant à votre application avant d'accéder Services Firebase. Vous devez transmettre à activate() votre clé de site reCAPTCHA, que vous avez créée dans la console reCAPTCHA.

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

Étapes suivantes

Une fois la bibliothèque App Check installée dans votre application, déployez-la.

L'application cliente mise à jour commencera à envoyer App Check jetons avec chaque envoyée à Firebase, mais les produits Firebase n'auront pas besoin des jetons jusqu'à ce que vous activiez l'application dans la section App Check de console Firebase.

Surveiller les métriques et activer l'application

Toutefois, avant d'activer l'application, vous devez vous assurer qu'elle n'entraînera pas de perturbation pour vos utilisateurs légitimes existants. En revanche, si vous constatez une utilisation suspecte de vos ressources d'application, vous pouvez activer l'application plus tôt.

Pour vous aider à prendre cette décision, vous pouvez consulter les métriques App Check des services que vous utilisez :

Activer l'application forcée de App Check

Une fois que vous avez compris l'impact de App Check sur vos utilisateurs et que vous êtes prêt à continuer, vous pouvez activer l'application de App Check :

Utiliser App Check dans les environnements de débogage

Si, après avoir enregistré votre application pour App Check, vous souhaitez l'exécuter dans un environnement que App Check ne classerait normalement pas comme valide, par exemple localement pendant le développement ou à partir d'un environnement d'intégration continue (CI), vous pouvez créer un build de débogage de votre application qui utilise le fournisseur de débogage App Check au lieu d'un véritable fournisseur d'attestation.

Consultez Utiliser App Check avec le fournisseur de débogueur dans les applications Web.