Découvrez Firebase pour le Web

1. Vue d'ensemble

Dans ce codelab, vous apprendrez quelques - unes 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 à l'aide de plusieurs produits Firebase.

59abdefbcc23bbbe.png

Ce que vous apprendrez

  • Authentifiez les utilisateurs avec Firebase Authentication et FirebaseUI.
  • Synchronisez les données à l'aide de Cloud Firestore.
  • Écrire 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.
  • L' 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 laboratoire de programmation. Voir l'étape suivante pour savoir comment obtenir le code.

2. Obtenez le code de démarrage

Dans ce codelab, vous construisez une application à l' aide StackBlitz , un éditeur en ligne qui a plusieurs Firebase flux de production intégrés en elle. Stackblitz ne nécessite aucune installation de logiciel ni compte StackBlitz spécial.

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

  1. Aller à l'URL pour le code de départ: https://stackblitz.com/edit/firebase-gtk-web-start
  2. En haut de la page StackBlitz, cliquez Fork: f5135360aef481cc.png

Vous avez maintenant une copie du code de départ en tant que votre propre projet StackBlitz. Puisque vous n'avez pas signé, votre compte est appelé @anonymous , mais le projet a un nom unique, avec 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 structure pour l'application Web, notamment 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 plus avec l'interface StackBlitz.

  1. Dans StackBlitz, ouvrez le index.html fichier.
  2. Repérez event-details-container l' description-container event-details-container et la description-container , essayez alors d' éditer des 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

908cc57ce3a5b5fe.png

4. Créer et configurer un projet Firebase

L'affichage des informations sur l'événement est excellent pour vos invités, mais le simple fait de montrer les événements n'est très utile pour personne. Ajoutons des fonctionnalités dynamiques à cette application. Pour cela, vous devrez connecter Firebase à votre application. Pour commencer avec Firebase, vous devez créer et configurer un projet Firebase.

Créer un projet Firebase

  1. Se connecter à Firebase .
  2. Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet), puis nommez votre projet Firebase Firebase-Web-Codelab.
    a67c239f8cc7f4b5.png
  3. Cliquez sur les options de création de projet. Acceptez les conditions de Firebase si vous y êtes invité. Ignorez la configuration de Google Analytics, car vous n'utiliserez pas Analytics pour cette application.

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

Activer les produits Firebase dans la console

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

  • Firebase authentification et l' interface utilisateur Firebase pour permettre facilement vos utilisateurs de se connecter à votre application.
  • Cloud Firestore pour enregistrer des données structurées sur le nuage et la notification instantanée obtenir des modifications de données.
  • 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 permettre aux utilisateurs de se connecter à l'application Web, vous utiliserez la page de connexion Email / Mot de passe pour cette méthode codelab:

  1. Dans la console Firebase, cliquez sur Créer dans le panneau gauche.
  2. Cliquez sur Authentification, puis cliquez sur le signe dans l' onglet méthode (ou cliquez ici pour aller directement à l'inscription dans l' onglet méthode).
  3. Cliquez sur Courriel / mot de passe dans la liste d' inscription dans les fournisseurs, définissez l'option Activer l' interrupteur sur la position, puis cliquez sur Enregistrer.
    4c88427cfd869bee.png

Activer Cloud Firestore

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

Activez Cloud Firestore :

  1. Dans la section de construction de la console Firebase, cliquez sur la base de données Firestore.
  2. Cliquez sur Créer la base de données.
    3ce19fd6467e51c5.png
  3. Sélectionnez Démarrer en option en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité. Le mode test garantit que vous pouvez librement écrire dans la base de données pendant le développement. Cliquez sur Suivant.
    56369cebb9300eb.png
  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.
    32f815f4648c3174.png
  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 le 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 y a plusieurs façons de le faire, comme décrit dans la documentation Firebase . Par exemple, vous pouvez ajouter les bibliothèques à partir du CDN de Google, ou vous pouvez les installer localement à l'aide de npm, puis les empaqueter 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 secouant". Vous pouvez en savoir plus sur les kits de développement modulaire dans la documentation .

