Atelier de programmation Web Cloud Firestore

1. Présentation

Objectifs

Dans cet atelier de programmation, vous allez créer une application Web de recommandation de restaurants utilisant Cloud Firestore.

Points abordés

• Lire et écrire des données dans Cloud Firestore à partir d'une application Web
• Écouter les modifications apportées aux données Cloud Firestore en temps réel
• Utiliser Firebase Authentication et les règles de sécurité pour sécuriser des données Cloud Firestore
• Écrire des requêtes Cloud Firestore complexes

Prérequis

Avant de commencer cet atelier de programmation, assurez-vous d'avoir installé les éléments suivants:

• npm, qui est généralement fourni avec Node.js (version 16 ou ultérieure recommandée)
• L'IDE/éditeur de texte de votre choix, tel que WebStorm, VS Code ou Sublime

Remarque: Bien que Node.js soit nécessaire pour exécuter et tester notre application pendant le développement, l'application finale ne dépendra pas de Node.js.

2. Créer et configurer un projet Firebase

Créer un projet Firebase

1. Dans la console Firebase, cliquez sur Ajouter un projet, puis nommez le projet Firebase FriendlyEats.

Mémorisez l'ID de votre projet Firebase.

2. Cliquez sur Create Project (Créer un projet).

Important: Votre projet Firebase s'appellera FriendlyEats, mais Firebase lui attribue automatiquement un ID de projet unique au format friendlyeats-1234. Cet identifiant unique correspond à la façon dont votre projet est réellement identifié (y compris dans la CLI), tandis que FriendlyEats est simplement un nom à afficher.

L'application que nous allons créer utilise quelques services Firebase disponibles sur le Web:

• Firebase Authentication, pour identifier facilement vos utilisateurs
• Cloud Firestore, pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée en cas de mise à jour des données
• Firebase Hosting, pour héberger et diffuser vos éléments statiques

Pour cet atelier de programmation spécifique, nous avons déjà configuré Firebase Hosting. Toutefois, pour Firebase Auth et Cloud Firestore, nous allons vous expliquer comment configurer et activer les services à l'aide de la console Firebase.

Activer l'authentification anonyme

Bien que cet aspect ne soit pas l'objectif principal de cet atelier de programmation, il est important d'avoir une forme d'authentification dans notre application. Nous utiliserons une connexion anonyme, ce qui signifie que l'utilisateur sera automatiquement connecté sans être invité à fournir ses identifiants.

Vous devez activer la connexion anonyme.

1. Dans la console Firebase, localisez la section Créer dans le panneau de navigation de gauche.
2. Cliquez sur Authentication (Authentification), puis sur l'onglet Sign-in Method (Méthode de connexion) (ou cliquez ici pour y accéder directement).
3. Activez le fournisseur de connexion Anonyme, puis cliquez sur Enregistrer.

Cela permettra à l'application de connecter les utilisateurs à l'application Web sans leur demander leurs identifiants. Pour en savoir plus, consultez la documentation sur l'authentification anonyme.

Activer Cloud Firestore

L'application utilise Cloud Firestore pour enregistrer et recevoir des informations et des notes sur un restaurant.

Vous devez activer Cloud Firestore. Dans la section Build de la console Firebase, cliquez sur Firestore Database (Base de données Firestore). Cliquez sur Créer une base de données dans le volet Cloud Firestore.

L'accès aux données dans Cloud Firestore est contrôlé par des règles de sécurité. Nous reviendrons sur les règles plus tard dans cet atelier de programmation, mais nous devons d'abord définir quelques règles de base sur nos données pour commencer. Dans l'onglet Rules (Règles) de la console Firebase, ajoutez les règles suivantes, puis cliquez sur Publish (Publier).

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Nous aborderons ces règles et leur fonctionnement plus tard dans l'atelier de programmation.

3. Obtenir l'exemple de code

Clonez le dépôt GitHub à partir de la ligne de commande:

git clone https://github.com/firebase/friendlyeats-web

L'exemple de code doit avoir été cloné dans le répertoire 📁friendlyeats-web. À partir de maintenant, assurez-vous d'exécuter toutes vos commandes à partir de ce répertoire:

cd friendlyeats-web/vanilla-js

Importer l'application de démarrage

