Atelier de programmation Web App Check

1. Introduction

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

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 demandes entrantes soient accompagnées d'une attestation indiquant que la demande provient de votre véritable application 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 prend en charge 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, à la base de données en temps réel, aux fonctions Cloud, à l'authentification Firebase avec Identity Platform et aux backends que vous hébergez vous-même.

Ce que vous construirez

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

Ce que vous apprendrez

• Comment surveiller votre backend pour tout accès non autorisé
• Comment ajouter une application à Firestore et Cloud Storage
• Comment exécuter votre application avec un jeton de débogage pour le développement local

Ce dont vous aurez besoin

• 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 installée et configurée pour fonctionner avec votre compte
• Un terminal/console
• Un navigateur de votre choix, tel que Chrome
• Exemple de code de l'atelier de programmation (consultez l'étape suivante de l'atelier de programmation pour savoir comment obtenir le code.)

2. Obtenez 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

Alternativement, si Git n'est pas installé, vous pouvez télécharger le référentiel sous forme de fichier ZIP .

Importer l'application de démarrage

À l'aide de votre IDE, ouvrez ou importez le répertoire 📁 appcheck-start à partir du référentiel cloné. Ce 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 complété pour l'atelier de programmation.

3. Créez et configurez 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. N'oubliez pas 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 les produits Firebase disponibles pour les applications Web :

• Authentification Firebase pour permettre à vos utilisateurs de se connecter facilement à votre application.
• Cloud Firestore pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée lorsque les données changent.
• Cloud Storage pour Firebase pour enregistrer des fichiers dans le cloud.
• Firebase Hosting pour héberger et servir vos actifs.
• Firebase Cloud Messaging pour envoyer des notifications push et afficher les notifications contextuelles du navigateur.
• Firebase Performance Monitoring pour collecter des données de performances utilisateur pour votre application.

Certains de ces produits nécessitent une configuration spéciale ou doivent être activés à l'aide de la console Firebase.

Ajouter une application Web Firebase au projet

1. Cliquez sur l'icône Web pour créer une nouvelle application Web Firebase.
2. Enregistrez l'application avec le surnom Friendly Chat, puis cochez la case à côté de Configurer également l'hébergement Firebase 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. Ensuite, vous voyez une option pour installer la CLI Firebase. Si vous ne l'avez pas déjà installé, faites-le maintenant en utilisant la commande npm install -g firebase-tools . Cliquez ensuite sur Suivant .
5. Ensuite, vous voyez une option pour vous connecter à Firebase et déployer sur l'hébergement Firebase. Allez-y et connectez-vous à Firebase à l'aide de la commande firebase login , puis cliquez sur Continue to Console . Vous déployez sur l'hébergement Firebase dans une étape ultérieure.

Activer la connexion Google pour l'authentification Firebase

Pour permettre aux utilisateurs de se connecter à l'application Web avec leurs comptes Google, nous utiliserons la méthode de connexion Google.

Vous devrez activer Google Sign-in :

1. Dans la console Firebase, localisez la section Build dans le panneau de gauche.
2. Cliquez sur Authentification , cliquez sur Commencer le cas échéant, puis 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 et choisissez un e-mail d'assistance au projet dans le menu déroulant.
5. Cliquez sur Enregistrer

Activer Cloud Firestore

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

Vous devrez activer Cloud Firestore :

1. Dans la section Build de la console Firebase, cliquez sur Firestore Database .
2. Cliquez sur Créer une base de données dans le volet Cloud Firestore.

3. Sélectionnez l'option Démarrer en mode test , puis cliquez sur Suivant après avoir lu l'avertissement concernant les règles de sécurité.

Le mode test garantit que vous pouvez écrire librement dans la base de données pendant le développement. Vous avez déjà des règles de sécurité écrites pour vous dans le code de démarrage. Vous les utiliserez pour cet atelier de programmation.

4. Définissez l'emplacement où vos données Cloud Firestore sont stockées. Vous pouvez laisser cela par défaut ou choisir une région proche de chez vous. Cliquez sur Activer pour provisionner Firestore.

Activer le stockage cloud

L'application Web utilise Cloud Storage pour Firebase pour stocker, télécharger et partager des images.

Vous devrez activer Cloud Storage :

1. Dans la section Build de la console Firebase, cliquez sur Storage .
2. S'il n'y a pas de bouton Commencer , cela signifie que Cloud Storage est déjà activé et que vous n'avez pas besoin de suivre les étapes ci-dessous.
3. Cliquez sur Commencer .
4. Sélectionnez l'option Démarrer en mode test , puis cliquez sur Suivant après avoir lu l'avertissement concernant les règles de sécurité.

