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 à 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 de logiciel ni compte StackBlitz spécial.

StackBlitz vous permet de partager des projets avec d'autres personnes. 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 maintenant d'une copie du code de démarrage dans votre propre projet StackBlitz, avec 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, familiarisons-nous un peu avec l'interface de StackBlitz.

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

Lorsque vous modifiez le texte, l'actualisation automatique de la page dans StackBlitz affiche les détails du nouvel événement. Super, 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 cela, vous devez associer 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 de création de projet. 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 Google 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 utiliserez la méthode de connexion Adresse e-mail/Mot de passe dans cet atelier de programmation:

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 voir les utilisateurs inscrits, configurer les 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, basculez 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 ID de 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é.
Dans la suite de cet atelier de programmation, vous allez ajouter des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni ne divulguez 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 propose un regroupement automatique, ce qui vous permet d'ajouter les bibliothèques Firebase à l'aide d'instructions d'importation. Vous allez utiliser les versions modulaires (v9) des bibliothèques, qui permettent de réduire la taille globale de la page Web grâce à 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 à partir 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

Revenez dans la console Firebase et accédez à la page de présentation de votre projet en cliquant sur 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 sous le pseudo Web App (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 Register app (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 unique de projet Firebase.

// ...
// 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 effectue deux opérations:

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 la déclaration 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 auth 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 au code 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 dans cet atelier de programmation, le fichier index.js contient déjà des hooks pour ces ID spécifiques.

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 allez transmettre à FirebaseUI pour conserver vos informations 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 "Répondre" et appelez la fonction de démarrage 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.
- Dans cet atelier de programmation, vous pouvez utiliser n'importe quelle adresse e-mail, même une adresse e-mail fictive, car vous ne configurez pas d'étape de validation d'adresse e-mail pour cet atelier de programmation.
- Si un message d'erreur indiquant auth/operation-not-allowed ou The given sign-in provider is disabled for this Firebase project s'affiche, vérifiez que vous avez activé Adresse e-mail/Mot de passe en tant que 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'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. Si un utilisateur est actuellement connecté, votre application remplace le bouton "Répondre" par un bouton "Se déconnecter".

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

En haut de l'écran, 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 boutons, vérifiez s'il existe un utilisateur actuel et déconnectez-le. Pour ce faire, remplacez l'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);
  }
});

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

C'est bien de savoir que les utilisateurs viennent, mais laissons-leur autre chose à faire dans l'application. Et 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, et les données qu'elle contient 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 haut 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 une fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans la base de données. Tout d'abord, vous ajoutez le code HTML des éléments de l'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. Elle 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) à la collection guestbook.

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

En haut de l'écran, 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'ID unique généré automatiquement et fourni par Firebase Authentication à 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 pour les 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é 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 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 le voir 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 guestbook avec le message que vous venez d'ajouter. Si vous continuez à envoyer des messages, votre collection de livre d'or contiendra de nombreux documents, comme celui-ci:

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'interface utilisateur qui affiche les nouveaux messages.

Vous allez ajouter du code qui écoute les nouveaux messages de l'application. Tout d'abord, ajoutez 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>

<!-- ... -->

Enregistrez ensuite 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 lire en boucle tous les documents (messages de livre d'or) de la base de données. Pour en savoir plus sur ce qui se passe dans ce code, consultez les informations situées 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 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 classés par date. orderBy('timestamp', 'desc') permet d'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 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 à 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 Créer de la console Firebase, cliquez sur Base de données Firestore, puis sélectionnez l'onglet Règles (ou cliquez ici pour accéder directement à l'onglet Règles).
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 de message qu'avec votre ID 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;
    }
  }
}

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. Affectez é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és 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);
    });
  });
}

En dessous, ajoutez une fonction 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.

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: mettre en pratique ce que vous avez appris

Enregistrer la 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. Soyons organisés pour informer les autres participants du nombre de participants.

Vous allez ajouter un bouton pour enregistrer les personnes qui souhaitent participer à l'événement, puis recueillir le nombre de participants.

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, enregistrez la réponse dans la base de données à l'aide de son UID d'authentification.

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();

Ensuite, créez une collection appelée attendees, puis enregistrez une référence de document si l'utilisateur clique sur l'un des boutons "Répondre". Définissez cette référence sur true ou false selon le bouton sur lequel l'utilisateur clique.

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, les mêmes valeurs sont utilisées 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 mettre à jour les règles pour autoriser l'ajout à la collection attendees.

Pour la collection attendees, comme vous avez utilisé l'UID d'authentification comme nom de 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 à consulter la liste des participants (puisqu'elle ne contient pas de données privées), mais seul le créateur doit être en mesure de 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;
    }
  }
}
```
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.

Consulter l'état des réponses

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();

Pour finir, 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 se 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 entièrement votre application en local.
Vous voulez en savoir plus sur les autres produits Firebase ? Vous souhaitez peut-être stocker les fichiers image importés par les utilisateurs ? Ou envoyer des notifications à vos utilisateurs ? Consultez l'atelier de programmation Firebase sur le Web pour en savoir plus sur de nombreux autres produits 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 consulter cette série YouTube pour découvrir Cloud Firestore.

En savoir plus

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

Comment cela s'est-il passé ?

Votre avis nous intéresse ! Veuillez remplir un (très) formulaire sur cette page.

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 au code 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 pour les 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&#39;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: mettre en pratique ce que vous avez appris

Enregistrer la 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

Consulter l'état des réponses

Aperçu de l'application

11. Félicitations !

Points abordés

Étapes suivantes

En savoir plus

Comment cela s'est-il passé ?

Aperçu de l'application

Autoriser l'ajout à la collection `attendees`