Pour créer cette application, vous utilisez les bibliothèques Firebase Authentication, FirebaseUI et Cloud Firestore. Pour ce codelab, les déclarations d'importation suivantes sont déjà inclus dans la partie supérieure du index.js fichier, et nous allons importeront plus des méthodes de chaque bibliothèque Firebase que nous allons:

// 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 au projet

  1. Retour dans la console Firebase, accédez à la page d' aperçu de votre projet en cliquant sur Aperçu du projet dans le coin supérieur gauche.
  2. Au centre de la page de présentation de votre projet, cliquez sur l'icône Web b286f3d215e1f578.png pour créer une nouvelle application Web Firebase.
    c167e9526fad2825.png
  3. Enregistrez l'application avec le surnom Web App.
  4. Pour cette codelab, ne cochez pas la case à cocher également mis en place Firebase d' hébergement pour cette application. Vous utiliserez le volet de prévisualisation de StackBlitz pour le moment.
  5. Cliquez sur l' application de vous inscrire.
    c85ac8aa351e2560.png
  6. Copiez l' objet de configuration Firebase à votre presse - papiers.
    ed1e598c6132f734.png
  7. Cliquez sur Continuer pour consoler.

Ajoutez l'objet de configuration Firebase à votre application :

  1. Retour à StackBlitz, allez au index.js fichier.
  2. Localisez le Add Firebase project configuration object here ligne de commentaire, puis collez votre extrait de configuration juste en dessous du commentaire.
  3. Ajouter le initializeApp appel de fonction pour configurer Firebase en utilisant 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 que les gens de registres à l' aide Firebase authentification .

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 raccordant FirebaseUI à un RSVP button.FirebaseUI est une bibliothèque qui vous donne une interface utilisateur de pré-construit au - dessus de Firebase Auth.

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

  • Raconte FirebaseUI que vous voulez utiliser le signe dans Email / Mot de passe méthode.
  • Gère le rappel pour une connexion réussie et renvoie false pour éviter une redirection. Vous ne voulez pas que la page soit actualisée, car vous créez une application Web d'une seule page.

Ajouter le code pour initialiser FirebaseUI Auth

  1. En StackBlitz, allez au index.js fichier.
  2. Au sommet, recherchez le firebase/auth instruction import, puis ajoutez getAuth et EmailAuthProvider , comme ceci:
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Enregistrer une référence à l'objet auth juste après initializeApp , comme ceci:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Notez que la configuration FirebaseUI est déjà fournie dans le code de départ. Il est déjà configuré pour utiliser le fournisseur d'authentification de messagerie.
  5. Au bas de la main() fonction 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. En StackBlitz, allez au index.html fichier.
  2. Ajouter le code HTML pour un bouton RSVP dans l' event-details-container comme indiqué dans l'exemple ci - dessous.

    Veillez à utiliser les mêmes id les valeurs comme indiqué ci - dessous parce que, pour cette codelab, il y a des crochets déjà pour ces ID spécifiques dans le index.js fichier.

    Notez que dans le index.html fichier, 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.
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    App preview
    ab9ad7d61bb7b28c.png
  3. Configurez un écouteur sur le bouton RSVP et appelez la fonction de démarrage FirebaseUI. Cela indique à FirebaseUI que vous souhaitez voir la fenêtre de connexion.

    Ajouter le code suivant à la partie inférieure de la main() fonction index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

Tester 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, car 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 , assurez - vous que vous avez activé Email / Mot de passe comme un signe en fournisseur dans la console Firebase.
    Aperçu de l'application
    3024f90b52ad55fe.png
  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 entré pour vous connecter à l'application. 682fc0eca86a99fc.png

Ajouter l'é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 notifié chaque fois que l'état de connexion de l'utilisateur change. S'il y a actuellement un utilisateur connecté, votre application passera du bouton "RSVP" à un bouton "déconnexion".

  1. En StackBlitz, allez au index.js fichier.
  2. Au sommet, recherchez le firebase/auth instruction import, 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 main() fonction:
    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 courant startRsvpButton.addEventListener 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 dans votre application devrait montrer LOGOUT, et il devrait revenir à RSVP quand il est cliqué.

Aperçu de l'application

4c540450924f1607.png