Avec les règles de sécurité par défaut, tout utilisateur authentifié peut écrire n'importe quoi sur Cloud Storage. Nous déploierons les règles de sécurité déjà écrites pour nous plus tard dans cet atelier de programmation.

5. L'emplacement Cloud Storage est présélectionné avec la même région que celle que vous avez choisie pour votre base de données Cloud Firestore. Cliquez sur Terminé pour terminer la configuration.

4. Configurer Firebase

Depuis 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 donner un alias de default . Ensuite, vous devrez 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 d'extraits du SDK Firebase.
4. Copiez l'extrait de l'objet de configuration, puis ajoutez-le à appcheck-start/hosting/src/firebase-config.js . Le reste de l'atelier de programmation suppose 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.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

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

firebase experiments:enable webframeworks

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

Nous devrions maintenant être tous prêts à exécuter votre projet et à tester que le projet par défaut fonctionne !

5. Essayez l'application sans App Check

Maintenant que votre application et le SDK sont configurés, essayez d'utiliser l'application telle qu'elle a été conçue à l'origine. Tout d’abord, 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 . Cela récupère toutes les dépendances pour que votre projet fonctionne. 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 de publier quelques messages de discussion et quelques photos sur 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 constitue une étape cruciale dans la démonstration du 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.

J'espère que vous bénéficiez de la fonctionnalité par défaut fournie par l'application. Publier des messages de discussion et tout ce qui ne devrait être fait qu'à partir d'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 backend. Ils doivent toujours obéir aux règles de sécurité mises en place par vos systèmes Firestore et Cloud Storage, mais sinon, ils peuvent toujours interroger, stocker et accéder aux données qui y sont stockées.

Dans les prochaines étapes, vous allez :

• S'inscrire à la vérification des applications
• Valider l'application
• Commencer à appliquer les règles

6. Activez App Check et son application

Commençons par récupérer une clé d'entreprise reCAPTCHA pour votre projet et l'ajouter à App Check. Vous commencez par visiter la section reCAPTCHA Enterprise de Google Cloud Console. Sélectionnez votre projet, puis vous êtes invité à activer 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 d'entreprise . Ensuite, dans cette section, spécifiez un nom d'affichage et sélectionnez une clé de type de site Web . Vous devez spécifier les domaines sur lesquels votre application est hébergée. Puisque vous envisagez d'héberger ceci sur Firebase Hosting, vous utilisez le nom d'hébergement par défaut qui est généralement ${YOUR_PROJECT_ID}.web.app . Vous pouvez trouver votre domaine d'hébergement dans la section Hébergement de la console Firebase. Après avoir rempli ces informations, appuyez sur Terminé et Créer une clé .

Une fois terminé, vous voyez un identifiant en haut de la page Détails de la clé .

Allez-y et copiez cet identifiant dans votre presse-papiers. Il s'agit de la clé que vous utilisez pour App Check. Ensuite, visitez la partie App Check de la console Firebase et cliquez sur Get Started . Ensuite, cliquez sur S'inscrire , puis cliquez sur reCAPTCHA Enterprise et placez l'ID copié dans la zone de texte de la clé de site reCAPTCHA Enterprise . Laissez le reste des paramètres par défaut. Votre page App Check devrait ressembler à ceci :

Demandes non vérifiées et non exécutées

Maintenant que vous disposez d'une clé enregistrée dans la console Firebase, revenez à l'exécution de votre site dans le navigateur en exécutant firebase serve . Ici, l'application Web s'exécute localement et vous pouvez recommencer à faire des requêtes sur le backend Firebase. Étant donné que les requêtes vont à l'encontre du backend Firebase, ces requêtes sont surveillées par App Check mais ne sont pas appliquées. Si vous souhaitez voir l'état des demandes qui arrivent, vous pouvez visiter la section Cloud Firestore dans l' onglet API de la page App Check dans la console Firebase. Puisque 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 vérifiées. Cet écran est utile car il montre que presque toutes les demandes des clients 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 tel est le cas, vous pouvez appliquer App Check en toute sécurité sans vous soucier de désactiver l’accès pour un client authentique de votre application. L'autre chose que cela peut vous indiquer est le nombre de tentatives d'accès à votre backend sans provenir de votre application. Il peut s'agir d'utilisateurs qui interrogent directement votre backend à votre insu. Puisque vous pouvez voir que les demandes ne sont pas vérifiées, il est temps de voir ce qui arriverait aux utilisateurs qui pourraient avoir une demande non vérifiée auprès de votre backend avant de passer à la vérification de leurs demandes.

