Cette page a été traduite par l'API Cloud Translation.

Découvrez Firebase pour le Web

1. Présentation

Dans cet atelier de programmation, vous allez découvrir les principes de base de Firebase pour créer des applications Web interactives. Vous allez créer une application de chat pour répondre à des invitations et un livre d'or pour un événement à l'aide de plusieurs produits Firebase.

capture d'écran de cette étape

Points abordés

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

Prérequis

Un navigateur de votre choix, comme Chrome
Accès à stackblitz.com (aucun compte ni connexion requis).
Un compte Google, comme un compte Gmail Nous vous recommandons d'utiliser le compte de messagerie que vous utilisez déjà pour votre compte GitHub. Vous pourrez ainsi utiliser les fonctionnalités avancées de StackBlitz.
Exemple de code de l'atelier de programmation Consultez l'étape suivante pour savoir comment obtenir le code.

2. Obtenir le code de démarrage

Dans cet atelier de programmation, vous allez créer une application à l'aide de StackBlitz, un éditeur en ligne intégrant plusieurs workflows Firebase. Stackblitz ne nécessite aucune installation logicielle ni aucun compte StackBlitz spécial.

StackBlitz vous permet de partager des projets avec d'autres utilisateurs. Les autres utilisateurs qui disposent de l'URL de votre projet StackBlitz peuvent voir votre code et créer une fourchette de votre projet, mais ils ne peuvent pas le modifier.

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

capture d'écran de cette étape

Vous disposez désormais d'une copie du code de départ sous la forme de votre propre projet StackBlitz, qui possède un nom et une URL uniques. Tous vos fichiers et modifications sont enregistrés dans ce projet StackBlitz.

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

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

Pour commencer, familiarisez-vous avec l'interface StackBlitz.

Dans StackBlitz, ouvrez le fichier index.html.
Recherchez event-details-container et description-container, puis essayez de modifier les détails d'un événement.

Lorsque vous modifiez le texte, la page est automatiquement actualisée dans StackBlitz pour afficher les nouveaux détails de l'événement. C'est bien, non ?

<!-- ... -->

<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 se présenter comme suit:

Aperçu de l'application

capture d'écran de cette étape

4. Créer et configurer un projet Firebase

Afficher les informations sur les événements est très utile pour vos invités, mais ne pas afficher que les événements n'est pas très pratique. Ajoutons des fonctionnalités dynamiques à cette application. Pour ce faire, vous devez connecter Firebase à votre application. Pour commencer à utiliser Firebase, vous devez créer et configurer un projet Firebase.

Créer un projet Firebase

Connectez-vous à Firebase.
Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet), puis nommez votre projet Firebase Firebase-Web-Codelab.
Cliquez sur les options souhaitées. Si vous y êtes invité, acceptez les conditions d'utilisation de Firebase. 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 l'interface utilisateur de Firebase pour permettre à vos utilisateurs de se connecter facilement à votre application
Cloud Firestore, pour sauvegarder des données structurées sur le cloud et être notifié instantanément en cas de modification des données.
Les règles de sécurité Firebase pour sécuriser votre base de données

Certains de ces produits nécessitent une configuration particulière ou doivent être activés via la console Firebase.

Pour permettre aux utilisateurs de se connecter à l'application Web, vous allez définir dans cet atelier la méthode de connexion Adresse e-mail/Mot de passe:

Dans le panneau de gauche de la console Firebase, cliquez sur Build > Authentication (Créer > Authentification). Cliquez ensuite sur Commencer. Vous êtes maintenant dans le tableau de bord "Authentification", où vous pouvez consulter les utilisateurs inscrits, configurer des fournisseurs de connexion et gérer les paramètres.
Sélectionnez l'onglet Méthode de connexion (ou cliquez ici pour accéder directement à l'onglet).
Cliquez sur Adresse e-mail/Mot de passe dans les options du fournisseur, mettez le bouton bascule sur Activer, puis cliquez sur Enregistrer.

Configurer Cloud Firestore

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

Voici comment configurer Cloud Firestore dans votre projet Firebase:

Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Firestore database (Base de données Firestore).
Cliquez sur Créer une base de données.
Laissez le champ Database ID (ID de la base de données) défini sur (default).
Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre base de données.
Cliquez sur Créer.

5. Ajouter et configurer Firebase

