Atelier de programmation Web sur App Check

1. Introduction

Dernière mise à jour : 23/02/2023

Comment empêcher les accès non autorisés à vos ressources Firebase ?

Vous pouvez utiliser Firebase App Check pour empêcher les clients non autorisés d'accéder à vos ressources de backend. Pour cela, vous devez exiger que les requêtes entrantes soient accompagnées d'une attestation indiquant que la requête provient de votre application authentique et bloquer le trafic qui ne dispose pas d'une attestation appropriée. Firebase App Check s'appuie sur des fournisseurs d'attestation spécifiques à la plate-forme pour vérifier l'authenticité du client. Pour les applications Web, App Check accepte reCAPTCHA v3 et reCAPTCHA Enterprise comme fournisseurs d'attestation.

App Check peut être utilisé pour protéger les requêtes envoyées à Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication avec Identity Platform et sur les backends que vous hébergez vous-même.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez sécuriser une application de chat en ajoutant, puis en appliquant App Check.

Points abordés

• Surveiller votre backend pour détecter les accès non autorisés
• Ajouter l'application à Firestore et Cloud Storage
• Exécuter votre application avec un jeton de débogage pour le développement local

Prérequis

• L'IDE ou l'éditeur de texte de votre choix
• Le gestionnaire de paquets npm, qui est généralement fourni avec Node.js
• La CLI Firebase installée et configurée pour fonctionner avec votre compte
• Un terminal/une console
• Un navigateur de votre choix, tel que Chrome
• L'exemple de code de l'atelier de programmation (voir l'étape suivante de l'atelier de programmation pour savoir comment obtenir le code)

2. Obtenir l'exemple de code

Clonez le dépôt GitHub de l'atelier de programmation à partir de la ligne de commande :

git clone https://github.com/firebase/codelab-friendlychat-web

Si vous n'avez pas installé Git, vous pouvez également télécharger le dépôt sous forme de fichier ZIP.

Importer l'application de départ

À l'aide de votre IDE, ouvrez ou importez le répertoire 📁 appcheck-start à partir du dépôt cloné. Le répertoire 📁 appcheck-start contient le code de démarrage de l'atelier de programmation, qui sera une application Web de chat entièrement fonctionnelle. Le répertoire 📁 appcheck contiendra le code final de l'atelier de programmation.

3. Créer et configurer un projet Firebase

Créer un projet Firebase

1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, FriendlyChat).
   
3. Cliquez sur Continuer.
4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Passer à un forfait Firebase supérieur

Pour utiliser Cloud Storage pour Firebase, votre projet Firebase doit être associé au forfait avec paiement à l'usage (Blaze), ce qui signifie qu'il est associé à un compte de facturation Cloud.

• Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
• Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300 $ et à un compte de facturation Cloud d'essai sans frais.
• Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

Pour passer votre projet au forfait Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez Mettre à niveau votre forfait.
2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
   Si vous avez dû créer un compte de facturation Cloud dans le cadre de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

Ajouter une application Web Firebase au projet

1. Cliquez sur l'icône Web  pour créer une application Web Firebase.
2. Enregistrez l'application avec le pseudo "Friendly Chat", puis cochez la case Configurer aussi Firebase Hosting pour cette application. Cliquez sur Enregistrer l'application.
3. À l'étape suivante, vous verrez une commande pour installer Firebase à l'aide de npm et d'un objet de configuration. Vous copierez cet objet plus tard dans l'atelier de programmation. Pour l'instant, appuyez sur Suivant.

4. Une option s'affiche alors pour installer la CLI Firebase. Si vous ne l'avez pas encore installé, faites-le maintenant à l'aide de la commande npm install -g firebase-tools. Cliquez ensuite sur Next (Suivant).
5. Une option s'affiche alors pour vous connecter à Firebase et déployer l'application sur Firebase Hosting. Connectez-vous à Firebase à l'aide de la commande firebase login, puis cliquez sur Accéder à la console. Vous déploierez sur Firebase Hosting lors d'une étape ultérieure.

Configurer les produits Firebase

L'application que nous allons créer utilise des produits Firebase disponibles pour les applications Web :

• Firebase Authentication pour permettre à vos utilisateurs de se connecter facilement à votre application
• Cloud Firestore pour enregistrer des données structurées dans le cloud et recevoir une notification instantanée lorsque les données changent.
• Cloud Storage for Firebase pour enregistrer des fichiers dans le cloud.
• Firebase Hosting pour héberger et diffuser vos éléments.
• Firebase Cloud Messaging pour envoyer des notifications push et afficher des notifications pop-up dans le navigateur.
• Firebase Performance Monitoring pour collecter des données sur les performances des utilisateurs pour votre application.