7. Écrire des messages dans 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 enregistrer 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 de chat comme un document dans une collection de niveau supérieur appelé guestbook d' guestbook .

b447950f9f993789.png

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. En StackBlitz, allez au index.html fichier.
  2. Localisez le guestbook-container d' guestbook-container , puis ajoutez le code HTML suivant pour créer un formulaire avec le champ de saisie du 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

4a892284443cf73d.png

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

  1. En StackBlitz, allez au index.js fichier.
  2. Au sommet, recherchez le firebase/firestore instruction import, 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. Maintenant , nous allons sauver une référence à la Firestore db droit objet après initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. Au bas de la main() fonction, ajoutez le code suivant.

    Notez que auth.currentUser.uid est une référence à l'ID unique généré automatiquement que l' authentification Firebase donne pour 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 tout le monde pour voir la discussion des clients. Une chose que vous pouvez faire pour sécuriser le chat est d'autoriser uniquement les utilisateurs connectés à afficher le livre d'or. Cela dit, pour vos propres applications, vous voulez sécuriser également votre base de données avec Firebase règles de sécurité . (Vous trouverez plus d'informations sur les règles de sécurité plus loin dans le laboratoire de programmation.)

  1. En StackBlitz, allez au index.js fichier.
  2. Modifier le onAuthStateChanged auditeur à cacher et montrer 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 « Hé! », 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 actuelle, car vous devez encore implémenter la récupération des données. Vous le ferez ensuite.

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

Dans la console Firebase, dans le tableau de guestbook bord de base de données , vous devriez voir le guestbook d' guestbook collection 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

713870af0b3b63c.png

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 messages nouvellement ajoutés depuis l'application. Tout d'abord, ajoutez une section dans le code HTML pour afficher les messages :

  1. En StackBlitz, allez au index.html fichier.
  2. Dans le guestbook-container d' guestbook guestbook-container , ajouter une nouvelle section avec l'ID de guestbook d' 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. En StackBlitz, allez au index.js fichier.
  2. Au sommet, recherchez le firebase/firestore instruction import, puis ajoutez la query , orderBy et onSnapshot , comme ceci:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. Au bas de la main() fonction, ajoutez le code suivant à boucle à travers tous les documents (messages du livre d'or) dans 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 dans la base de données, vous avez créé une requête sur une collection spécifique en utilisant la collection fonction. Le code ci - dessus à l' écoute des changements dans le guestbook d' guestbook collection, qui est l' endroit 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 onSnapshot fonction 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 qui correspondent à la requête. Cela peut être le cas si un message est supprimé, modifié ou ajouté. Pour plus d' informations, consultez la documentation Firestore - Cloud .

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 manuellement, la modification ou l' ajout de nouveaux messages directement dans la section de base de données de la console Firebase; tout changement devrait apparaître dans l'interface utilisateur.

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

Aperçu de l'application

e30df0a9614bae7d.png

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'au tout début du développement. En tant que meilleure pratique, vous devez définir des règles de sécurité pour votre base de données lors du développement de 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 flexible vous permet de créer des règles qui correspondent à toutes les écritures dans la base de données entière 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 de construction de la console Firebase, cliquez sur Firestore base de données, puis sélectionnez l'onglet Règles (ou cliquez ici pour accéder directement à l'onglet Règles).
  2. Vous devriez voir les règles de sécurité par défaut suivantes, ainsi qu'un avertissement indiquant que les règles sont publiques.

7767a2d2e64e7275.png

Identifier les collections

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

Dans match /databases/{database}/documents de match /databases/{database}/documents de match /databases/{database}/documents , identifier 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 possède un UID d'authentification correspondant.

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;
    }
  }
}

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'en utilisant votre identifiant utilisateur. Nous n'autorisons pas non plus la modification ou la suppression des messages.

Ajouter des règles de validation

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;
    }
  }
}

Réinitialiser les auditeurs

