Découvrir Firebase pour le Web

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez certaines des bases de Firebase pour créer des applications Web interactives. Vous allez créer une application de chat RSVP et de livre d'or pour les événements à l'aide de plusieurs produits Firebase.

capture d'écran de cette étape

Ce que vous apprendrez

  • Authentifiez les utilisateurs avec Firebase Authentication et FirebaseUI.
  • Synchronisez les données à l'aide de Cloud Firestore.
  • Écrivez des règles de sécurité Firebase pour sécuriser une base de données.

Ce dont vous aurez besoin

  • Un navigateur de votre choix, tel que Chrome.
  • Accès à stackblitz.com (pas de compte ou de connexion nécessaire).
  • Un compte Google, comme un compte gmail. Nous vous recommandons le compte de messagerie que vous utilisez déjà pour votre compte GitHub. Cela vous permet d'utiliser des fonctionnalités avancées dans StackBlitz.
  • L'exemple de code du codelab. Voir l'étape suivante pour savoir comment obtenir le code.

2. Obtenez le code de démarrage

Dans cet atelier de programmation, vous créez une application à l'aide de StackBlitz , un éditeur en ligne qui intègre plusieurs workflows Firebase. Stackblitz ne nécessite aucune installation de logiciel ni compte StackBlitz spécial.

StackBlitz vous permet de partager des projets avec d'autres. Les autres personnes qui ont l'URL de votre projet StackBlitz peuvent voir votre code et forker votre projet, mais elles ne peuvent pas modifier votre projet StackBlitz.

  1. Accédez à cette URL pour le code de démarrage : https://stackblitz.com/edit/firebase-gtk-web-start
  2. En haut de la page StackBlitz, cliquez sur Fork :

capture d'écran de cette étape

Vous avez maintenant une copie du code de démarrage en tant que votre propre projet StackBlitz, qui a un nom unique, ainsi qu'une URL unique. Tous vos fichiers et modifications sont enregistrés dans ce projet StackBlitz.

3. Modifier les informations sur l'événement

Les matériaux de départ de cet atelier de programmation fournissent une certaine structure pour l'application Web, y compris des feuilles de style et quelques conteneurs HTML pour l'application. Plus tard dans cet atelier de programmation, vous connecterez ces conteneurs à Firebase.

Pour commencer, familiarisons-nous un peu avec l'interface StackBlitz.

  1. Dans StackBlitz, ouvrez le fichier index.html .
  2. Localisez event-details-container et description-container , puis essayez de modifier certains détails de l'événement.

Lorsque vous modifiez le texte, le rechargement automatique de la page dans StackBlitz affiche les nouveaux détails de l'événement. Cool, ouais?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

L'aperçu de votre application devrait ressembler à ceci :

Aperçu de l'application

capture d'écran de cette étape

4. Créer et configurer un projet Firebase

L'affichage des informations sur l'événement est idéal pour vos invités, mais le simple fait d'afficher les événements n'est très utile pour personne. Ajoutons quelques fonctionnalités dynamiques à cette application. Pour cela, vous devrez connecter Firebase à votre application. Pour démarrer avec Firebase, vous devez 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 (ou Créer un projet ), puis nommez votre projet Firebase Firebase-Web-Codelab .

    capture d'écran de cette étape

  3. Cliquez sur les options de création de projet. Acceptez les conditions de Firebase si vous y êtes invité. Sur l'écran Google Analytics, cliquez sur "Ne pas activer", car vous n'utiliserez pas Analytics pour cette application.

Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase .

Activer et configurer les produits Firebase dans la console

L'application que vous créez utilise plusieurs produits Firebase disponibles pour les applications Web :

  • Firebase Authentication et Firebase UI 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.
  • Règles de sécurité Firebase pour sécuriser votre base de données.

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

Activer la connexion par e-mail pour l'authentification Firebase