Dans votre IDE (WebStorm, Atom, Sublime, Visual Studio Code, etc.), ouvrez ou importez le répertoire 📁friendlyeats-web. Ce répertoire contient le code de départ de l'atelier de programmation, qui correspond à une application de recommandation de restaurants non fonctionnelle. Nous allons la rendre fonctionnelle au cours de cet atelier de programmation. Vous devrez donc modifier le code de ce répertoire prochainement.

4. Installer l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet de diffuser votre application Web en local et de la déployer sur Firebase Hosting.

Remarque: Pour installer la CLI, vous devez installer npm, généralement fourni avec NodeJS.

1. Installez la CLI en exécutant la commande npm suivante:

npm -g install firebase-tools

Un problème de fonctionnement ? Vous devrez peut-être modifier les autorisations npm.

2. Exécutez la commande suivante pour vérifier que la CLI a été installée correctement:

firebase --version

Assurez-vous que la version de la CLI Firebase est la version 7.4.0 ou ultérieure.

3. Autorisez la CLI Firebase en exécutant la commande suivante:

firebase login

Nous avons configuré le modèle d'application Web pour extraire la configuration de votre application pour Firebase Hosting à partir de son répertoire et de ses fichiers locaux. Pour ce faire, nous devons associer votre application à votre projet Firebase.

4. Assurez-vous que votre ligne de commande accède au répertoire local de votre application.
5. Pour associer votre application à votre projet Firebase, exécutez la commande suivante:

firebase use --add

6. Lorsque vous y êtes invité, sélectionnez votre ID de projet, puis attribuez un alias à votre projet Firebase.

Un alias est utile si vous disposez de plusieurs environnements (production, préproduction, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias default.

7. Suivez le reste des instructions dans votre ligne de commande.

5. Exécuter le serveur local

Nous sommes prêts à commencer à travailler sur notre application. Exécutons notre application en local.

1. Exécutez la commande CLI Firebase suivante:

firebase emulators:start --only hosting

2. Votre ligne de commande doit afficher la réponse suivante:

hosting: Local server: http://localhost:5000

Nous utilisons l'émulateur Firebase Hosting pour diffuser notre application localement. L'application Web doit maintenant être disponible à l'adresse http://localhost:5000.

3. Ouvrez votre application à l'adresse http://localhost:5000.

Votre copie de FriendlyEats, qui a été associée à votre projet Firebase, devrait s'afficher.

L'application s'est automatiquement connectée à votre projet Firebase, puis vous a connecté automatiquement en tant qu'utilisateur anonyme.

6. Écrire des données dans Cloud Firestore

Dans cette section, nous allons écrire des données dans Cloud Firestore afin de renseigner l'UI de l'application. Vous pouvez effectuer cette opération manuellement via la console Firebase, mais nous allons le faire dans l'application elle-même pour vous montrer comment écrire dans Cloud Firestore.

Modèle de données

Les données Firestore sont divisées en collections, documents, champs et sous-collections. Nous allons stocker chaque restaurant sous forme de document dans une collection de premier niveau appelée restaurants.

Nous stockerons ensuite chaque avis dans une sous-collection appelée ratings sous chaque restaurant.

Conseil: Pour en savoir plus sur le modèle de données Firestore, consultez la documentation sur les documents et les collections.

Ajouter des restaurants à Firestore

Le principal objet de modèle de notre application est un restaurant. Écrivons du code pour ajouter un document "restaurant" à la collection restaurants.

1. Dans vos fichiers téléchargés, ouvrez scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.addRestaurant.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Le code ci-dessus ajoute un document à la collection restaurants. Les données du document proviennent d'un objet JavaScript simple. Pour ce faire, nous obtenons d'abord une référence à une collection Cloud Firestore restaurants, puis nous ajoutons (add) les données.

Ajoutons des restaurants !

1. Revenez à l'application FriendlyEats dans votre navigateur et actualisez-la.
2. Cliquez sur Ajouter des données fictives.

L'application génère automatiquement un ensemble aléatoire d'objets restaurant, puis appelle votre fonction addRestaurant. Toutefois, les données ne s'afficheront pas dans votre application Web actuelle, car vous devez toujours mettre en œuvre la récupération des données (la section suivante de l'atelier de programmation y est consacrée).

Si vous accédez à l'onglet Cloud Firestore dans la console Firebase, les nouveaux documents devraient s'afficher dans la collection restaurants.