Demandes non vérifiées et appliquées

Allez-y et appuyez sur le bouton Appliquer de l’écran précédent, puis appuyez à nouveau sur Appliquer si vous y êtes invité.

Cela commencera à appliquer App Check ; il bloquera désormais les demandes adressées à vos services backend qui ne sont pas vérifiées via le fournisseur d'attestation que vous avez choisi (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 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 similaire à ce qui suit :

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

Il s'agit des requêtes bloquantes App Check qui n'ont pas transmis un jeton d'attestation valide dans leurs requêtes adressées à vos ressources Firebase. Pour le moment, vous pouvez désactiver l'application de l'App Check et, dans la section suivante, vous examinerez comment ajouter reCAPTCHA Enterprise App Check à l'exemple de chat amical.

7. Ajoutez la clé reCAPTCHA Enterprise au site

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

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

Une fois cela terminé, ouvrez hosting/src/index.js et à la ligne 51, vous allez ajouter une importation depuis firebase-config.js pour récupérer votre clé reCAPTCHA et également importer la bibliothèque App Check afin de pouvoir travailler avec le reCAPTCHA Fournisseur d'entreprise.

// 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érifiera d'abord si vous êtes dans un environnement de développement et si tel est le cas, imprimera un jeton de débogage que vous pourrez 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é : dans ce cas, il s'agit de reCAPTCHA Enterprise. Vous souhaiterez alors également actualiser automatiquement votre jeton App Check en arrière-plan, ce qui empêcherait tout type de retard de la part de l'utilisateur interagissant avec votre service dans le 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 alors appeler la fonction setupAppCheck que vous venez de créer. Au bas du fichier hosting/src/index.js , ajoutez l'appel à votre méthode récemment ajoutée.

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

Testez d'abord localement

Testez d'abord votre application localement. Si vous ne servez pas déjà l'application localement, exécutez firebase serve . Vous devriez remarquer que l'application ne parvient toujours pas à se charger localement. En effet, vous avez enregistré votre domaine Firebase uniquement auprès du fournisseur d'attestation reCAPTCHA et non auprès du 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 ordinateur. Au lieu de cela, puisque vous définissez self.FIREBASE_APPCHECK_DEBUG_TOKEN = true , vous souhaiterez rechercher dans votre console JavaScript une ligne ressemblant à ceci :

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 souhaiterez 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 App Check sous le menu de débordement de votre application.

Donnez au jeton un nom unique dont vous vous souviendrez et cliquez sur Enregistrer . Cette option vous permet d'utiliser un jeton généré par le client avec votre application, ce qui constitue une alternative plus sûre que de générer un jeton de débogage et de l'intégrer dans votre application. L'intégration d'un jeton dans l'application pourrait le distribuer accidentellement aux utilisateurs finaux, et ces utilisateurs finaux pourraient l'exploiter en contournant vos contrôles. Si vous souhaitez distribuer un jeton de débogage, par exemple, dans un environnement CI, lisez cette documentation pour en savoir plus sur la façon de le distribuer.

Une fois que vous avez enregistré le jeton de débogage dans la console Firebase, vous pouvez alors réactiver l'application de App Check et tester que le contenu de l'application se charge localement en appelant firebase serve depuis le terminal. Vous devriez voir les données précédemment saisies être diffusées dans la version locale de l'application Web. Vous devriez toujours voir le message avec le jeton de débogage imprimé sur la console.

Essayez-le en production

Une fois que vous êtes convaincu qu’App Check fonctionne localement, déployez l’application Web en production. Depuis votre terminal, appelez firebase deploy à nouveau et rechargez la page. Cela conditionnera votre application Web pour qu'elle s'exécute sur Firebase Hosting. Une fois votre application hébergée sur Firebase Hosting, essayez de visiter votre application sur ${YOUR_PROJECT_ID}.web.app . Vous pouvez ouvrir la console JavaScript et ne devriez plus y voir le jeton de débogage imprimé ni voir les discussions se charger dans votre projet. De plus, après avoir interagi avec l'application pendant quelques instants, vous pouvez ensuite visiter la section App Check de la console Firebase et valider que les requêtes adressées à votre application sont toutes en cours de vérification.

8. Félicitations !

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

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

Et après?

Consultez la documentation suivante pour ajouter Firebase App Check à :

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

Documents de référence

• Commencez à utiliser App Check avec reCAPTCHA Enterprise dans les applications Web
• Utiliser le fournisseur de débogage dans les applications Web