Pour autoriser les utilisateurs à se connecter à l'application Web, vous utiliserez la méthode de connexion par e-mail/mot de passe pour cet atelier de programmation :

  1. Dans le panneau de gauche de la console Firebase, cliquez sur Build > Authentication . Cliquez ensuite sur Commencer . Vous êtes maintenant dans le tableau de bord Authentification, où vous pouvez voir les utilisateurs inscrits, configurer les fournisseurs de connexion et gérer les paramètres.

    capture d'écran de cette étape

  2. Sélectionnez l'onglet Méthode de connexion (ou cliquez ici pour accéder directement à l'onglet).

    capture d'écran de cette étape

  3. Cliquez sur E-mail/Mot de passe dans les options du fournisseur, basculez le commutateur sur Activer , puis cliquez sur Enregistrer .

    capture d'écran de cette étape

Configurer Cloud Firestore

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

Voici comment configurer Cloud Firestore :

  1. Dans le panneau de gauche de la console Firebase, cliquez sur Build > Firestore Database . Cliquez ensuite sur Créer une base de données .
  2. Cliquez sur Créer une base de données .

    capture d'écran de cette étape

  3. Sélectionnez l'option Démarrer en mode test . Lisez l'avertissement sur 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. Cliquez sur Suivant .

    capture d'écran de cette étape

  4. Sélectionnez l'emplacement de votre base de données (vous pouvez simplement utiliser la valeur par défaut). Notez cependant que cet emplacement ne peut pas être modifié ultérieurement.

    capture d'écran de cette étape

  5. Cliquez sur Terminé .

5. Ajouter et configurer Firebase

Maintenant que votre projet Firebase est créé et que certains services sont activés, vous devez indiquer au code que vous souhaitez utiliser Firebase, ainsi que le projet Firebase à utiliser.

Ajouter les bibliothèques Firebase

Pour que votre application utilise Firebase, vous devez ajouter les bibliothèques Firebase à l'application. Il existe plusieurs façons de procéder, comme décrit dans la documentation Firebase . Par exemple, vous pouvez ajouter les bibliothèques du CDN de Google, ou vous pouvez les installer localement à l'aide de npm, puis les regrouper dans votre application si vous utilisez Browserify.

StackBlitz fournit un regroupement automatique, vous pouvez donc ajouter les bibliothèques Firebase à l'aide d'instructions d'importation. Vous utiliserez les versions modulaires (v9) des bibliothèques, qui aident à réduire la taille globale de la page Web grâce à un processus appelé "tree shaking". Vous pouvez en savoir plus sur les SDK modulaires dans la documentation .

Pour créer cette application, vous utilisez les bibliothèques Firebase Authentication, FirebaseUI et Cloud Firestore. Pour cet atelier de programmation, les instructions d'importation suivantes sont déjà incluses en haut du fichier index.js , et nous importerons d'autres méthodes de chaque bibliothèque Firebase au fur et à mesure :

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Ajouter une application Web Firebase à votre projet Firebase

  1. De retour dans la console Firebase, accédez à la page de présentation de votre projet en cliquant sur Présentation du projet en haut à gauche.
  2. Au centre de la page de présentation de votre projet, cliquez sur l'icône Web icône de l'application Web pour créer une nouvelle application Web Firebase.

    capture d'écran de cette étape

  3. Enregistrez l'application avec le surnom Web App .
  4. Pour cet atelier de programmation, ne cochez PAS la case à côté de Configurer également l'hébergement Firebase pour cette application . Vous utiliserez le volet de prévisualisation de StackBlitz pour l'instant.
  5. Cliquez sur Enregistrer l'application .

    capture d'écran de cette étape

  6. Copiez l' objet de configuration Firebase dans votre presse-papiers.

    capture d'écran de cette étape

  7. Cliquez sur Continuer pour accéder à la console . Ajoutez l'objet de configuration Firebase à votre application :
  8. De retour dans StackBlitz, accédez au fichier index.js .
  9. Localisez la ligne de commentaire Add Firebase project configuration object here , puis collez votre extrait de configuration juste en dessous du commentaire.
  10. Ajoutez l'appel de fonction initializeApp pour configurer Firebase à l'aide de la configuration de votre projet Firebase unique.
    // ...
    // Add Firebase project configuration object here
    const firebaseConfig = {
      apiKey: "random-unique-string",
      authDomain: "your-projectId.firebaseapp.com",
      databaseURL: "https://your-projectId.firebaseio.com",
      projectId: "your-projectId",
      storageBucket: "your-projectId.appspot.com",
      messagingSenderId: "random-unique-string",
      appId: "random-unique-string",
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig);
    