Parce que votre application ne permet aux utilisateurs maintenant authentifiés de se connecter, vous devez déplacer le livre d' or firestore requête dans l'auditeur d' authentification. Sinon, des erreurs d'autorisation se produiront et l'application sera déconnectée lorsque l'utilisateur se déconnectera.

  1. Tirez la collection livre d'or onSnapshot auditeur dans une nouvelle fonction appelée subscribeGuestbook . En outre, affecter les résultats de la onSnapshot fonction à la guestbookListener variable.

    Le Firestore onSnapshot auditeur retourne une fonction désabonnement que vous serez en mesure d'utiliser pour annuler l'écouteur d'instantané plus tard.
    // ...
    // Listen to guestbook updates
    // 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);
        });
      });
    }
    
  2. Ajouter une nouvelle fonction appelée sous la unsubscribeGuestbook . Vérifier si la guestbookListener variable est non nulle, alors appeler la fonction pour annuler l'auditeur.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Enfin, ajoutez les nouvelles fonctions à la onAuthStateChanged rappel.

  1. Ajouter subscribeGuestbook() au bas de if (user) .
  2. Ajouter unsubscribeGuestbook() au bas de l' else déclaration.
    // ...
    // 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 : mettez en pratique ce que vous avez appris

Enregistrer le statut RSVP d'un participant

Pour le moment, votre application permet simplement aux gens 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 allez ajouter une bascule pour enregistrer les personnes qui souhaitent assister à l'événement, puis collecter le nombre de personnes qui viennent.

  1. En StackBlitz, allez au index.html fichier.
  2. Dans le guestbook-container d'
    <!-- ... -->
      <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>
    <!-- ... -->
    
    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

73ca99ca35c13ee7.png

Ensuite, enregistrez l'écouteur pour les clics sur les boutons. Si l'utilisateur clique sur YES, puis utilisez leur UID d' authentification pour enregistrer la réponse à la base de données.

  1. En StackBlitz, allez au index.js fichier.
  2. Au sommet, recherchez le firebase/firestore instruction import, puis ajouter 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 main() fonction, ajoutez le code suivant pour écouter l'état RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Créer une nouvelle collection appelée attendees , puis enregistrer une référence de document si l' un des boutons RSVP est cliqué.
  5. Définir cette référence à true ou false en fonction du bouton est cliqué.

    Tout 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, la même chose 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);
      }
    };
    

Ajouter des règles

Parce que vous avez déjà configuré certaines règles, les nouvelles données que vous ajoutez avec les boutons vont être rejetées. Vous aurez besoin de mettre à jour les règles pour permettre l' ajout d' au attendees collection.

Pour les attendees collection, depuis que vous avez utilisé l'UID d' authentification comme le nom du document, vous pouvez saisir et vérifier que le demandeur uid est le même que le document qu'ils écrivent. Vous autoriserez tout le monde à lire la liste des participants (puisqu'il n'y a pas de données privées là-bas), 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;
    }
  }
}

Ajouter des règles de validation

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 /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

(Facultatif) Vous pouvez maintenant consulter 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. En StackBlitz, allez au index.html fichier.
  2. Dans la description-container , ajouter un nouvel élément avec l'ID du number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

Ensuite, enregistrer l'écouteur pour les attendees collection et compter le nombre de réponses OUI:

  1. En StackBlitz, allez au index.js fichier.
  2. Au bas de la main() fonction, ajoutez le code suivant pour écouter l'état RSVP et compter les clics YES.
    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, soulignons le bouton correspondant à l'état actuel.

  1. Créer une fonction qui vérifie si l'UID en cours d' authentification a une entrée dans la attendees collection, puis définissez la classe bouton 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. Créons également une fonction de désabonnement. 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 comme utilisateurs multiples et voir l'augmentation de comptage à chaque clic supplémentaire bouton YES.

Aperçu de l'application

3df607d3e0b3c35.png

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 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 codelab Web Firebase pour une codelab qui va plus en profondeur sur de nombreux produits plus Firebase pour le web.
  • Vous voulez en savoir plus sur Cloud Firestore ? Vous souhaitez peut-être en savoir plus sur les sous-collections et les transactions ? Rendez -vous sur la codelab web Nuage Firestore pour une codelab qui va plus en profondeur sur le Cloud Firestore. Ou regardez cette série YouTube pour apprendre à connaître Nuage Firestore !

Apprendre encore plus

Comment c'était?

Nous aimerions vos retours. S'il vous plaît remplir un court formulaire (très) ici .