Atelier de programmation Web sur App Check

1. Introduction

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

Comment empêcher tout accès non autorisé à 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 qu'elles proviennent bien de votre application et bloquer le trafic sans 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 est compatible avec reCAPTCHA v3 et reCAPTCHA Enterprise en tant que fournisseurs d'attestation.

App Check peut être utilisé pour protéger les requêtes adressées à Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication avec Identity Platform, ainsi qu'aux 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 d'abord App Check, puis en l'appliquant.

Points abordés

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

Prérequis

• L'IDE/éditeur de texte de votre choix
• Le gestionnaire de packages npm, qui est généralement fourni avec Node.js
• La CLI Firebase est 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.

Le dépôt friendlychat-web contient des exemples de projets adaptés à différentes plates-formes.

Cet atelier de programmation n'utilise que ces deux dossiers :

• 📁 appcheck-start : code de départ sur lequel s'appuie cet atelier de programmation.
• 📁 appcheck : code complet de l'exemple d'application terminé.

Remarque : Si vous souhaitez exécuter l'application terminée, vous devrez créer un projet Firebase dans la console Firebase (pour savoir comment procéder, consultez la section Créer et configurer un projet Firebase de cet atelier de programmation).

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

   Ce nom de projet est utilisé comme nom à afficher dans les interfaces Firebase. Firebase crée automatiquement un ID de projet unique basé sur ce nom. Notez que vous pouvez éventuellement cliquer sur l'icône Modifier maintenant pour définir l'ID de projet de votre choix, mais vous ne pourrez plus le modifier une fois le projet créé.

   Prenez note de l'ID de votre projet, car vous en aurez besoin plus tard pour identifier votre projet Firebase dans la CLI Firebase. Si vous oubliez votre ID, vous pourrez toujours le retrouver plus tard dans les paramètres du projet.

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é à un compte de facturation Cloud et utiliser le forfait Blaze avec paiement à l'usage.

• 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 pour l'essai sans frais.
• Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

Pour passer à la formule Blaze, procédez comme suit :

1. Dans la console Firebase, sélectionnez Passer à une formule supérieure.
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 lors de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