Certains de ces produits nécessitent une configuration particulière ou doivent être activés via la console Firebase.

Activer Google Sign-In pour Firebase Authentication

Pour permettre aux utilisateurs de se connecter à l'application Web avec leur compte Google, nous allons utiliser la méthode de connexion Google.

Vous devez activer la connexion avec Google :

1. Dans la console Firebase, recherchez la section Build (Créer) dans le panneau de gauche.
2. Cliquez sur Authentification, puis sur Commencer si nécessaire, puis sur l'onglet Méthode de connexion (ou cliquez ici pour y accéder directement).
3. Activer le fournisseur de connexion Google
4. Définissez le nom public de votre application sur "Friendly Chat", puis sélectionnez une adresse e-mail d'assistance pour le projet dans le menu déroulant.
5. Cliquez sur Enregistrer.

Configurer Cloud Firestore

L'application Web utilise Cloud Firestore pour enregistrer les messages de chat et en recevoir de nouveaux.

Pour configurer Cloud Firestore dans votre projet Firebase, procédez comme suit :

1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Firestore database (Base de données Firestore).
2. Cliquez sur Créer une base de données.
3. Laissez l'ID de la base de données défini sur (default).
4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, vous devez choisir un emplacement proche de vos utilisateurs.
5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas et n'exposez pas publiquement une application sans ajouter de règles de sécurité pour votre base de données.
6. Cliquez sur Créer.

Configurer Cloud Storage for Firebase

L'application Web utilise Cloud Storage pour Firebase pour stocker, importer et partager des images.

Voici comment configurer Cloud Storage for Firebase dans votre projet Firebase :

1. Dans le panneau de gauche de la console Firebase, développez Build, puis sélectionnez Storage.
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets situés dans US-WEST1, US-CENTRAL1 et US-EAST1 peuvent bénéficier du niveau d'accès sans frais de Google Cloud Storage. Les buckets situés dans tous les autres emplacements sont soumis aux tarifs et conditions d'utilisation de Google Cloud Storage.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez pas et n'exposez pas publiquement une application sans ajouter de règles de sécurité pour votre bucket Storage.
5. Cliquez sur Créer.

4. Configurer Firebase

À partir du répertoire appcheck-start, appelez :

firebase use --add

Lorsque vous y êtes invité, sélectionnez l'ID de votre projet, puis attribuez un alias à votre projet Firebase. Pour ce projet, vous pouvez simplement attribuer l'alias default. Vous devez ensuite configurer votre projet local pour qu'il fonctionne avec Firebase.

1. Accédez aux paramètres de votre projet dans la console Firebase.
2. Dans la fiche "Vos applications", sélectionnez le pseudo de l'application pour laquelle vous avez besoin d'un objet de configuration.
3. Sélectionnez Config dans le volet de l'extrait du SDK Firebase.
4. Copiez l'extrait de l'objet de configuration, puis ajoutez-le à appcheck-start/hosting/src/firebase-config.js. Dans la suite de l'atelier de programmation, nous supposerons que la variable s'appelle config.

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",
};

À partir du même répertoire appcheck-start, appelez :

firebase experiments:enable webframeworks

Cela active la compatibilité avec les frameworks Web, avec lesquels ce projet a été créé.

Vous devriez maintenant être prêt à exécuter votre projet et à vérifier que le projet par défaut fonctionne.

5. Essayer l'application sans App Check

Maintenant que vous avez configuré votre application et le SDK, essayez d'utiliser l'application comme elle a été conçue à l'origine. Commencez par installer toutes les dépendances. Depuis votre terminal, accédez au répertoire appcheck-start/hosting. Dans ce répertoire, exécutez npm install. Cette commande récupère toutes les dépendances nécessaires au fonctionnement de votre projet. Pour démarrer l'application dans son état actuel, vous pouvez exécuter firebase serve. L'application vous demande de vous connecter avec un compte Google. Connectez-vous, puis essayez de publier quelques messages de chat et quelques photos dans le chat.

Maintenant que vous l'avez testé localement, il est temps de le voir en production. Exécutez firebase deploy pour déployer l'application Web sur le Web. Cette partie est une étape cruciale pour montrer comment App Check fonctionne dans le monde réel, car elle nécessite la configuration d'un domaine pour le fournisseur d'attestation reCAPTCHA Enterprise.

Vous devriez maintenant voir la fonctionnalité par défaut de l'application. Publier des messages de chat et tout ce qui ne devrait être fait que depuis une application comme celle-ci. L'inconvénient de l'état actuel est que toute personne disposant de la configuration de votre application de l'étape précédente peut accéder à vos ressources de backend. Ils doivent toujours respecter les règles de sécurité mises en place par vos systèmes Firestore et Cloud Storage, mais ils peuvent toujours interroger, stocker et accéder aux données qui y sont stockées.