6. Ajouter une connexion utilisateur (RSVP)

Maintenant que vous avez ajouté Firebase à l'application, vous pouvez configurer un bouton RSVP qui enregistre les personnes utilisant Firebase Authentication .

Authentifiez vos utilisateurs avec Email Sign-In et FirebaseUI

Vous aurez besoin d'un bouton RSVP qui invite l'utilisateur à se connecter avec son adresse e-mail. Vous pouvez le faire en connectant FirebaseUI à un bouton RSVP.FirebaseUI est une bibliothèque qui vous donne une interface utilisateur prédéfinie au-dessus de Firebase Auth.

FirebaseUI nécessite une configuration (voir les options dans la documentation ) qui fait deux choses :

  • Indique à FirebaseUI que vous souhaitez utiliser la méthode de connexion par e-mail/mot de passe.
  • Gère le rappel pour une connexion réussie et renvoie false pour éviter une redirection. Vous ne voulez pas que la page s'actualise, car vous créez une application Web d'une seule page.

Ajoutez le code pour initialiser FirebaseUI Auth

  1. Dans StackBlitz, accédez au fichier index.js .
  2. En haut, localisez l'instruction d'importation firebase/auth , puis ajoutez getAuth et EmailAuthProvider , comme suit :
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Enregistrez une référence à l'objet auth juste après initializeApp , comme ceci :
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Notez que la configuration de FirebaseUI est déjà fournie dans le code de démarrage. Il est déjà configuré pour utiliser le fournisseur d'authentification de messagerie.
  5. Au bas de la fonction main() dans index.js , ajoutez l'instruction d'initialisation FirebaseUI, comme ceci :
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

Ajouter un bouton RSVP au HTML

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Ajoutez le code HTML d'un bouton RSVP dans le event-details-container comme indiqué dans l'exemple ci-dessous.

    Veillez à utiliser les mêmes valeurs d' id que celles indiquées ci-dessous car, pour cet atelier de programmation, il existe déjà des crochets pour ces ID spécifiques dans le fichier index.js .

    Notez que dans le fichier index.html , il y a un conteneur avec l'ID firebaseui-auth-container . Il s'agit de l'ID que vous transmettrez à FirebaseUI pour conserver votre connexion. Aperçu de l' application
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    


    capture d'écran de cette étape

  3. Configurez un écouteur sur le bouton RSVP et appelez la fonction de démarrage de FirebaseUI. Cela indique à FirebaseUI que vous souhaitez voir la fenêtre de connexion.

    Ajoutez le code suivant au bas de la fonction main() dans index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

Testez la connexion à l'application

  1. Dans la fenêtre d'aperçu de StackBlitz, cliquez sur le bouton RSVP pour vous connecter à l'application.
    • Pour cet atelier de programmation, vous pouvez utiliser n'importe quelle adresse e-mail, même une fausse adresse e-mail, puisque vous ne configurez pas d'étape de vérification des e-mails pour cet atelier de programmation.
    • Si vous voyez un message d'erreur indiquant auth/operation-not-allowed ou The given sign-in provider is disabled for this Firebase project , vérifiez que vous avez activé Email/Mot de passe en tant que fournisseur de connexion dans la console Firebase.
    Aperçu de l'application

    capture d'écran de cette étape

  2. Accédez au tableau de bord d' authentification dans la console Firebase. Dans l'onglet Utilisateurs , vous devriez voir les informations de compte que vous avez saisies pour vous connecter à l'application.

    capture d'écran de cette étape

Ajouter un état d'authentification à l'interface utilisateur

Ensuite, assurez-vous que l'interface utilisateur reflète le fait que vous êtes connecté.