Félicitations ! Vous venez d'écrire des données dans Cloud Firestore à partir d'une application Web.

Dans la section suivante, vous allez apprendre à récupérer des données dans Cloud Firestore pour les afficher dans votre application.

7. Afficher les données de Cloud Firestore

Dans cette section, vous allez apprendre à récupérer des données depuis Cloud Firestore pour les afficher dans votre application. Les deux étapes clés sont la création d'une requête et l'ajout d'un écouteur d'instantanés. Cet écouteur sera informé de toutes les données existantes correspondant à la requête et recevra des mises à jour en temps réel.

Commençons par créer la requête qui diffusera la liste de restaurants par défaut et non filtrée.

1. Revenez au fichier scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.getAllRestaurants.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Dans le code ci-dessus, nous créons une requête qui récupère jusqu'à 50 restaurants dans la collection de premier niveau nommée restaurants, classés en fonction de leur note moyenne (égale à zéro pour tous actuellement). Après avoir déclaré cette requête, nous la transmettons à la méthode getDocumentsInQuery(), qui est chargée de charger et d'afficher les données.

Pour ce faire, nous allons ajouter un écouteur d'instantané.

1. Revenez au fichier scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.getDocumentsInQuery.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

Dans le code ci-dessus, query.onSnapshot déclenche son rappel chaque fois que le résultat de la requête change.

• La première fois, le rappel est déclenché avec l'ensemble de résultats complet de la requête, c'est-à-dire l'ensemble de la collection restaurants de Cloud Firestore. Il transmet ensuite tous les documents individuels à la fonction renderer.display.
• Lorsqu'un document est supprimé, change.type est égal à removed. Dans ce cas, nous allons appeler une fonction qui supprime le restaurant de l'UI.

Maintenant que vous avez mis en œuvre les deux méthodes, actualisez l'application et vérifiez que les restaurants affichés précédemment dans la console Firebase s'affichent bien dans l'application. Si vous n'avez pas fait d'erreur dans cette section, votre application lit et écrit désormais des données avec Cloud Firestore.

À mesure que votre liste de restaurants change, cet écouteur continuera de s'actualiser automatiquement. Essayez d'accéder à la console Firebase afin de supprimer manuellement un restaurant ou d'en modifier le nom. Ces modifications s'affichent immédiatement sur votre site.

Remarque: Il est également possible de récupérer des documents depuis Cloud Firestore en une fois, plutôt qu'au moyen d'une écoute en temps réel des actualisations à l'aide de la méthode Query.get().

8. Données Get()

Jusqu'à présent, nous vous avons montré comment utiliser onSnapshot pour récupérer les mises à jour en temps réel. Cependant, cette approche ne convient pas à toutes les situations. Il peut parfois être plus judicieux de ne récupérer les données qu'une seule fois.

Nous allons implémenter une méthode déclenchée lorsqu'un utilisateur clique sur un restaurant spécifique dans votre application.

1. Revenez au fichier scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.getRestaurant.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Une fois cette méthode implémentée, vous pourrez afficher les pages de chaque restaurant. Il vous suffit de cliquer sur un restaurant de la liste pour afficher sa page d'informations:

Pour le moment, vous ne pouvez pas ajouter de notes, car nous devons encore implémenter cette fonctionnalité plus tard dans l'atelier de programmation.

9. Trier et filtrer des données

Actuellement, notre application affiche la liste des restaurants, mais l'utilisateur ne peut pas la filtrer en fonction de ses besoins. Dans cette section, vous allez utiliser les fonctionnalités avancées de requête avancée de Cloud Firestore pour activer le filtrage.

Voici un exemple de requête simple permettant de récupérer tous les restaurants de la catégorie Dim Sum:

var filteredQuery = query.where('category', '==', 'Dim Sum')

Comme son nom l'indique, la méthode where() limite les téléchargements déclenchés par la requête aux membres de la collection dont les champs correspondent aux restrictions que nous avons définies. Dans ce cas, il ne télécharge que les restaurants dont l'attribut category est Dim Sum.

Dans notre application, l'utilisateur peut combiner plusieurs filtres pour créer des requêtes spécifiques, telles que "Pizza à San Francisco" ou "Fruits de mer à Los Angeles par ordre de popularité".