Dans les prochaines étapes, vous allez :

• Enregistrer auprès App Check
• Valider l'application
• Commencer à appliquer les règles

6. Activer App Check et l'application des règles

Commençons par récupérer une clé reCAPTCHA Enterprise pour votre projet et par l'ajouter à App Check. Vous commencez par accéder à la section reCAPTCHA Enterprise de la console Google Cloud. Sélectionnez votre projet. Vous êtes alors invité à activer l'API reCAPTCHA Enterprise. Activez l'API et attendez quelques minutes que l'opération se termine. Cliquez ensuite sur Créer une clé à côté de Clés Enterprise. Ensuite, dans cette section, spécifiez un nom à afficher et sélectionnez un type de clé Site Web. Vous devez spécifier les domaines sur lesquels votre application est hébergée. Comme vous prévoyez d'héberger l'application sur Firebase Hosting, vous utilisez le nom d'hôte par défaut, qui est généralement ${YOUR_PROJECT_ID}.web.app. Vous trouverez votre domaine d'hébergement dans la section "Hosting" de la console Firebase. Après avoir renseigné ces informations, appuyez sur OK et Créer une clé.

Une fois l'opération terminée, un ID s'affiche en haut de la page Détails de la clé.

Copiez cet ID dans votre presse-papiers. Il s'agit de la clé que vous utilisez pour App Check. Ensuite, accédez à la section App Check de la console Firebase, puis cliquez sur Commencer. Cliquez ensuite sur Register (S'inscrire), puis sur reCAPTCHA Enterprise et collez l'ID copié dans la zone de texte reCAPTCHA Enterprise Site Key (Clé de site reCAPTCHA Enterprise). Conservez les valeurs par défaut des autres paramètres. La page App Check doit se présenter comme suit :

Requêtes non validées et non appliquées

Maintenant que vous avez enregistré une clé dans la console Firebase, exécutez à nouveau votre site dans le navigateur en exécutant firebase serve. L'application Web s'exécute désormais localement, et vous pouvez recommencer à envoyer des requêtes au backend Firebase. Comme les requêtes sont envoyées au backend Firebase, elles sont surveillées par App Check, mais ne sont pas appliquées. Si vous souhaitez voir l'état des requêtes entrantes, vous pouvez accéder à la section Cloud Firestore dans l'onglet API de la page App Check de la console Firebase. Comme vous n'avez pas encore configuré le client pour qu'il utilise App Check, un message semblable à celui-ci devrait s'afficher :

Le backend reçoit 100 % de requêtes non validées. Cet écran est utile, car il montre que presque toutes les requêtes client proviennent de clients qui n'ont pas intégré App Check.

Ce tableau de bord peut indiquer plusieurs choses. La première chose qu'il peut indiquer est si toutes vos applications clientes exécutent la dernière version de votre client. Si c'est le cas, vous pouvez appliquer App Check en toute sécurité sans craindre de désactiver l'accès pour un client authentique de votre application. Cela peut également vous indiquer le nombre de tentatives d'accès à votre backend qui n'ont pas été effectuées depuis votre application. Il peut s'agir d'utilisateurs qui interrogent directement votre backend à votre insu. Puisque vous pouvez voir que les requêtes ne sont pas validées, il est temps de voir ce qui arriverait aux utilisateurs qui pourraient avoir une requête non validée vers votre backend avant de passer à la validation de leurs requêtes.

Requêtes non validées et appliquées

Appuyez sur le bouton Appliquer de l'écran précédent, puis appuyez de nouveau sur Appliquer si vous y êtes invité.

Cela commencera à appliquer App Check, qui bloquera désormais les requêtes adressées à vos services de backend qui ne sont pas validées par le fournisseur d'attestation que vous avez choisi (dans ce cas, reCAPTCHA Enterprise). Revenez à votre application Web en cours d'exécution, qui devrait être accessible à l'adresse http://localhost:5000. Lorsque vous actualisez la page et essayez d'obtenir des données de la base de données, rien ne se passe. Si vous ouvrez la console Chrome pour lire les erreurs, vous devriez voir quelque chose de semblable à ceci :

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

Cela signifie qu'App Check bloque les requêtes qui n'ont pas transmis de jeton d'attestation valide dans leurs requêtes vers vos ressources Firebase. Pour le moment, vous pouvez désactiver l'application d'App Check. Dans la section suivante, vous découvrirez comment ajouter App Check reCAPTCHA Enterprise à l'exemple Friendly Chat.

7. Ajouter une clé reCAPTCHA Enterprise au site

Nous allons ajouter la clé d'entreprise à votre application. Tout d'abord, ouvrez hosting/src/firebase-config.js et ajoutez votre clé reCAPTCHA Enterprise à l'extrait de code suivant :

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