Vous utiliserez le rappel de l'écouteur d'état Firebase Authentication, qui est averti chaque fois que l'état de connexion de l'utilisateur change. S'il y a actuellement un utilisateur connecté, votre application transformera le bouton "RSVP" en bouton "déconnexion".

  1. Dans StackBlitz, accédez au fichier index.js .
  2. En haut, localisez l'instruction d'importation firebase/auth , puis ajoutez signOut et onAuthStateChanged , comme ceci :
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Ajoutez le code suivant au bas de la fonction main() :
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. Dans l'écouteur de bouton, vérifiez s'il y a un utilisateur actuel et déconnectez-le. Pour ce faire, remplacez le startRsvpButton.addEventListener actuel par ce qui suit :
    // ...
    // Called when the user clicks the RSVP button
    startRsvpButton.addEventListener('click', () => {
      if (auth.currentUser) {
        // User is signed in; allows user to sign out
        signOut(auth);
      } else {
        // No user is signed in; allows user to sign in
        ui.start('#firebaseui-auth-container', uiConfig);
      }
    });
    

Maintenant, le bouton de votre application doit afficher LOGOUT , et il doit revenir à RSVP lorsque vous cliquez dessus.

Aperçu de l'application

capture d'écran de cette étape

7. Écrivez des messages sur Cloud Firestore

Savoir que les utilisateurs arrivent, c'est bien, mais donnons aux invités autre chose à faire dans l'application. Et s'ils pouvaient laisser des messages dans un livre d'or ? Ils peuvent partager pourquoi ils sont ravis de venir ou qui ils espèrent rencontrer.

Pour stocker les messages de chat que les utilisateurs écrivent dans l'application, vous utiliserez Cloud Firestore .

Modèle de données

Cloud Firestore est une base de données NoSQL, et les données stockées dans la base de données sont divisées en collections, documents, champs et sous-collections. Vous stockerez chaque message du chat en tant que document dans une collection de niveau supérieur appelée guestbook d'or .

Graphique du modèle de données Firestore montrant une collection de livres d'or avec plusieurs documents de message

Ajouter des messages à Firestore

Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans la base de données. Tout d'abord, vous ajoutez le code HTML pour les éléments de l'interface utilisateur (champ de message et bouton d'envoi). Ensuite, vous ajoutez le code qui relie ces éléments à la base de données.

Pour ajouter les éléments d'interface utilisateur d'un champ de message et d'un bouton d'envoi :

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Localisez le guestbook-container , puis ajoutez le code HTML suivant pour créer un formulaire avec le champ de saisie de message et le bouton d'envoi.
    <!-- ... -->
    
     <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form id="leave-message">
         <label>Leave a message: </label>
         <input type="text" id="message">
         <button type="submit">
           <i class="material-icons">send</i>
           <span>SEND</span>
         </button>
       </form>
    
     </section>
    
    <!-- ... -->
    

Aperçu de l'application

capture d'écran de cette étape

Un utilisateur cliquant sur le bouton ENVOYER déclenchera l'extrait de code ci-dessous. Il ajoute le contenu du champ de saisie du message à la collection de livres d' guestbook de la base de données. Plus précisément, la méthode addDoc ajoute le contenu du message à un nouveau document (avec un ID généré automatiquement) à la collection de livres d' guestbook .

  1. Dans StackBlitz, accédez au fichier index.js .
  2. En haut, localisez l'instruction d'importation firebase/firestore , puis ajoutez getFirestore , addDoc et collection , comme ceci :
    // ...
    
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {
      getFirestore,
      addDoc,
      collection
    } from 'firebase/firestore';
    
  3. Nous allons maintenant enregistrer une référence à l'objet Firestore db juste après initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. Au bas de la fonction main() , ajoutez le code suivant.

    Notez que auth.currentUser.uid est une référence à l'ID unique généré automatiquement que Firebase Authentication donne à tous les utilisateurs connectés.
    async function main() {
      // ...
    
      // Listen to the form submission
      form.addEventListener('submit', async e => {
        // Prevent the default form redirect
        e.preventDefault();
        // Write a new message to the database collection "guestbook"
        addDoc(collection(db, 'guestbook'), {
          text: input.value,
          timestamp: Date.now(),
          name: auth.currentUser.displayName,
          userId: auth.currentUser.uid
        });
        // clear message input field
        input.value = '';
        // Return false to avoid redirect
        return false;
      });
    }
    main();
    

Afficher le livre d'or uniquement aux utilisateurs connectés

Vous ne voulez pas que n'importe qui voie le chat des invités. Une chose que vous pouvez faire pour sécuriser le chat est de n'autoriser que les utilisateurs connectés à afficher le livre d'or. Cela dit, pour vos propres applications, vous souhaiterez également sécuriser votre base de données avec Firebase Security Rules . (Vous trouverez plus d'informations sur les règles de sécurité plus loin dans l'atelier de programmation.)

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Modifiez l'écouteur onAuthStateChanged pour masquer et afficher le livre d'or.
    // ...
    
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
      }
    });
    