Remarque : Vous pouvez rétrograder votre projet vers le forfait Spark sans frais une fois cet atelier de programmation terminé.

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 sous le nom "Friendly Chat", puis cochez la case Also set up Firebase Hosting for this app (Configurer également Firebase Hosting pour cette application). Cliquez sur Register app (Enregistrer l'application).
3. À l'étape suivante, vous verrez une commande permettant d'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. Vous verrez ensuite une option permettant d'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 vous permettant de vous connecter à Firebase et de déployer votre application sur Firebase Hosting s'affiche. Connectez-vous à Firebase à l'aide de la commande firebase login, puis cliquez sur Continue to Console (Accéder à la console). Vous allez déployer l'application sur Firebase Hosting lors d'une prochaine étape.

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 sur le cloud et être notifié instantanément en cas de modification des données.
• Cloud Storage for Firebase, pour sauvegarder 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 les notifications pop-up du navigateur.
• Firebase Performance Monitoring pour collecter les 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 Google Sign-In :

1. Dans la console Firebase, localisez la section Créer dans le panneau de gauche.
2. Cliquez sur Authentification, puis sur Commencer si nécessaire. Ensuite, cliquez 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 des messages de chat et en recevoir.

Voici comment configurer Cloud Firestore dans votre projet Firebase :

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Base de données Firestore.
2. Cliquez sur Créer une base de données.
3. Laissez le champ Database ID (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, choisissez 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é.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez 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 for Firebase pour stocker, importer et partager des photos.

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

1. Dans le panneau de gauche de la console Firebase, développez Créer, puis sélectionnez Stockage.
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets situés dans les régions US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres régions sont soumis aux tarifs et à l'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é.
   Dans cet atelier de programmation, vous ajouterez des règles de sécurité pour protéger vos données. Ne distribuez ni n'exposez 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 votre ID de projet, puis attribuez un alias à votre projet Firebase. Pour ce projet, vous pouvez simplement attribuer l'alias default. Vous devrez 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 nom de l'application pour laquelle vous avez besoin d'un objet de configuration.
3. Sélectionnez Config dans le volet d'extrait du SDK Firebase.
4. Copiez l'extrait d'objet de configuration, puis ajoutez-le à appcheck-start/hosting/src/firebase-config.js. Le reste de l'atelier de programmation suppose que la variable est nommée 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",
};

Le code ci-dessus doit contenir l'objet de configuration Firebase spécifique à votre application, et non les valeurs d'espace réservé.

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

firebase experiments:enable webframeworks

Cela permet la prise en charge du framework Web avec lequel ce projet a été créé.

Nous devrions être prêts à exécuter votre projet et à tester le fonctionnement du projet par défaut.

5. Essayer l'application sans App Check

Maintenant que votre application est configurée et que le SDK est installé, essayez d'utiliser l'application telle qu'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. Faites-le, puis essayez d'envoyer quelques messages et quelques photos dans le chat.

Maintenant que vous l'avez testé en local, 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 démontrer le fonctionnement d'App Check dans le monde réel, car elle nécessite la configuration d'un domaine pour le fournisseur d'attestation reCAPTCHA Enterprise.

Vous devriez pouvoir profiter des fonctionnalités par défaut de l'application. Publier des messages de chat et tout ce qui ne doit ê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 à l'étape précédente peut accéder à vos ressources de backend. Ils doivent toujours respecter les règles de sécurité en place dans vos systèmes Firestore et Cloud Storage, mais ils peuvent toujours interroger, stocker et accéder aux données qui y sont stockées.

Au cours des prochaines étapes, vous allez :

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

6. Activer App Check et l'application forcée

Commençons par récupérer une clé reCAPTCHA Enterprise pour votre projet et à l'ajouter à App Check. Commencez par accéder à la section reCAPTCHA Enterprise de la console Google Cloud. Sélectionnez votre projet, puis activez l'API reCAPTCHA Enterprise. Activez l'API et attendez quelques minutes qu'elle se termine. Cliquez ensuite sur Créer une clé à côté de Clés Enterprise. Dans cette section, spécifiez un nom à afficher et sélectionnez une clé de type Site Web. Vous devez spécifier les domaines sur lesquels votre application est hébergée. Comme vous prévoyez d'héberger cette application sur Firebase Hosting, vous utilisez le nom d'hébergement 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. Une fois ces informations renseignées, appuyez sur OK, puis sur Créer une clé.

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

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 Get Started (Premiers pas). Cliquez ensuite sur Register (Enregistrer), 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. Votre page App Check devrait se présenter comme suit :

Demandes non validées et non appliquées

Maintenant que vous avez enregistré une clé dans la console Firebase, relancez votre site dans le navigateur en exécutant firebase serve. L'application Web s'exécute désormais en local. Vous pouvez à nouveau 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 consulter l'état des requêtes entrantes, vous pouvez accéder à la section Cloud Firestore de l'onglet "API" de la page App Check dans la console Firebase. Comme vous n'avez pas encore configuré le client pour utiliser App Check, vous devriez voir quelque chose de similaire à ceci :

Le backend reçoit 100 % de requêtes non validées. Cet écran est utile, car il montre que la quasi-totalité des 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 de savoir 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 ne proviennent pas de votre application. Il peut s'agir d'utilisateurs qui interrogent votre backend directement à 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 à votre backend avant de passer à la validation de leurs requêtes.

Requêtes non validées et appliquées

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

Cela lancera l'application d'App Check. Les requêtes envoyées à vos services de backend qui ne sont pas validées par le fournisseur d'attestation choisi (reCAPTCHA Enterprise dans ce cas) seront désormais bloquées. Revenez à votre application Web en cours d'exécution, qui devrait se trouver à l'adresse http://localhost:5000. Lorsque vous actualisez la page et que vous 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 à ce qui suit :

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

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

7. Ajouter une clé reCAPTCHA Enterprise à un site

Nous allons ajouter la clé Enterprise à 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 et, à la ligne 51, ajoutez une importation depuis firebase-config.js pour récupérer votre clé reCAPTCHA et importez également la bibliothèque App Check afin de 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';

Sur la ligne suivante, vous allez créer une fonction pour configurer App Check. La fonction vérifie d'abord si vous êtes dans un environnement de développement et, le cas échéant, 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

Il est maintenant temps d'initialiser App Check pour qu'il fonctionne avec le fournisseur sélectionné (reCAPTCHA Enterprise dans ce cas). Vous souhaiterez également actualiser automatiquement votre jeton App Check en arrière-plan, ce qui évitera tout type de retard lorsque l'utilisateur interagit avec votre service au cas où son jeton App Check serait devenu 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 en local dans un premier temps

Testez d'abord votre application en local. Si vous ne diffusez pas déjà l'application en local, exécutez firebase serve. Vous devriez remarquer que l'application ne parvient toujours pas à se charger en local. En effet, vous n'avez enregistré votre domaine Firebase qu'auprès du fournisseur d'attestation reCAPTCHA, et non auprès du domaine localhost. Vous ne devez jamais enregistrer localhost comme domaine approuvé, car cela permet aux utilisateurs d'accéder à vos backends restreints à partir d'une application exécutée localement sur leur ordinateur. En revanche, 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 App Check sous le menu à trois points de votre application.

Attribuez un nom unique au jeton, 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 la génération d'un jeton de débogage et son intégration dans votre application. Si vous intégrez un jeton dans l'application, il peut être distribué accidentellement aux utilisateurs finaux, qui peuvent l'exploiter pour contourner 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 savoir comment le distribuer.

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

Essayer en production

Une fois que vous êtes satisfait du fonctionnement d'App Check en local, déployez l'application Web en production. Depuis votre terminal, appelez de nouveau firebase deploy et actualisez la page. Cette commande permet d'empaqueter votre application Web pour qu'elle s'exécute sur Firebase Hosting. Une fois votre application hébergée sur Firebase Hosting, essayez de la consulter à 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 toutes les requêtes adressées à votre application sont désormais validées.

8. Félicitations !

Félicitations, vous avez ajouté avec succès Firebase App Check à une application Web !

Vous configurez la console Firebase pour qu'elle gère un jeton reCAPTCHA Enterprise pour les environnements de production et vous pouvez même configurer des jetons de débogage pour le développement local. Cela permet à vos applications d'accéder aux ressources Firebase à partir de clients approuvés et d'empêcher les activités frauduleuses au sein de votre application.

Étapes suivantes

Consultez la documentation suivante pour ajouter Firebase App Check à :

• Activer l'application des règles dans Cloud Functions
• Valider les jetons App Check sur les 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