Nous allons créer une méthode qui génère une requête qui filtrera nos restaurants en fonction de plusieurs critères sélectionnés par nos utilisateurs.

1. Revenez au fichier scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.getFilteredRestaurants.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

Le code ci-dessus ajoute plusieurs filtres where et une seule clause orderBy afin de générer une requête complexe en fonction des entrées utilisateur. Notre requête ne renverra désormais que les restaurants qui correspondent aux besoins de l'utilisateur.

Actualisez l'application FriendlyEats dans votre navigateur, puis vérifiez que vous pouvez filtrer les résultats par prix, par ville et par catégorie. Au cours de la phase de test, les erreurs qui s'afficheront dans la console JavaScript de votre navigateur se présentent ainsi:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

Ces erreurs sont dues au fait que Cloud Firestore nécessite une indexation préalable pour la plupart des requêtes complexes. Le fait d'exiger une indexation sur les requêtes permet à Cloud Firestore à'être rapide à grande échelle.

L'ouverture du lien à partir du message d'erreur entraîne l'ouverture automatique de l'interface utilisateur de création d'index dans la console Firebase avec les paramètres corrects renseignés. Dans la section suivante, nous allons écrire et déployer les index nécessaires à cette application.

10. Déployer des index

Si nous ne souhaitons pas explorer toutes les options de notre application et suivre chaque lien de création d'index, nous pouvons facilement déployer plusieurs index à la fois à l'aide de la CLI Firebase.

1. Dans le répertoire local téléchargé de votre application, vous trouverez un fichier firestore.indexes.json.

Ce fichier décrit tous les index nécessaires pour toutes les combinaisons possibles de filtres.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}

2. Déployez ces index à l'aide de la commande suivante:

firebase deploy --only firestore:indexes

Après quelques minutes, vos index seront opérationnels et les messages d'erreur disparaîtront.

Conseil: Pour en savoir plus sur les index dans Cloud Firestore, consultez la documentation.

11. Écrire des données dans une transaction

Dans cette section, nous allons donner aux utilisateurs la possibilité d'envoyer des avis sur des restaurants. Jusqu'à présent, toutes nos écritures étaient indépendantes et relativement simples. En cas d'erreur, il vous suffisait de demander à l'utilisateur de réessayer l'écriture, à moins que l'application ne le fasse automatiquement.

De nombreux utilisateurs souhaiteront ajouter une note à un restaurant. Nous devrons donc coordonner plusieurs opérations de lecture et d'écriture. Tout d'abord, l'avis lui-même doit être envoyé, puis les valeurs count de la note du restaurant et la moyenne average rating doivent être actualisées. Si l'une de ces opérations échoue, mais pas l'autre, nous nous retrouvons dans un état incohérent, où les données d'une partie de notre base de données ne correspondent plus à celles d'une autre.

Heureusement, Cloud Firestore propose une fonctionnalité de transaction qui nous permet d'effectuer plusieurs opérations de lecture et d'écriture en une seule opération indépendante afin de garantir la cohérence de nos données.

1. Revenez au fichier scripts/FriendlyEats.Data.js.
2. Recherchez la fonction FriendlyEats.prototype.addRating.
3. Remplacez toute la fonction par le code suivant :

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

Dans le bloc ci-dessus, nous déclenchons une transaction pour mettre à jour les valeurs numériques de avgRating et numRatings dans le document du restaurant. En parallèle, nous ajoutons le nouveau rating à la sous-collection ratings.

Remarque: L'ajout de notes est un bon exemple d'utilisation d'une transaction pour cet atelier de programmation. Toutefois, dans une application en production, nous vous conseillons d'effectuer un calcul de la note moyenne sur un serveur de confiance afin d'éviter toute manipulation par les utilisateurs. Pour ce faire, vous pouvez écrire le document de notation directement à partir du client, puis utiliser Cloud Functions pour mettre à jour la nouvelle note moyenne du restaurant.

Avertissement: Lorsqu'une transaction échoue sur le serveur, le rappel est également réexécuté à plusieurs reprises. N'utilisez jamais de logique modifiant l'état de l'application dans le rappel de transaction.

12. Sécurisez vos données

Au début de cet atelier de programmation, nous avons défini les règles de sécurité de notre application pour restreindre l'accès à celle-ci.

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Ces règles limitent l'accès afin de s'assurer que les clients n'apportent que des modifications sûres. Exemple :