Tester l'envoi de messages

  1. Assurez-vous que vous êtes connecté à l'application.
  2. Entrez un message tel que "Salut !", puis cliquez sur ENVOYER .

Cette action écrit le message dans votre base de données Cloud Firestore. Cependant, vous ne verrez pas encore le message dans votre application Web réelle, car vous devez toujours implémenter la récupération des données. Vous ferez cela ensuite.

Mais vous pouvez voir le message nouvellement ajouté dans la console Firebase.

Dans la console Firebase, dans le tableau de bord de la base de données Firestore , vous devriez voir la collection de livres d' guestbook avec votre message nouvellement ajouté. Si vous continuez à envoyer des messages, votre collection de livres d'or contiendra de nombreux documents, comme celui-ci :

Console Firebase

capture d'écran de cette étape

8. Lire les messages

Synchroniser les messages

C'est bien que les invités puissent écrire des messages dans la base de données, mais ils ne peuvent pas encore les voir dans l'application.

Pour afficher les messages, vous devez ajouter des écouteurs qui se déclenchent lorsque les données changent, puis créer un élément d'interface utilisateur qui affiche les nouveaux messages.

Vous allez ajouter du code qui écoute les nouveaux messages ajoutés à partir de l'application. Tout d'abord, ajoutez une section dans le HTML pour afficher les messages :

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans guestbook-container , ajoutez une nouvelle section avec l'ID de guestbook .
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

Ensuite, enregistrez l'écouteur qui écoute les modifications apportées aux données :

  1. Dans StackBlitz, accédez au fichier index.js .
  2. En haut, localisez l'instruction d'importation firebase/firestore , puis ajoutez query , orderBy et onSnapshot , comme ceci :
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Au bas de la fonction main() , ajoutez le code suivant pour parcourir tous les documents (messages du livre d'or) de la base de données. Pour en savoir plus sur ce qui se passe dans ce code, lisez les informations sous l'extrait.
    async function main() {
      // ...
    
      // Create query for messages
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    main();
    

Pour écouter les messages de la base de données, vous avez créé une requête sur une collection spécifique à l'aide de la fonction de collection . Le code ci-dessus écoute les modifications apportées à la collection de livres d' guestbook , où les messages de chat sont stockés. Les messages sont également classés par date, en utilisant orderBy('timestamp', 'desc') pour afficher les messages les plus récents en haut.

La fonction onSnapshot prend deux paramètres : la requête à utiliser et une fonction de rappel. La fonction de rappel est déclenchée lorsque des modifications sont apportées aux documents correspondant à la requête. Cela peut se produire si un message est supprimé, modifié ou ajouté. Pour plus d'informations, consultez la documentation Cloud Firestore .

Tester la synchronisation des messages

Cloud Firestore synchronise automatiquement et instantanément les données avec les clients abonnés à la base de données.

  • Les messages que vous avez créés précédemment dans la base de données doivent être affichés dans l'application. N'hésitez pas à écrire de nouveaux messages; ils devraient apparaître instantanément.
  • Si vous ouvrez votre espace de travail dans plusieurs fenêtres ou onglets, les messages seront synchronisés en temps réel entre les onglets.
  • (Facultatif) Vous pouvez essayer de supprimer, de modifier ou d'ajouter manuellement de nouveaux messages directement dans la section Base de données de la console Firebase ; toute modification doit apparaître dans l'interface utilisateur.

Toutes nos félicitations! Vous lisez des documents Cloud Firestore dans votre application !

Aperçu de l'application

capture d'écran de cette étape

9. Mettre en place des règles de sécurité de base

Vous avez initialement configuré Cloud Firestore pour utiliser le mode test, ce qui signifie que votre base de données est ouverte en lecture et en écriture. Cependant, vous ne devez utiliser le mode test qu'aux toutes premières étapes du développement. La meilleure pratique consiste à configurer des règles de sécurité pour votre base de données lorsque vous développez votre application. La sécurité doit faire partie intégrante de la structure et du comportement de votre application.

Les règles de sécurité vous permettent de contrôler l'accès aux documents et aux collections de votre base de données. La syntaxe des règles flexibles vous permet de créer des règles qui correspondent à n'importe quoi, de toutes les écritures dans l'ensemble de la base de données aux opérations sur un document spécifique.

Vous pouvez écrire des règles de sécurité pour Cloud Firestore dans la console Firebase :

  1. Dans la section Build de la console Firebase, cliquez sur Firestore Database , puis sélectionnez l'onglet Rules (ou cliquez ici pour accéder directement à l'onglet Rules ).
  2. Vous devriez voir les règles de sécurité par défaut suivantes, avec une limite de temps d'accès public de quelques semaines à partir d'aujourd'hui.

capture d'écran de cette étape

Identifier les collections

Tout d'abord, identifiez les collections dans lesquelles l'application écrit des données.

  1. Supprimez la clause match /{document=**} existante afin que vos règles ressemblent à ceci :
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. Dans match /databases/{database}/documents , identifiez la collection que vous souhaitez sécuriser :
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
         // You'll add rules here in the next step.
      }
    }
    

