Atelier de programmation Web sur App Check

1. Introduction

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

Comment pouvez-vous 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 backend en exigeant que les requêtes entrantes soient accompagnées d'une attestation indiquant qu'elles proviennent de votre application légitime et en bloquant 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, Firebase 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 d'abord, puis en appliquant App Check.

L'application de chat de démarrage que vous créez.

Points abordés

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

Prérequis

  • L'IDE/l'éditeur de texte de votre choix
  • Le gestionnaire de paquets npm, 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émarrage

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

3. Créer et configurer un projet Firebase

Créer un projet Firebase

  1. Connectez-vous à Firebase.
  2. Dans la console Firebase, cliquez sur "Ajouter un projet", puis nommez votre projet Firebase "FriendlyChat". Prenez note de l'ID de votre projet Firebase.
  3. Décochez "Activer Google Analytics pour ce projet".
  4. Cliquez sur "Créer un projet".

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 en cas de modification des données
  • 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 les notifications pop-up du 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.

Passer à un forfait Firebase supérieur

Pour utiliser Cloud Storage for Firebase, votre projet Firebase doit être associé au forfait Blaze avec paiement à l'usage, 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 pouvez bénéficier d'un crédit de 300$et d'un compte de facturation Cloud en essai sans frais.
  • Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur s'il existe des crédits Cloud disponibles.

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

  1. Dans la console Firebase, sélectionnez l'option 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 migration, vous devrez peut-être revenir au flux de migration dans la console Firebase pour la terminer.

Ajouter une application Web Firebase au projet

  1. Cliquez sur l'icône Web 58d6543a156e56f9.png 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 un objet de configuration. Vous copierez cet objet plus tard dans l'atelier de programmation. Pour l'instant, appuyez sur Suivant.

Fenêtre "Ajouter Firebase à votre application Web"

  1. 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).
  2. Vous pouvez ensuite vous connecter à Firebase et déployer votre application sur Firebase Hosting. Connectez-vous à Firebase à l'aide de la commande firebase login, puis cliquez sur Continue to Console (Accéder à la console). Vous allez déployer sur Firebase Hosting lors d'une prochaine étape.

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 Authentication (Authentification), sur Get Started (Commencer) si nécessaire, puis sur l'onglet Sign-in Method (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" et sélectionnez une adresse e-mail d'assistance pour le projet dans le menu déroulant.
  5. Cliquez sur Enregistrer.

f96888973c3d00cc.png

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 Build (Compilation), puis sélectionnez Firestore database (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é.
    Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à 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 Build (Compilation), puis sélectionnez Storage (Stockage).
  2. Cliquez sur Commencer.
  3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
    Les buckets dans 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 zones géographiques 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é.
    Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre bucket Storage.
  5. Cliquez sur Créer.

4. Configurer Firebase

Dans le 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 devez ensuite configurer votre projet local pour qu'il fonctionne avec Firebase.

  1. Accédez aux paramètres du projet dans la console Firebase.
  2. Dans la fiche "Vos applications", sélectionnez le surnom de l'application pour laquelle vous avez besoin d'un objet de configuration.
  3. Sélectionnez Config (Configuration) dans le volet de l'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 part du principe 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",
};

Dans le même répertoire appcheck-start, appelez:

firebase experiments:enable webframeworks

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

Vous devriez maintenant être prêt à exécuter votre projet et à vérifier qu'il fonctionne.

5. Tester l'application sans App Check

Maintenant que vous avez configuré votre application et le SDK, essayez de l'utiliser comme elle a été conçue à l'origine. Commencez par installer toutes les dépendances. Dans votre terminal, accédez au répertoire appcheck-start/hosting. Dans ce répertoire, exécutez npm install. Toutes les dépendances nécessaires au fonctionnement de votre projet sont récupérées. 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 montrer comment App Check fonctionne dans la pratique, car elle nécessite de configurer un domaine pour le fournisseur d'attestation reCAPTCHA Enterprise.

Nous espérons que vous profitez de la fonctionnalité 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 de l'étape précédente peut accéder à vos ressources 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
  • Appliquer les règles

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

Commençons par obtenir 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 vous êtes invité à activer l'API reCAPTCHA Enterprise. Activez l'API et attendez quelques minutes qu'elle soit terminée. Cliquez ensuite sur Créer une clé à côté de Clés d'entreprise. Dans cette section, spécifiez un nom à afficher, puis 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 de l'héberger 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 Hébergement de la console Firebase. Une fois ces informations renseignées, appuyez sur OK, puis sur Créer une clé.

Écran de création de clé reCAPTCHA

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

Fenêtre d'enregistrement reCAPTCHA Enterprise