Une fois cette opération terminée, ouvrez hosting/src/index.js. À la ligne 51, vous allez ajouter une importation depuis firebase-config.js pour récupérer votre clé reCAPTCHA, ainsi que la bibliothèque App Check pour pouvoir utiliser le fournisseur reCAPTCHA Enterprise.

// 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';

Ensuite, sur la ligne suivante, vous allez créer une fonction pour configurer App Check. La fonction vérifie d'abord si vous vous trouvez dans un environnement de développement. Si c'est le cas, elle affiche un jeton de débogage que vous pouvez utiliser pour le développement local.

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

Vous devez maintenant initialiser App Check pour qu'il fonctionne avec le fournisseur que vous avez sélectionné (dans ce cas, reCAPTCHA Enterprise). Vous devez également actualiser automatiquement votre jeton App Check en arrière-plan, ce qui évite tout retard lorsque l'utilisateur interagit avec votre service si son jeton App Check est obsolète.

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
 }

Enfin, une fois que vous vous êtes assuré que l'application est initialisée, vous devez appeler la fonction setupAppCheck que vous venez de créer. En bas du fichier hosting/src/index.js, ajoutez l'appel à la méthode que vous venez d'ajouter.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Tester d'abord en local

Testez d'abord votre application en local. Si vous ne diffusez pas déjà l'application localement, exécutez firebase serve. Vous devriez constater que l'application ne se charge toujours pas localement. En effet, vous n'avez enregistré que votre domaine Firebase auprès du fournisseur d'attestation reCAPTCHA, et non le domaine localhost. Vous ne devez jamais enregistrer localhost en tant que domaine approuvé, car cela permet aux utilisateurs d'accéder à vos backends restreints à partir d'une application exécutée localement sur leur machine. Au lieu de cela, puisque vous avez défini self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, vous devez rechercher dans votre console JavaScript une ligne semblable à celle-ci :

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.

Vous devez prendre le jeton de débogage fourni (dans l'exemple, il s'agit de 55183c20-de61-4438-85e6-8065789265be) et l'insérer dans la configuration d'App Check sous le menu à développer de votre application.

Attribuez au jeton un nom unique dont vous vous souviendrez, puis cliquez sur Enregistrer. Cette option vous permet d'utiliser un jeton généré par le client avec votre application. Il s'agit d'une alternative plus sûre que de générer un jeton de débogage et de l'intégrer à votre application. Si vous intégrez un jeton dans l'application, il pourrait être distribué accidentellement aux utilisateurs finaux, qui pourraient l'exploiter en contournant vos vérifications. Si vous souhaitez distribuer un jeton de débogage, par exemple dans un environnement d'intégration continue, consultez cette documentation pour en savoir plus sur la procédure à suivre.

Une fois le jeton de débogage enregistré dans la console Firebase, vous pouvez réactiver l'application d'App Check et vérifier que le contenu de l'application se charge localement en appelant firebase serve depuis le terminal. Les données saisies précédemment doivent être diffusées dans la version locale de l'application Web. Le message contenant le jeton de débogage doit toujours s'afficher dans la console.

Essayer en production

Une fois que vous êtes sûr qu'App Check fonctionne localement, déployez l'application Web en production. Depuis votre terminal, appelez à nouveau firebase deploy et actualisez la page. Votre application Web sera ainsi empaquetée pour s'exécuter sur Firebase Hosting. Une fois votre application hébergée sur Firebase Hosting, essayez d'y accéder à l'adresse ${YOUR_PROJECT_ID}.web.app. Vous pouvez ouvrir la console JavaScript. Le jeton de débogage ne devrait plus s'y afficher, et les discussions devraient se charger dans votre projet. De plus, après avoir interagi avec l'application pendant quelques instants, vous pouvez accéder à la section App Check de la console Firebase et vérifier que les requêtes envoyées à votre application sont toutes validées.

8. Félicitations !

Félicitations, vous avez ajouté Firebase App Check à une application Web !

Vous avez configuré la console Firebase pour gérer un jeton reCAPTCHA Enterprise pour les environnements de production et vous avez même configuré des jetons de débogage pour le développement local. Cela permet de s'assurer que vos applications peuvent toujours accéder aux ressources Firebase à partir de clients approuvés et d'empêcher toute activité frauduleuse au sein de votre application.

Étapes suivantes

Consultez la documentation suivante pour ajouter Firebase App Check à :

• Activer l'application dans Cloud Functions
• Valider les jetons App Check sur des backends personnalisés

Documents de référence

• Premiers pas avec App Check et reCAPTCHA Enterprise dans les applications Web
• Utiliser le fournisseur de débogage dans les applications Web