Ajouter des règles de sécurité

Étant donné que vous avez utilisé l'UID d'authentification comme champ dans chaque document de livre d'or, vous pouvez obtenir l'UID d'authentification et vérifier que toute personne tentant d'écrire dans le document dispose d'un UID d'authentification correspondant.

  1. Ajoutez les règles de lecture et d'écriture à votre ensemble de règles comme indiqué ci-dessous :
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
            if request.auth.uid == request.resource.data.userId;
        }
      }
    }
    
  2. Cliquez sur Publier pour déployer vos nouvelles règles. Désormais, pour le livre d'or, seuls les utilisateurs connectés peuvent lire les messages (n'importe quel message !), mais vous ne pouvez créer un message qu'à l'aide de votre ID utilisateur. Nous n'autorisons pas non plus la modification ou la suppression des messages.

Ajouter des règles de validation

  1. Ajoutez la validation des données pour vous assurer que tous les champs attendus sont présents dans le document :
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /guestbook/{entry} {
          allow read: if request.auth.uid != null;
          allow create:
          if request.auth.uid == request.resource.data.userId
              && "name" in request.resource.data
              && "text" in request.resource.data
              && "timestamp" in request.resource.data;
        }
      }
    }
    
  2. Cliquez sur Publier pour déployer vos nouvelles règles.

Réinitialiser les écouteurs

Étant donné que votre application autorise désormais uniquement les utilisateurs authentifiés à se connecter, vous devez déplacer la requête firestore du livre d'or dans l'écouteur d'authentification. Sinon, des erreurs d'autorisation se produiront et l'application sera déconnectée lorsque l'utilisateur se déconnectera.

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Tirez la collection de livres d'or sur l'écouteur onSnapshot dans une nouvelle fonction appelée subscribeGuestbook . Affectez également les résultats de la fonction onSnapshot à la variable guestbookListener .

    L'écouteur Firestore onSnapshot renvoie une fonction de désabonnement que vous pourrez utiliser pour annuler l'écouteur d'instantané ultérieurement.
    // ...
    // Listen to guestbook updates
    function subscribeGuestbook() {
      const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
      guestbookListener = onSnapshot(q, snaps => {
        // Reset page
        guestbook.innerHTML = '';
        // Loop through documents in database
        snaps.forEach(doc => {
          // Create an HTML entry for each document and add it to the chat
          const entry = document.createElement('p');
          entry.textContent = doc.data().name + ': ' + doc.data().text;
          guestbook.appendChild(entry);
        });
      });
    }
    
  3. Ajoutez une nouvelle fonction en dessous appelée unsubscribeGuestbook . Vérifiez si la variable guestbookListener n'est pas nulle, puis appelez la fonction pour annuler l'écouteur.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Enfin, ajoutez les nouvelles fonctions au rappel onAuthStateChanged .

  1. Ajoutez subscribeGuestbook() au bas de if (user) .
  2. Ajoutez unsubscribeGuestbook() au bas de l'instruction else .
    // ...
    // Listen to the current Auth state
    onAuthStateChanged(auth, user => {
      if (user) {
        startRsvpButton.textContent = 'LOGOUT';
        // Show guestbook to logged-in users
        guestbookContainer.style.display = 'block';
        // Subscribe to the guestbook collection
        subscribeGuestbook();
      } else {
        startRsvpButton.textContent = 'RSVP';
        // Hide guestbook for non-logged-in users
        guestbookContainer.style.display = 'none';
        // Unsubscribe from the guestbook collection
        unsubscribeGuestbook();
      }
    });
    