• Les modifications apportées à un document "restaurant" ne peuvent modifier que les notes, pas le nom, ni aucune autre donnée immuable.
• La création de notes n'est possible que si l'ID utilisateur correspond à l'utilisateur connecté, ce qui évite tout spoofing.

Au lieu d'utiliser la console Firebase, vous pouvez utiliser la CLI Firebase pour déployer des règles dans votre projet Firebase. Le fichier firestore.rules de votre répertoire de travail contient déjà les règles ci-dessus. Pour déployer ces règles depuis votre système de fichiers local (au lieu d'utiliser la console Firebase), exécutez la commande suivante:

firebase deploy --only firestore:rules

Important: Pour en savoir plus sur les règles de sécurité, consultez la documentation sur les règles de sécurité.

13. Conclusion

Dans cet atelier de programmation, vous avez appris à effectuer des lectures et des écritures de base et avancées avec Cloud Firestore, ainsi qu'à sécuriser l'accès aux données à l'aide de règles de sécurité. Vous trouverez la solution complète dans le dépôt quickstarts-js.

Pour en savoir plus sur Cloud Firestore, consultez les ressources suivantes:

• Présentation de Cloud Firestore
• Choisir une structure de données
• Exemples Web Cloud Firestore

14. [Facultatif] Appliquer avec App Check

Firebase App Check offre une protection en vous aidant à valider et à empêcher le trafic indésirable vers votre application. À cette étape, vous allez sécuriser l'accès à vos services en ajoutant App Check avec reCAPTCHA Enterprise.

Cette étape dépend de la réalisation des étapes précédentes. Assurez-vous que FriendlyEats s'exécute localement avec des émulateurs ou est déployé avec les services Firebase.

Vous devez d'abord activer App Check et reCaptcha.

Activer reCaptcha Enterprise

1. Dans la console Cloud, recherchez et sélectionnez reCAPTCHA Enterprise sous "Sécurité".
2. Activez le service comme indiqué, puis cliquez sur Créer une clé.
3. Saisissez un nom à afficher lorsque vous y êtes invité, puis sélectionnez Site Web comme type de plate-forme.
4. Ajoutez vos URL déployées à la liste des domaines et assurez-vous que l'option "Utiliser la case à cocher pour l'authentification n'est pas sélectionnée.
5. Cliquez sur Créer une clé, puis conservez la clé générée dans un endroit sûr. Vous en aurez besoin plus tard dans cette étape.

Activer App Check

1. Dans la console Firebase, localisez la section Créer dans le panneau de gauche.
2. Cliquez sur App Check (Vérification de l'application), puis sur le bouton Get Started (Commencer). Vous pouvez également être redirigé directement vers la console.
3. Cliquez sur Enregistrer, saisissez votre clé reCaptcha Enterprise lorsque vous y êtes invité, puis cliquez sur Enregistrer.
4. Dans la vue "API", sélectionnez Stockage, puis cliquez sur Appliquer. Faites de même pour Cloud Firestore.

App Check devrait maintenant être appliqué. Actualisez votre application, puis essayez de créer/afficher un restaurant. Le message d'erreur suivant doit s'afficher:

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

Cela signifie qu'App Check bloque les requêtes non validées par défaut. Ajoutons maintenant une validation à votre application.

Accédez au fichier FriendlyEats.View.js, mettez à jour la fonction initAppCheck et ajoutez votre clé reCaptcha pour initialiser App Check.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

L'instance appCheck est initialisée avec un ReCaptchaEnterpriseProvider avec votre clé, et isTokenAutoRefreshEnabled permet aux jetons de s'actualiser automatiquement dans votre application.

Pour activer les tests en local, recherchez la section où l'application est initialisée dans le fichier FriendlyEats.js, puis ajoutez la ligne suivante à la fonction FriendlyEats.prototype.initAppCheck:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Un jeton de débogage sera alors enregistré dans la console de votre application Web locale, semblable à ceci:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Accédez maintenant à la vue Applications d'App Check dans la console Firebase.

Cliquez sur le menu à développer, puis sélectionnez Gérer les jetons de débogage.

Cliquez ensuite sur Ajouter un jeton de débogage et collez le jeton de débogage de votre console lorsque vous y êtes invité.

Félicitations ! App Check devrait maintenant fonctionner dans votre application.