Copiez cet ID dans le presse-papiers. Il s'agit de la clé que vous utilisez pour App Check. Accédez ensuite à la section App Check (Vérification de l'application) de la console Firebase, puis cliquez sur Get Started (Premiers pas). Cliquez ensuite sur Enregistrer, puis sur reCAPTCHA Enterprise, puis collez l'ID dans la zone de texte de la clé de site reCAPTCHA Enterprise. Conservez les autres paramètres par défaut. Votre page App Check devrait se présenter comme suit:

Fenêtre des applications App Check dans laquelle vous enregistrez votre jeton reCAPTCHA Enterprise

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

Maintenant que vous avez une clé enregistrée dans la console Firebase, revenez à l'exécution de votre site dans le navigateur en exécutant firebase serve. L'application Web s'exécute maintenant localement, et vous pouvez à nouveau envoyer des requêtes au backend Firebase. Comme les requêtes ne respectent pas le backend Firebase, elles sont surveillées par App Check, mais ne sont pas appliquées. Si vous souhaitez connaître l'état des requêtes reçues, vous pouvez accéder à la section Cloud Firestore dans l'onglet "API" de la page "Vérification de l'application" de la console Firebase. Comme vous n'avez pas encore configuré le client pour utiliser App Check, vous devriez voir un message semblable à celui-ci:

Tableau de bord App Check affichant 100% de requêtes client non validées pour votre application

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 vous soucier de désactiver l'accès pour un client légitime de votre application. Vous pouvez également voir le nombre de tentatives d'accès à votre backend qui ne proviennent pas de votre application. Il peut s'agir d'utilisateurs qui interrogent directement votre backend à votre insu. Comme vous pouvez constater que les requêtes ne sont pas validées, il est temps de voir ce qui se passe pour les utilisateurs qui peuvent envoyer une requête non validée à votre backend avant de valider leurs requêtes.

Requêtes non validées et appliquées

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

Tableau de bord des métriques non validées avec le bouton "Appliquer" mis en évidence

App Check sera alors appliqué et bloquera les requêtes envoyées à vos services backend qui ne sont pas validées par le fournisseur d'attestation de votre choix (dans ce cas, reCAPTCHA Enterprise). Revenez à votre application Web en cours d'exécution, qui devrait s'exécuter sur http://localhost:5000. Lorsque vous actualisez la page et que vous essayez d'obtenir des données à partir 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 comme ceci:

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

Il s'agit d'un blocage par App Check des 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 allez découvrir comment ajouter App Check reCAPTCHA Enterprise à l'exemple de Friendly Chat.

7. Ajouter une clé reCAPTCHA Enterprise à un site

Nous allons ajouter la clé d'entreprise à votre application. Commencez par ouvrir 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 à partir de firebase-config.js pour récupérer votre clé reCAPTCHA, puis importez la bibliothèque App Check afin de pouvoir travailler avec 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 vous trouvez dans un environnement de développement. Si c'est le cas, elle imprime 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é, à savoir reCAPTCHA Enterprise. Vous devez ensuite actualiser automatiquement votre jeton App Check en arrière-plan, ce qui évitera tout type de retard dans l'interaction de l'utilisateur 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 en local dans un premier temps

Commencez par tester votre application en local. Si vous ne diffusez pas déjà l'application en local, exécutez firebase serve. Vous devriez constater que l'application ne parvient toujours pas à se charger en local. 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. Étant donné que vous avez défini self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, vous devez rechercher dans la 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 le brancher dans la configuration de vérification de l'application dans le menu à développer de votre application.

Tableau de bord App Check indiquant l'emplacement de la section "Gérer les jetons de débogage"

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 insérez un jeton dans l'application, il risque d'être distribué accidentellement aux utilisateurs finaux, qui pourraient l'exploiter pour contourner vos vérifications. Si vous souhaitez distribuer un jeton de débogage, par exemple dans un environnement de CI, consultez cette documentation pour savoir comment le distribuer.

Exemple de remplissage du jeton de débogage avec un alias

Une fois le jeton de débogage enregistré dans la console Firebase, vous pouvez réactiver l'application de contrôle et vérifier que le contenu de l'application se charge localement en appelant firebase serve à partir du terminal. Les données précédemment saisies devraient ê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 convaincu 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 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 "Vérification de l'application" de la console Firebase et vérifier que toutes les requêtes envoyées à votre application sont désormais validées.

8. Félicitations !

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

Vous configurez la console Firebase pour gérer un jeton reCAPTCHA Enterprise pour les environnements de production, et même pour configurer des jetons de débogage pour le développement local. Cela garantit que vos applications peuvent toujours accéder aux ressources Firebase à partir de clients approuvés et empêche toute activité frauduleuse de se produire dans votre application.

Étapes suivantes

Consultez la documentation suivante pour ajouter Firebase App Check à:

Documents de référence