10. Étape bonus : pratiquez ce que vous avez appris

Enregistrer le statut RSVP d'un participant

Pour le moment, votre application permet simplement aux utilisateurs de commencer à discuter s'ils sont intéressés par l'événement. De plus, la seule façon de savoir si quelqu'un vient est de le publier dans le chat. Organisons-nous et informons les gens du nombre de personnes qui viennent.

Vous ajouterez une bascule pour enregistrer les personnes qui souhaitent assister à l'événement, puis collecterez le nombre de personnes qui viennent.

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans guestbook-container , ajoutez un ensemble de boutons OUI et NON , comme ceci :
    <!-- ... -->
      <section id="guestbook-container">
       <h2>Are you attending?</h2>
         <button id="rsvp-yes">YES</button>
         <button id="rsvp-no">NO</button>
    
       <h2>Discussion</h2>
    
       <!-- ... -->
    
     </section>
    <!-- ... -->
    

Aperçu de l'application

capture d'écran de cette étape

Ensuite, enregistrez l'écouteur pour les clics de bouton. Si l'utilisateur clique sur OUI , utilisez son UID d'authentification pour enregistrer la réponse dans la base de données.

  1. Dans StackBlitz, accédez au fichier index.js .
  2. En haut, localisez l'instruction d'importation firebase/firestore , puis ajoutez doc , setDoc et where , comme ceci :
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. Au bas de la fonction main() , ajoutez le code suivant pour écouter le statut RSVP :
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Ensuite, créez une nouvelle collection appelée attendees , puis enregistrez une référence de document si vous cliquez sur l'un des boutons RSVP. Définissez cette référence sur true ou false selon le bouton sur lequel vous cliquez.

    D'abord, pour rsvpYes :
    // ...
    // Listen to RSVP responses
    rsvpYes.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attendi()ng: true
      try {
        await setDoc(userRef, {
          attending: true
        });
      } catch (e) {
        console.error(e);
      }
    };
    
    Ensuite, pareil pour rsvpNo , mais avec la valeur false :
    rsvpNo.onclick = async () => {
      // Get a reference to the user's document in the attendees collection
      const userRef = doc(db, 'attendees', auth.currentUser.uid);
    
      // If they RSVP'd yes, save a document with attending: true
      try {
        await setDoc(userRef, {
          attending: false
        });
      } catch (e) {
        console.error(e);
      }
    };
    

Mettez à jour vos règles de sécurité

Étant donné que vous avez déjà configuré certaines règles, les nouvelles données que vous ajoutez avec les boutons seront rejetées.

Autoriser les ajouts à la collection des attendees

Vous devrez mettre à jour les règles pour autoriser l'ajout à la collection de attendees .

  1. Pour la collection des attendees , puisque vous avez utilisé l'UID d'authentification comme nom de document, vous pouvez le récupérer et vérifier que l' uid de l'émetteur est le même que le document qu'il écrit. Vous autoriserez tout le monde à lire la liste des participants (puisqu'il n'y a pas de données privées), mais seul le créateur devrait pouvoir la mettre à jour.
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId;
        }
      }
    }
    
  2. Cliquez sur Publier pour déployer vos nouvelles règles.

Ajouter des règles de validation

  1. Ajoutez des règles de validation des données pour vous assurer que tous les champs attendus sont présents dans le document :
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        // ... //
        match /attendees/{userId} {
          allow read: if true;
          allow write: if request.auth.uid == userId
              && "attending" in request.resource.data;
    
        }
      }
    }
    
  2. N'oubliez pas de cliquer sur Publier pour déployer vos règles !