Maintenant que vous avez créé votre projet Firebase et activé certains services, 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 à partir du CDN de Google, ou 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 permettent de réduire la taille globale de la page Web via un processus appelé "tree shaking". Pour en savoir plus sur les SDK modulaires, consultez 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. 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

De retour dans la console Firebase, accédez à la page de présentation de votre projet en cliquant sur Project Overview (Vue d'ensemble du projet) en haut à gauche.
Au centre de la page de présentation de votre projet, cliquez sur l'icône Web pour créer une application Web Firebase.
Enregistrez l'application avec le surnom Application Web.
Pour cet atelier de programmation, NE cochez PAS la case Configurer également Firebase Hosting pour cette application. Vous utiliserez le volet d'aperçu de StackBlitz pour le moment.
Cliquez sur Enregistrer l'application.
Stackblitz gère vos dépendances à votre place. Vous pouvez donc ignorer l'étape npm install firebase affichée dans la console.
Copiez l'objet de configuration Firebase dans le presse-papiers.
Cliquez sur Continuer vers la console.Ajoutez l'objet de configuration Firebase à votre application:
De retour dans StackBlitz, accédez au fichier index.js.
Recherchez la ligne de commentaire Add Firebase project configuration object here, puis collez votre extrait de configuration juste en dessous du commentaire.

Ajoutez l'appel de fonction initializeApp pour configurer Firebase à l'aide de votre configuration de 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.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. Ajouter la connexion des utilisateurs (réponse)

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

Vous aurez besoin d'un bouton de réponse qui invite l'utilisateur à se connecter avec son adresse e-mail. Pour ce faire, associez FirebaseUI à un bouton RSVP.FirebaseUI est une bibliothèque qui vous fournit une UI prédéfinie sur Firebase Auth.

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

Indique à FirebaseUI que vous souhaitez utiliser la méthode de connexion Adresse e-mail/Mot de passe.
Gère le rappel en cas de connexion réussie et renvoie la valeur "false" pour éviter une redirection. Vous ne souhaitez pas que la page s'actualise, car vous créez une application Web monopage.

Ajouter le code pour initialiser FirebaseUI Auth

Dans StackBlitz, accédez au fichier index.js.

En haut, recherchez 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';

Enregistrez une référence à l'objet d'authentification juste après initializeApp, comme suit:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
Notez que la configuration FirebaseUI est déjà fournie dans le code de démarrage. Il est déjà configuré pour utiliser le fournisseur d'authentification par e-mail.

En bas de la fonction main() dans index.js, ajoutez l'instruction d'initialisation FirebaseUI, comme suit:

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

Ajouter un bouton de réponse à l'HTML

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

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

Notez que dans le fichier index.html, il existe un conteneur avec l'ID firebaseui-auth-container. Il s'agit de l'ID que vous transmettrez à FirebaseUI pour stocker votre identifiant de connexion.
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
Aperçu de l'application
Configurez un écouteur sur le bouton RSVP et appelez la fonction de démarrage de FirebaseUI. Cela indique à FirebaseUI que vous souhaitez afficher la fenêtre de connexion.

Ajoutez le code suivant en 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();
```

Tester la connexion à l'application

Dans la fenêtre d'aperçu de StackBlitz, cliquez sur le bouton "Répondre" pour vous connecter à l'application.
- Pour cet atelier de programmation, vous pouvez utiliser n'importe quelle adresse e-mail, même une adresse e-mail factice, car vous ne configurez pas d'étape de validation de l'adresse e-mail pour cet atelier de programmation.
- Si un message d'erreur auth/operation-not-allowed ou The given sign-in provider is disabled for this Firebase project s'affiche, vérifiez que vous avez activé E-mail/Mot de passe comme fournisseur de connexion dans la console Firebase.
Aperçu de l'application
Accédez au tableau de bord Firebase Authentication dans la console Firebase. Dans l'onglet Utilisateurs, vous devriez voir les informations de compte que vous avez saisies pour vous connecter à l'application.

Ajouter l'état d'authentification à l'UI

Ensuite, assurez-vous que l'UI indique 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. Si un utilisateur est actuellement connecté, votre application remplace le bouton "RSVP" par un bouton "Déconnexion".

Dans StackBlitz, accédez au fichier index.js.

En haut, recherchez l'instruction d'importation firebase/auth, puis ajoutez signOut et onAuthStateChanged, comme suit:

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

Ajoutez le code suivant en 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();

Dans l'écouteur de bouton, vérifiez si un utilisateur est actuellement connecté et déconnectez-le. Pour ce faire, remplacez l'élément startRsvpButton.addEventListener actuel par le code suivant:

// ...
// 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);
  }
});

Le bouton de votre application devrait maintenant afficher LOGOUT (DÉCONNEXION) et revenir à RSVP (RÉPONDRE) lorsque vous cliquez dessus.

Aperçu de l'application

capture d'écran de cette étape

7. Écrire des messages dans Cloud Firestore

Savoir que les utilisateurs viennent est une bonne chose, mais offrez-leur autre chose à faire dans l'application. Que se passerait-il s'ils pouvaient laisser des messages dans un livre d'or ? Ils peuvent expliquer pourquoi ils ont hâte 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. Les données stockées dans la base de données sont divisées en collections, documents, champs et sous-collections. Vous allez stocker chaque message du chat en tant que document dans une collection de premier niveau appelée guestbook.

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

Ajouter des messages à Firestore

Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire des messages dans la base de données. Tout d'abord, ajoutez le code HTML des éléments d'interface utilisateur (champ de message et bouton d'envoi). Ajoutez ensuite le code qui associe 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:

Dans StackBlitz, accédez au fichier index.html.

Recherchez 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

capture d'écran de cette étape

Un utilisateur cliquant sur le bouton SEND (ENVOYER) déclenchera l'extrait de code ci-dessous. Il ajoute le contenu du champ de saisie du message à la collection 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) dans la collection guestbook.

Dans StackBlitz, accédez au fichier index.js.

En haut, recherchez l'instruction d'importation firebase/firestore, puis ajoutez getFirestore, addDoc et collection, comme suit:

// ...

// 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';

Nous allons maintenant enregistrer une référence à l'objet db Firestore juste après initializeApp:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

En bas de la fonction main(), ajoutez le code suivant.

Notez que auth.currentUser.uid fait référence à l'identifiant unique généré automatiquement par Firebase Authentication 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 n'importe qui puisse voir la discussion des invités. Pour sécuriser le chat, vous pouvez autoriser uniquement les utilisateurs connectés à consulter le livre d'or. Toutefois, pour vos propres applications, vous devez également sécuriser votre base de données à l'aide des règles de sécurité de Firebase. (Vous en apprendrez davantage sur les règles de sécurité dans la suite de cet atelier de programmation.)

Dans StackBlitz, accédez au fichier index.js.

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

Assurez-vous d'être connecté à l'application.
Saisissez un message tel que "Bonjour", puis cliquez sur SEND (ENVOYER).

Cette action écrit le message dans votre base de données Cloud Firestore. Toutefois, vous ne verrez pas encore le message dans votre application Web actuelle, car vous devez encore mettre en œuvre la récupération des données. C'est ce que vous allez faire ensuite.

Vous pouvez toutefois voir le nouveau message dans la console Firebase.

Dans la console Firebase, dans le tableau de bord "Base de données Firestore", vous devriez voir la collection guestbook avec votre nouveau message. Si vous continuez à envoyer des messages, votre collection de livres d'or contiendra de nombreux documents, comme ceci:

Console Firebase

capture d'écran de cette étape

8. Lire les messages

Synchroniser les messages

Il est agréable 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 des messages, vous devez ajouter des écouteurs qui se déclenchent lorsque les données changent, puis créer un élément d'UI qui affiche les nouveaux messages.

Vous allez ajouter du code qui écoutera les nouveaux messages ajoutés par l'application. Commencez par ajouter une section dans le code HTML pour afficher les messages:

Dans StackBlitz, accédez au fichier index.html.

Dans guestbook-container, ajoutez une section avec l'ID 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:

Dans StackBlitz, accédez au fichier index.js.

En haut, recherchez l'instruction d'importation firebase/firestore, puis ajoutez query, orderBy et onSnapshot, comme suit:

// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';

En 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, consultez les informations ci-dessous 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 à l'aide de la fonction collection. Le code ci-dessus écoute les modifications apportées à la collection guestbook, où sont stockés les messages de chat. Les messages sont également triés par date, à l'aide de orderBy('timestamp', 'desc') pour afficher les messages les plus récents en haut.

La fonction onSnapshot accepte deux paramètres: la requête à utiliser et une fonction de rappel. La fonction de rappel est déclenchée en cas de modification des documents correspondant à la requête. Cela peut être le cas si un message est supprimé, modifié ou ajouté. Pour en savoir plus, 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 devraient s'afficher 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 sont 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 Database (Base de données) de la console Firebase. Les modifications devraient apparaître dans l'UI.

Félicitations ! Vous lisez des documents Cloud Firestore dans votre application.

Aperçu de l'application

capture d'écran de cette étape

9. Configurer 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 aux lectures et aux écritures. Toutefois, vous ne devez utiliser le mode test que lors des premières phases de développement. Nous vous recommandons de configurer des règles de sécurité pour votre base de données lorsque vous développez votre application. La sécurité doit être intégrée à la structure et au 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 à toutes sortes d'éléments : toutes les écritures de l'intégralité de la base de données, ou bien les opérations sur un document spécifique.

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

Dans la section Build (Créer) de la console Firebase, cliquez sur Firestore Database (Base de données Firestore), puis sélectionnez l'onglet Rules (Règles) (ou cliquez ici pour accéder directement à l'onglet Rules).
Vous devriez voir les règles de sécurité par défaut suivantes, avec une limite d'accès public dans quelques semaines.

capture d'écran de cette étape

Identifier les collections

Commencez par identifier les collections dans lesquelles l'application écrit des données.

Supprimez la clause match /{document=**} existante pour que vos règles ressemblent à ceci:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}

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é

Comme 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 qui tente d'écrire dans le document dispose d'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;
    }
  }
}

Cliquez sur Publier pour déployer vos nouvelles règles.Désormais, seuls les utilisateurs connectés peuvent lire les messages (quels que soient les messages), 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

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

Cliquez sur Publier pour déployer vos nouvelles règles.

Réinitialiser les écouteurs

Étant donné que votre application ne permet désormais qu'aux utilisateurs authentifiés de 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.

Dans StackBlitz, accédez au fichier index.js.

Importez l'écouteur onSnapshot de la collection de livre d'or dans une nouvelle fonction appelée subscribeGuestbook. Attribuez également les résultats de la fonction onSnapshot à la variable guestbookListener.

L'écouteur onSnapshot de Firestore renvoie une fonction de désabonnement que vous pourrez utiliser pour annuler l'écouteur d'instantané plus tard.

// ...
// 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);
    });
  });
}

Ajoutez une fonction appelée unsubscribeGuestbook en dessous. 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.

Ajoutez subscribeGuestbook() en bas de if (user).

Ajoutez unsubscribeGuestbook() en 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: Mettez en pratique ce que vous avez appris

Enregistrer l'état de réponse d'un participant

Pour le moment, votre application permet aux utilisateurs de démarrer une discussion s'ils sont intéressés par l'événement. De plus, le seul moyen de savoir si quelqu'un va venir est qu'il le mentionne dans le chat. Organisons-nous et informons les gens du nombre de personnes qui participeront.

Vous allez ajouter un bouton d'activation pour permettre aux personnes qui souhaitent assister à l'événement de s'inscrire, puis comptabiliser le nombre de personnes présentes.

Dans StackBlitz, accédez au fichier index.html.

Dans guestbook-container, ajoutez un ensemble de boutons OUI et NON, comme suit:

<!-- ... -->
  <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

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

Dans StackBlitz, accédez au fichier index.js.

En haut, recherchez l'instruction d'importation firebase/firestore, puis ajoutez doc, setDoc et where, comme suit:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

En bas de la fonction main(), ajoutez le code suivant pour écouter l'état de la réponse:

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

Créez ensuite une collection appelée attendees, puis enregistrez une référence de document si l'utilisateur clique sur l'un des boutons RSVP. Définissez cette référence sur true ou false, en fonction du bouton sur lequel vous cliquez.

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, faites de même 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);
  }
};

Mettre à 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 à l'aide des boutons seront refusées.

Autoriser l'ajout à la collection `attendees`

Vous devez modifier les règles pour autoriser l'ajout à la collection attendees.

Pour la collection attendees, comme vous avez utilisé l'UID d'authentification comme nom du document, vous pouvez l'extraire et vérifier que l'uid de l'expéditeur est identique au document qu'il rédige. Vous autorisez tout le monde à lire la liste des participants (car elle ne contient aucune donnée privée), mais seul le créateur doit pouvoir la modifier.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
Cliquez sur Publier pour déployer vos nouvelles règles.

Ajouter des règles de validation

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;

    }
  }
}

N'oubliez pas de cliquer sur Publier pour déployer vos règles.

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

Lire l'état de la réponse

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

Dans StackBlitz, accédez au fichier index.html.

Dans description-container, ajoutez un élément avec l'ID number-attending.

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Enregistrez ensuite l'écouteur pour la collection attendees et comptez le nombre de réponses YES:

Dans StackBlitz, accédez au fichier index.js.

En bas de la fonction main(), ajoutez le code suivant pour écouter l'état de la réponse et compter les clics sur 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.

Créez une fonction qui vérifie si l'UID d'authentification actuel comporte une entrée dans la collection 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';
      }
    }
  });
}

Créons également une fonction pour vous désabonner. Il sera utilisé lorsque l'utilisateur se déconnectera.

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

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();
      // Subscribe 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();
    }
  });

Essayez de vous connecter en tant que plusieurs utilisateurs et observez le nombre augmenter à chaque clic 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.

Points abordés

Firebase Authentication
FirebaseUI
Cloud Firestore
Règles de sécurité Firebase

Étapes suivantes

Vous souhaitez en savoir plus sur le workflow de développement Firebase ? Consultez l'atelier de programmation sur l'émulateur Firebase pour découvrir comment tester et exécuter votre application entièrement en local.
Vous souhaitez en savoir plus sur d'autres produits Firebase ? Vous souhaitez peut-être stocker les fichiers image importés par les utilisateurs ? Ou envoyer des notifications à vos utilisateurs ? Pour en savoir plus sur de nombreux autres produits Firebase pour le Web, consultez l'atelier de programmation Firebase pour le Web.
Vous souhaitez en savoir plus sur Cloud Firestore ? Vous souhaitez peut-être en savoir plus sur les sous-collections et les transactions ? Pour en savoir plus sur Cloud Firestore, consultez l'atelier de programmation Web Cloud Firestore. Vous pouvez également regarder cette série YouTube pour découvrir Cloud Firestore.

En savoir plus

Site Firebase: firebase.google.com
Chaîne YouTube Firebase

Comment s'est-il passé ?

Votre avis nous intéresse ! Veuillez remplir un (très) court formulaire ici.

Découvrez Firebase pour le Web

1. Présentation

Points abordés

Prérequis

2. Obtenir le code de démarrage

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

Aperçu de l'application

4. Créer et configurer un projet Firebase

Créer un projet Firebase

Activer et configurer les produits Firebase dans la console

Activer la connexion par e-mail pour Firebase Authentication

Configurer Cloud Firestore

5. Ajouter et configurer Firebase

Ajouter les bibliothèques Firebase

Ajouter une application Web Firebase à votre projet Firebase

6. Ajouter la connexion des utilisateurs (réponse)

Authentifier vos utilisateurs avec la connexion par e-mail et FirebaseUI

Ajouter le code pour initialiser FirebaseUI Auth

Ajouter un bouton de réponse à l'HTML

Tester la connexion à l'application

Ajouter l'état d'authentification à l'UI

Aperçu de l'application

7. Écrire des messages dans Cloud Firestore

Modèle de données

Ajouter des messages à Firestore

Aperçu de l'application

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

Tester l'envoi de messages

Console Firebase

8. Lire les messages

Synchroniser les messages

Tester la synchronisation des messages

Aperçu de l'application

9. Configurer des règles de sécurité de base

Identifier les collections

Ajouter des règles de sécurité

Ajouter des règles de validation

Réinitialiser les écouteurs

10. Étape bonus: Mettez en pratique ce que vous avez appris

Enregistrer l'état de réponse d'un participant

Aperçu de l'application

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

Autoriser l'ajout à la collection attendees

Ajouter des règles de validation

Lire l'état de la réponse

Aperçu de l'application

11. Félicitations !

Points abordés

Étapes suivantes

En savoir plus

Comment s'est-il passé ?

Autoriser l'ajout à la collection `attendees`