Commencez à utiliser App Check avec reCAPTCHA v3 dans les applications Web

Cette page vous montre comment activer App Check dans une application Web, à l'aide du fournisseur reCAPTCHA v3 intégré. Lorsque vous activez App Check, vous garantissez que seule votre application peut accéder aux ressources Firebase de votre projet. Voir un aperçu de cette fonctionnalité.

Notez que reCAPTCHA v3 est invisible pour les utilisateurs. Le fournisseur reCAPTCHA v3 n’exigera à aucun moment que les utilisateurs résolvent 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. Configurez votre projet Firebase

  1. Ajoutez Firebase à votre projet JavaScript si vous ne l'avez pas déjà fait.

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

  3. Enregistrez vos applications pour utiliser App Check auprès du 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.

    Vous devez généralement enregistrer toutes les applications de votre projet, car une fois que vous avez activé l'application 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 durée de vie (TTL) personnalisée pour les jetons App Check émis par le fournisseur. Vous pouvez définir la durée de vie sur n'importe quelle valeur comprise entre 30 minutes et 7 jours. Lorsque vous modifiez cette valeur, tenez compte des compromis suivants :

    • Sécurité : des durées de vie plus courtes offrent une sécurité renforcée, car elles réduisent la fenêtre pendant laquelle un jeton divulgué ou intercepté peut être abusé par un attaquant.
    • Performances : des durées de vie plus courtes signifient que votre application effectuera une attestation plus fréquemment. Étant donné que le processus d’attestation d’application ajoute de la latence aux requêtes réseau à chaque fois qu’il est exécuté, une courte durée de vie peut avoir un impact sur les performances de votre application.
    • Quota et coût : des durées de vie plus courtes et des réattestations fréquentes épuisent votre quota plus rapidement et, pour les services payants, coûtent potentiellement plus cher. Voir Quotas et limites .

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

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

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

3. Initialiser la vérification de l'application

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

Web modular API

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
});

Web namespaced API

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);

Prochaines étapes

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

L'application cliente mise à jour commencera à envoyer des jetons App Check avec chaque demande qu'elle adresse à Firebase, mais les produits Firebase n'exigeront pas que les jetons soient valides tant que vous n'aurez pas activé l'application dans la section App Check de la console Firebase.

Surveillez les métriques et activez l’application

Toutefois, avant d'activer l'application, vous devez vous assurer que cela ne perturbera pas vos utilisateurs légitimes existants. D’un autre côté, si vous constatez une utilisation suspecte des ressources de votre application, vous souhaiterez peut-être activer l’application plus tôt.

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

Activer l'application de l'App Check

Lorsque vous comprenez comment App Check affectera vos utilisateurs et que vous êtes prêt à continuer, vous pouvez activer l'application d'App Check :

Utiliser App Check dans les environnements de débogage

Si, après avoir enregistré votre application pour App Check, vous souhaitez exécuter votre application dans un environnement qu'App Check ne serait normalement pas classé comme valide, par exemple localement pendant le développement ou à partir d'un environnement d'intégration continue (CI), vous pouvez créer une version 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ébogage dans les applications Web .