(Facultatif) Vous pouvez maintenant afficher les résultats en cliquant sur les boutons. Accédez à votre tableau de bord Cloud Firestore dans la console Firebase.

Lire le statut RSVP

Maintenant que vous avez enregistré les réponses, voyons qui vient et reflétons-le dans l'interface utilisateur.

  1. Dans StackBlitz, accédez au fichier index.html .
  2. Dans description-container , ajoutez un nouvel élément avec l'ID de number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Ensuite, enregistrez l'auditeur pour la collection des attendees et comptez le nombre de réponses OUI :

  1. Dans StackBlitz, accédez au fichier index.js .
  2. Au bas de la fonction main() , ajoutez le code suivant pour écouter le statut RSVP et compter les clics OUI .
    async function main() {
      // ...
    
      // Listen for attendee list
      const attendingQuery = query(
        collection(db, 'attendees'),
        where('attending', '==', true)
      );
      const unsubscribe = onSnapshot(attendingQuery, snap => {
        const newAttendeeCount = snap.docs.length;
        numberAttending.innerHTML = newAttendeeCount + ' people going';
      });
    }
    main();
    

Enfin, mettons en surbrillance le bouton correspondant à l'état actuel.

  1. Créez une fonction qui vérifie si l'UID d'authentification actuel a une entrée dans la collection des attendees , puis définissez la classe de bouton sur clicked .
    // ...
    // Listen for attendee list
    function subscribeCurrentRSVP(user) {
      const ref = doc(db, 'attendees', user.uid);
      rsvpListener = onSnapshot(ref, doc => {
        if (doc && doc.data()) {
          const attendingResponse = doc.data().attending;
    
          // Update css classes for buttons
          if (attendingResponse) {
            rsvpYes.className = 'clicked';
            rsvpNo.className = '';
          } else {
            rsvpYes.className = '';
            rsvpNo.className = 'clicked';
          }
        }
      });
    }
    
  2. Aussi, créons une fonction pour se désinscrire. Il sera utilisé lorsque l'utilisateur se déconnectera.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Appelez les fonctions à partir de l'écouteur d'authentification.
    // ...
    // Listen to the current Auth state
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
          // Show guestbook to logged-in users
          guestbookContainer.style.display = 'block';
    
          // Subscribe to the guestbook collection
          subscribeGuestbook();
          // Subcribe to the user's RSVP
          subscribeCurrentRSVP(user);
        } else {
          startRsvpButton.textContent = 'RSVP';
          // Hide guestbook for non-logged-in users
          guestbookContainer.style.display = 'none'
          ;
          // Unsubscribe from the guestbook collection
          unsubscribeGuestbook();
          // Unsubscribe from the guestbook collection
          unsubscribeCurrentRSVP();
        }
      });
    
  4. Essayez de vous connecter en tant qu'utilisateurs multiples et voyez le nombre augmenter à chaque clic supplémentaire sur le bouton OUI .

Aperçu de l'application

capture d'écran de cette étape

11. Félicitations !

Vous avez utilisé Firebase pour créer une application Web interactive en temps réel !

Ce que nous avons couvert

  • Authentification Firebase
  • FirebaseUI
  • Cloud Firestore
  • Règles de sécurité Firebase

Prochaines étapes

  • Vous voulez en savoir plus sur le flux de travail des développeurs Firebase ? Consultez l'atelier de programmation de l' émulateur Firebase pour savoir comment tester et exécuter votre application entièrement en local.
  • Vous souhaitez en savoir plus sur les autres produits Firebase ? Peut-être souhaitez-vous stocker des fichiers image que les utilisateurs téléchargent ? Ou envoyer des notifications à vos utilisateurs ? Consultez le laboratoire de programmation Web Firebase pour un laboratoire de programmation qui approfondit de nombreux autres produits Firebase pour le Web.
  • Vous voulez en savoir plus sur Cloud Firestore ? Peut-être souhaitez-vous en savoir plus sur les sous-collections et les transactions ? Rendez-vous sur l'atelier de programmation Web Cloud Firestore pour un atelier de programmation approfondi sur Cloud Firestore. Ou consultez cette série YouTube pour découvrir Cloud Firestore !

Apprendre encore plus

Comment c'était?

Nous aimerions vos retours. Merci de remplir un (très) court formulaire ici .