Questa pagina è stata tradotta dall'API Cloud Translation.

Conosci Firebase per il web

1. Panoramica

In questo codelab imparerai alcune delle nozioni di base di Firebase per creare applicazioni web interattive. Creerai un evento RSVP e un'app di chat per il libro degli ospiti utilizzando diversi prodotti Firebase.

screenshot di questo passaggio

Cosa imparerai

Autenticare gli utenti con Firebase Authentication e FirebaseUI.
Sincronizza i dati utilizzando Cloud Firestore.
Scrivi regole di sicurezza Firebase per proteggere un database.

Di cosa avrai bisogno

Un browser di tua scelta, come Chrome.
Accesso a stackblitz.com (nessun account o accesso necessario).
Un account Google, come un account Gmail. Ti consigliamo l'account e-mail che usi già per il tuo account GitHub. Ciò ti consente di utilizzare funzionalità avanzate in StackBlitz.
Il codice di esempio del codelab. Vedere il passaggio successivo per sapere come ottenere il codice.

2. Ottieni il codice iniziale

In questo codelab, crei un'app utilizzando StackBlitz , un editor online in cui sono integrati diversi flussi di lavoro Firebase. Stackblitz non richiede l'installazione di software o un account StackBlitz speciale.

StackBlitz ti consente di condividere progetti con altri. Altre persone che hanno l'URL del tuo progetto StackBlitz possono vedere il tuo codice e creare un fork del tuo progetto, ma non possono modificare il tuo progetto StackBlitz.

Vai a questo URL per il codice iniziale: https://stackblitz.com/edit/firebase-gtk-web-start
Nella parte superiore della pagina StackBlitz, fai clic su Fork :

screenshot di questo passaggio

Ora hai una copia del codice iniziale come tuo progetto StackBlitz, che ha un nome univoco, insieme a un URL univoco. Tutti i tuoi file e le modifiche vengono salvati in questo progetto StackBlitz.

3. Modificare le informazioni sull'evento

I materiali di partenza per questo codelab forniscono una struttura per l'app Web, inclusi alcuni fogli di stile e un paio di contenitori HTML per l'app. Più avanti in questo codelab, collegherai questi container a Firebase.

Per iniziare, acquisiamo un po' più di familiarità con l'interfaccia di StackBlitz.

In StackBlitz, apri il file index.html .
Individua event-details-container e description-container , quindi prova a modificare alcuni dettagli dell'evento.

Mentre modifichi il testo, il ricaricamento automatico della pagina in StackBlitz mostra i nuovi dettagli dell'evento. Fantastico, sì?

<!-- ... -->

<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'anteprima della tua app dovrebbe essere simile a questa:

Anteprima dell'app

screenshot di questo passaggio

4. Crea e imposta un progetto Firebase

La visualizzazione delle informazioni sull'evento è ottima per i tuoi ospiti, ma mostrare solo gli eventi non è molto utile per nessuno. Aggiungiamo alcune funzionalità dinamiche a questa app. Per questo, dovrai collegare Firebase alla tua app. Per iniziare con Firebase, devi creare e configurare un progetto Firebase.

Crea un progetto Firebase

Accedi a Firebase .
Nella console Firebase, fai clic su Aggiungi progetto (o Crea un progetto ), quindi assegna un nome al tuo progetto Firebase Firebase-Web-Codelab .
Fai clic sulle opzioni di creazione del progetto. Accetta i termini di Firebase se richiesto. Nella schermata di Google Analytics, fai clic su "Non abilitare", perché non utilizzerai Analytics per questa app.

Per ulteriori informazioni sui progetti Firebase, consulta Capire i progetti Firebase .

Abilita e configura i prodotti Firebase nella console

L'app che stai creando utilizza diversi prodotti Firebase disponibili per le app web:

Autenticazione Firebase e interfaccia utente Firebase per consentire agli utenti di accedere facilmente alla tua app.
Cloud Firestore per salvare i dati strutturati sul cloud e ricevere notifiche istantanee quando i dati cambiano.
Regole di sicurezza Firebase per proteggere il tuo database.

Alcuni di questi prodotti richiedono una configurazione speciale o devono essere abilitati utilizzando la console Firebase.

Per consentire agli utenti di accedere all'app Web, utilizzerai il metodo di accesso tramite e-mail/password per questo codelab:

Nel pannello di sinistra della console Firebase, fai clic su Crea > Autenticazione . Quindi fai clic su Inizia . Ora sei nel dashboard di autenticazione, dove puoi vedere gli utenti registrati, configurare i provider di accesso e gestire le impostazioni.
Selezionare la scheda Metodo di accesso (o fare clic qui per andare direttamente alla scheda).
Fai clic su Email/Password dalle opzioni del provider, sposta l'interruttore su Abilita , quindi fai clic su Salva .

Configura Cloud Firestore

L'app Web utilizza Cloud Firestore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.

Ecco come configurare Cloud Firestore:

Nel pannello di sinistra della console Firebase, fai clic su Crea > Database Firestore . Quindi fai clic su Crea database .
Fai clic su Crea database .
Selezionare l'opzione Avvia in modalità test . Leggi il disclaimer sulle regole di sicurezza. La modalità test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Fare clic su Avanti .

Attenzione: nelle prime fasi di questo codelab, utilizzi la modalità test. Più avanti nel codelab, tuttavia, scriverai le regole di sicurezza di Firebase per proteggere il tuo database.
Per le tue app, in particolare le app di produzione, è molto importante proteggere il tuo database usando le regole di sicurezza. Scopri di più sulle regole di sicurezza nella documentazione di Firebase .
Seleziona la posizione per il tuo database (puoi semplicemente usare quella predefinita). Tieni presente, tuttavia, che questa posizione non può essere modificata in seguito.
Fai clic su Fatto .

5. Aggiungi e configura Firebase

Ora che hai creato il tuo progetto Firebase e abilitato alcuni servizi, devi indicare al codice che desideri utilizzare Firebase e quale progetto Firebase utilizzare.

Aggiungi le librerie Firebase

Affinché la tua app possa utilizzare Firebase, devi aggiungere le librerie Firebase all'app. Esistono diversi modi per farlo, come descritto nella documentazione di Firebase . Ad esempio, puoi aggiungere le librerie dal CDN di Google oppure puoi installarle localmente utilizzando npm e quindi impacchettarle nella tua app se stai utilizzando Browserify.

StackBlitz fornisce il raggruppamento automatico, quindi puoi aggiungere le librerie Firebase utilizzando le istruzioni di importazione. Utilizzerai le versioni modulari (v9) delle librerie, che aiutano a ridurre le dimensioni complessive della pagina Web attraverso un processo chiamato "tree shaking". Puoi saperne di più sugli SDK modulari nella documentazione .

Per creare questa app, utilizzi le librerie Firebase Authentication, FirebaseUI e Cloud Firestore. Per questo codelab, le seguenti istruzioni di importazione sono già incluse nella parte superiore del file index.js e importeremo più metodi da ciascuna libreria Firebase man mano che procediamo:

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

Aggiungi un'app web Firebase al tuo progetto Firebase

Tornando alla console Firebase, vai alla pagina della panoramica del tuo progetto facendo clic su Panoramica del progetto in alto a sinistra.
Al centro della pagina di panoramica del progetto, fai clic sull'icona web per creare una nuova app Web Firebase.
Registra l'app con il nickname Web App .
Per questo codelab, NON selezionare la casella accanto a Configura anche l'hosting Firebase per questa app . Per ora utilizzerai il riquadro di anteprima di StackBlitz.
Fai clic su Registra app .
Stackblitz gestisce le tue dipendenze per te, quindi puoi saltare il passaggio npm install firebase che viene visualizzato nella console.
Copia l' oggetto di configurazione Firebase negli appunti.
Fai clic su Continua alla console . Aggiungi l'oggetto di configurazione Firebase alla tua app:
Di nuovo in StackBlitz, vai al file index.js .
Individua la riga di commento Add Firebase project configuration object here , quindi incolla lo snippet di configurazione appena sotto il commento.

Aggiungi la chiamata alla funzione initializeApp per configurare Firebase utilizzando la configurazione del tuo progetto Firebase univoco.

// ...
// 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. Aggiungere l'accesso utente (RSVP)

Ora che hai aggiunto Firebase all'app, puoi configurare un pulsante RSVP che registri le persone utilizzando Firebase Authentication .

Avrai bisogno di un pulsante RSVP che richieda all'utente di accedere con il proprio indirizzo email. Puoi farlo collegando FirebaseUI a un pulsante RSVP. FirebaseUI è una libreria che ti offre un'interfaccia utente predefinita su Firebase Auth.

FirebaseUI richiede una configurazione (vedi le opzioni nella documentazione ) che fa due cose:

Indica a FirebaseUI che desideri utilizzare il metodo di accesso tramite e-mail/password .
Gestisce la richiamata per un accesso riuscito e restituisce false per evitare un reindirizzamento. Non vuoi che la pagina si aggiorni perché stai creando un'app Web a pagina singola.

Aggiungi il codice per inizializzare FirebaseUI Auth

In StackBlitz, vai al file index.js .

In alto, individua la dichiarazione di importazione firebase/auth , quindi aggiungi getAuth e EmailAuthProvider , in questo modo:

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

import {} from 'firebase/firestore';

Salva un riferimento all'oggetto auth subito dopo initializeApp , in questo modo:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
Si noti che la configurazione FirebaseUI è già fornita nel codice iniziale. È già configurato per utilizzare il provider di autenticazione e-mail.

Nella parte inferiore della funzione main() in index.js , aggiungi l'istruzione di inizializzazione FirebaseUI, in questo modo:

async function main() {
  // ...

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

Aggiungi un pulsante RSVP all'HTML

In StackBlitz, vai al file index.html .
Aggiungi l'HTML per un pulsante RSVP all'interno del event-details-container come mostrato nell'esempio seguente.

Fai attenzione a utilizzare gli stessi valori id mostrati di seguito perché, per questo codelab, sono già presenti hook per questi ID specifici nel file index.js .

Nota che nel file index.html c'è un contenitore con l'ID firebaseui-auth-container . Questo è l'ID che passerai a FirebaseUI per conservare il tuo login.
```


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

```
Anteprima app
Imposta un listener sul pulsante RSVP e chiama la funzione di avvio FirebaseUI. Questo dice a FirebaseUI che vuoi vedere la finestra di accesso.

Aggiungi il seguente codice alla fine della funzione main() in index.js :
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

Verifica l'accesso all'app

Nella finestra di anteprima di StackBlitz, fai clic sul pulsante RSVP per accedere all'app.
- Per questo codelab, puoi utilizzare qualsiasi indirizzo e-mail, anche un indirizzo e-mail falso, poiché non stai impostando un passaggio di verifica e-mail per questo codelab.
- Se viene visualizzato un messaggio di errore che indica auth/operation-not-allowed o The given sign-in provider is disabled for this Firebase project , assicurati di aver abilitato Email/Password come provider di accesso nella console Firebase.
Anteprima dell'app
Vai alla dashboard di autenticazione nella console Firebase. Nella scheda Utenti , dovresti vedere le informazioni sull'account che hai inserito per accedere all'app.

Aggiungi lo stato di autenticazione all'interfaccia utente

Successivamente, assicurati che l'interfaccia utente rifletta il fatto che hai eseguito l'accesso.

Utilizzerai il callback del listener di stato di Firebase Authentication, che riceve una notifica ogni volta che lo stato di accesso dell'utente cambia. Se al momento c'è un utente connesso, la tua app cambierà il pulsante "RSVP" in un pulsante "logout".

In StackBlitz, vai al file index.js .

In alto, individua l'istruzione di importazione firebase/auth , quindi aggiungi signOut e onAuthStateChanged , in questo modo:

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

import {} from 'firebase/firestore';

Aggiungi il seguente codice alla fine della funzione main() :

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

Nel pulsante listener, controlla se c'è un utente corrente e disconnettilo. Per fare ciò, sostituire l'attuale startRsvpButton.addEventListener con quanto segue:

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

Ora, il pulsante nella tua app dovrebbe mostrare LOGOUT e dovrebbe tornare a RSVP quando viene cliccato.

Anteprima dell'app

screenshot di questo passaggio

7. Scrivi messaggi a Cloud Firestore

Sapere che gli utenti stanno arrivando è fantastico, ma diamo agli ospiti qualcos'altro da fare nell'app. E se potessero lasciare messaggi in un libro degli ospiti? Possono condividere il motivo per cui sono entusiasti di venire o chi sperano di incontrare.

Per archiviare i messaggi di chat che gli utenti scrivono nell'app, utilizzerai Cloud Firestore .

Modello dati

Cloud Firestore è un database NoSQL e i dati archiviati nel database sono suddivisi in raccolte, documenti, campi e sottoraccolte. Archivierai ogni messaggio della chat come documento in una raccolta di primo livello chiamata guestbook .

Grafico del modello di dati Firestore che mostra una raccolta di guestbook con più documenti di messaggi

Aggiungi messaggi a Firestore

In questa sezione, aggiungerai la funzionalità per consentire agli utenti di scrivere nuovi messaggi nel database. Innanzitutto, aggiungi l'HTML per gli elementi dell'interfaccia utente (campo del messaggio e pulsante di invio). Quindi, aggiungi il codice che collega questi elementi al database.

Per aggiungere gli elementi dell'interfaccia utente di un campo messaggio e un pulsante di invio:

In StackBlitz, vai al file index.html .

Individua il guestbook-container , quindi aggiungi il codice HTML seguente per creare un modulo con il campo di immissione del messaggio e il pulsante di invio.

<!-- ... -->

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

<!-- ... -->

Anteprima dell'app

screenshot di questo passaggio

Un utente che fa clic sul pulsante INVIA attiverà lo snippet di codice riportato di seguito. Aggiunge il contenuto del campo di input del messaggio alla raccolta guestbook del database. Nello specifico, il metodo addDoc aggiunge il contenuto del messaggio a un nuovo documento (con un ID generato automaticamente) alla raccolta guestbook .

In StackBlitz, vai al file index.js .

In alto, individua l'istruzione di importazione firebase/firestore , quindi aggiungi getFirestore , addDoc e collection , in questo modo:

// ...

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

Ora salveremo un riferimento all'oggetto Firestore db subito dopo initializeApp :
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

Nella parte inferiore della funzione main() , aggiungi il seguente codice.

Tieni presente che auth.currentUser.uid è un riferimento all'ID univoco generato automaticamente che Firebase Authentication fornisce a tutti gli utenti che hanno effettuato l'accesso.

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

Mostra il libro degli ospiti solo agli utenti che hanno effettuato l'accesso

Non vuoi che chiunque veda la chat degli ospiti. Una cosa che puoi fare per proteggere la chat è consentire solo agli utenti che hanno effettuato l'accesso di visualizzare il libro degli ospiti. Detto questo, per le tue app, ti consigliamo di proteggere anche il tuo database con Firebase Security Rules . (Ci sono più informazioni sulle regole di sicurezza più avanti nel codelab.)

In StackBlitz, vai al file index.js .

Modifica il listener onAuthStateChanged per nascondere e visualizzare il guestbook.

// ...

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

Testare l'invio di messaggi

Assicurati di aver effettuato l'accesso all'app.
Inserisci un messaggio come "Ciao!", quindi fai clic su INVIA .

Questa azione scrive il messaggio nel tuo database Cloud Firestore. Tuttavia, non vedrai ancora il messaggio nella tua app Web effettiva perché devi ancora implementare il recupero dei dati. Lo farai dopo.

Ma puoi vedere il messaggio appena aggiunto nella console Firebase.

Nella console di Firebase, nella dashboard del database Firestore , dovresti vedere la raccolta guestbook con il messaggio appena aggiunto. Se continui a inviare messaggi, la tua collezione di guestbook conterrà molti documenti, come questo:

Console Firebase

screenshot di questo passaggio

8. Leggi i messaggi

Sincronizza i messaggi

È bello che gli ospiti possano scrivere messaggi nel database, ma non possono ancora vederli nell'app.

Per visualizzare i messaggi, devi aggiungere listener che si attivano quando i dati cambiano, quindi creare un elemento dell'interfaccia utente che mostri i nuovi messaggi.

Aggiungerai il codice che ascolta i nuovi messaggi aggiunti dall'app. Innanzitutto, aggiungi una sezione nell'HTML per mostrare i messaggi:

In StackBlitz, vai al file index.html .

In guestbook-container , aggiungi una nuova sezione con l'ID di guestbook .

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Successivamente, registra il listener che ascolta le modifiche apportate ai dati:

In StackBlitz, vai al file index.js .
In alto, individua l'istruzione di importazione firebase/firestore , quindi aggiungi query , orderBy e onSnapshot , in questo modo:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

Nella parte inferiore della funzione main() , aggiungi il seguente codice per scorrere tutti i documenti (messaggi del libro degli ospiti) nel database. Per ulteriori informazioni su ciò che accade in questo codice, leggi le informazioni sotto lo snippet.

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

Per ascoltare i messaggi nel database, hai creato una query su una raccolta specifica utilizzando la funzione collection . Il codice sopra ascolta i cambiamenti nella raccolta guestbook , che è dove vengono archiviati i messaggi di chat. I messaggi sono anche ordinati per data, utilizzando orderBy('timestamp', 'desc') per visualizzare i messaggi più recenti in alto.

La funzione onSnapshot accetta due parametri: la query da utilizzare e una funzione di callback. La funzione di callback viene attivata quando vengono apportate modifiche ai documenti che corrispondono alla query. Questo potrebbe accadere se un messaggio viene eliminato, modificato o aggiunto. Per ulteriori informazioni, consulta la documentazione di Cloud Firestore .

Testare la sincronizzazione dei messaggi

Cloud Firestore sincronizza automaticamente e istantaneamente i dati con i client iscritti al database.

I messaggi che hai creato in precedenza nel database dovrebbero essere visualizzati nell'app. Sentiti libero di scrivere nuovi messaggi; dovrebbero apparire all'istante.
Se apri il tuo spazio di lavoro in più finestre o schede, i messaggi verranno sincronizzati in tempo reale tra le schede.
(Facoltativo) Puoi provare a eliminare, modificare o aggiungere manualmente nuovi messaggi direttamente nella sezione Database della console Firebase; eventuali modifiche dovrebbero apparire nell'interfaccia utente.

Congratulazioni! Stai leggendo i documenti di Cloud Firestore nella tua app!

Anteprima dell'app

screenshot di questo passaggio

9. Impostare regole di sicurezza di base

Inizialmente hai configurato Cloud Firestore per utilizzare la modalità test, il che significa che il tuo database è aperto per letture e scritture. Tuttavia, dovresti utilizzare la modalità test solo durante le primissime fasi di sviluppo. Come best practice, dovresti impostare regole di sicurezza per il tuo database mentre sviluppi la tua app. La sicurezza dovrebbe essere parte integrante della struttura e del comportamento della tua app.

Le regole di sicurezza ti consentono di controllare l'accesso ai documenti e alle raccolte nel tuo database. La sintassi flessibile delle regole consente di creare regole che corrispondono a qualsiasi cosa, da tutte le scritture sull'intero database alle operazioni su un documento specifico.

Puoi scrivere regole di sicurezza per Cloud Firestore nella console di Firebase:

Nella sezione Build della console Firebase, fai clic su Database Firestore , quindi seleziona la scheda Regole (o fai clic qui per andare direttamente alla scheda Regole ).
Dovresti vedere le seguenti regole di sicurezza predefinite, con un limite di tempo per l'accesso pubblico di un paio di settimane da oggi.

screenshot di questo passaggio

Identifica le collezioni

Innanzitutto, identifica le raccolte in cui l'app scrive i dati.

Elimina la clausola match /{document=**} , in modo che le tue regole abbiano questo aspetto:

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

In match /databases/{database}/documents , identifica la raccolta che desideri proteggere:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Aggiungi regole di sicurezza

Poiché hai utilizzato l'UID di autenticazione come campo in ogni documento del guestbook, puoi ottenere l'UID di autenticazione e verificare che chiunque tenti di scrivere sul documento abbia un UID di autenticazione corrispondente.

Aggiungi le regole di lettura e scrittura al tuo set di regole come mostrato di seguito:

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

Fai clic su Pubblica per implementare le tue nuove regole.Ora, per il libro degli ospiti, solo gli utenti che hanno effettuato l'accesso possono leggere i messaggi (qualsiasi messaggio!), ma puoi creare un messaggio solo utilizzando il tuo ID utente. Inoltre, non consentiamo la modifica o l'eliminazione dei messaggi.

Aggiungi regole di convalida

Aggiungi la convalida dei dati per assicurarti che tutti i campi previsti siano presenti nel documento:

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

Fare clic su Pubblica per distribuire le nuove regole.

Reimposta gli ascoltatori

Poiché la tua app ora consente l'accesso solo agli utenti autenticati, dovresti spostare la query firestore del libro degli ospiti all'interno del listener di autenticazione. In caso contrario, si verificheranno errori di autorizzazione e l'app verrà disconnessa quando l'utente si disconnette.

In StackBlitz, vai al file index.js .

Estrai la raccolta di guestbook onSnapshot listener in una nuova funzione chiamata subscribeGuestbook . Inoltre, assegna i risultati della funzione onSnapshot alla variabile guestbookListener .

Il listener onSnapshot di Firestore restituisce una funzione di annullamento dell'iscrizione che potrai utilizzare per annullare il listener di snapshot in un secondo momento.

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

Aggiungi una nuova funzione sotto chiamata unsubscribeGuestbook . Controlla se la variabile guestbookListener non è nulla, quindi chiama la funzione per annullare il listener.

// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}

Infine, aggiungi le nuove funzioni al callback onAuthStateChanged .

Aggiungi subscribeGuestbook() in fondo a if (user) .

Aggiungi unsubscribeGuestbook() alla fine dell'istruzione 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. Passaggio bonus: pratica ciò che hai imparato

Registra lo stato RSVP di un partecipante

Al momento, la tua app consente alle persone di iniziare a chattare solo se sono interessate all'evento. Inoltre, l'unico modo per sapere se qualcuno sta arrivando è se lo pubblica nella chat. Organizziamoci e facciamo sapere quante persone stanno arrivando.

Aggiungerai un interruttore per registrare le persone che vogliono partecipare all'evento, quindi raccoglierai un conteggio di quante persone stanno arrivando.

In StackBlitz, vai al file index.html .

In guestbook-container , aggiungi una serie di pulsanti YES e NO , in questo modo:

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

Anteprima dell'app

screenshot di questo passaggio

Successivamente, registra l'ascoltatore per i clic sui pulsanti. Se l'utente fa clic su YES , utilizza il proprio UID di autenticazione per salvare la risposta nel database.

In StackBlitz, vai al file index.js .

In alto, individua l'istruzione di importazione firebase/firestore , quindi aggiungi doc , setDoc e where , in questo modo:

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

Nella parte inferiore della funzione main() , aggiungi il seguente codice per ascoltare lo stato RSVP:

async function main() {
  // ...

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

Successivamente, crea una nuova raccolta denominata attendees , quindi registra un riferimento al documento se viene fatto clic su uno dei pulsanti RSVP. Imposta quel riferimento su true o false a seconda di quale pulsante viene cliccato.

Innanzitutto, per 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);
  }
};

Quindi, lo stesso per rsvpNo , ma con il valore 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);
  }
};

Aggiorna le tue regole di sicurezza

Poiché hai già impostato alcune regole, i nuovi dati che stai aggiungendo con i pulsanti verranno rifiutati.

Consenti aggiunte alla raccolta `attendees`

Dovrai aggiornare le regole per consentire l'aggiunta alla raccolta attendees .

Per la raccolta attendees , poiché hai utilizzato l'UID di autenticazione come nome del documento, puoi prenderlo e verificare che l' uid del mittente sia lo stesso del documento che stanno scrivendo. Consentirai a tutti di leggere l'elenco dei partecipanti (poiché non ci sono dati privati), ma solo il creatore dovrebbe essere in grado di aggiornarlo.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
Fare clic su Pubblica per distribuire le nuove regole.

Aggiungi regole di convalida

Aggiungi alcune regole di convalida dei dati per assicurarti che tutti i campi previsti siano presenti nel documento:

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;

    }
  }
}

Non dimenticare di fare clic su Pubblica per implementare le tue regole!

(Facoltativo) Ora puoi visualizzare i risultati del clic sui pulsanti. Vai alla dashboard di Cloud Firestore nella console di Firebase.

Leggi lo stato RSVP

Ora che hai registrato le risposte, vediamo chi sta arrivando e rifletterlo nell'interfaccia utente.

In StackBlitz, vai al file index.html .

In description-container , aggiungi un nuovo elemento con l'ID di number-attending .

<!-- ... -->

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

<!-- ... -->

Successivamente, registra l'ascoltatore per la raccolta attendees e conta il numero di risposte SÌ :

In StackBlitz, vai al file index.js .

Nella parte inferiore della funzione main() , aggiungi il seguente codice per ascoltare lo stato RSVP e contare i clic SÌ .

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

Infine, evidenziamo il pulsante corrispondente allo stato corrente.

Crea una funzione che controlli se l'UID di autenticazione corrente ha una voce nella raccolta attendees , quindi imposta la classe del pulsante su 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';
      }
    }
  });
}

Inoltre, creiamo una funzione per annullare l'iscrizione. Verrà utilizzato quando l'utente si disconnette.

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

Chiama le funzioni dal listener di autenticazione.

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

Prova ad accedere come più utenti e osserva il conteggio aumentare a ogni ulteriore clic del pulsante SÌ .

Anteprima dell'app

screenshot di questo passaggio

11. Congratulazioni!

Hai utilizzato Firebase per creare un'applicazione web interattiva in tempo reale!

Di cosa abbiamo parlato

Autenticazione Firebase
FirebaseUI
CloudFirestore
Regole di sicurezza di Firebase

Prossimi passi

Vuoi saperne di più sul flusso di lavoro per sviluppatori di Firebase? Dai un'occhiata al codelab dell'emulatore Firebase per scoprire come testare ed eseguire la tua app completamente in locale.
Vuoi saperne di più su altri prodotti Firebase? Forse vuoi archiviare i file di immagine che gli utenti caricano? O inviare notifiche ai tuoi utenti? Dai un'occhiata al codelab web di Firebase per un codelab che approfondisce molti altri prodotti Firebase per il web.
Vuoi saperne di più su Cloud Firestore? Forse vuoi conoscere sottoraccolte e transazioni? Vai al codelab web di Cloud Firestore per un codelab che approfondisce Cloud Firestore. Oppure dai un'occhiata a questa serie su YouTube per conoscere Cloud Firestore !

Saperne di più

Sito Firebase: firebase.google.com
Canale YouTube Firebase

Com'è andata?

Ci piacerebbe il tuo feedback! Si prega di compilare un modulo (molto) breve qui .

Conosci Firebase per il web

1. Panoramica

Cosa imparerai

Di cosa avrai bisogno

2. Ottieni il codice iniziale

3. Modificare le informazioni sull'evento

Anteprima dell'app

4. Crea e imposta un progetto Firebase

Crea un progetto Firebase

Abilita e configura i prodotti Firebase nella console

Abilita l'accesso e-mail per l'autenticazione Firebase

Configura Cloud Firestore

5. Aggiungi e configura Firebase

Aggiungi le librerie Firebase

Aggiungi un'app web Firebase al tuo progetto Firebase

6. Aggiungere l'accesso utente (RSVP)

Autentica i tuoi utenti con Email Sign-In e FirebaseUI

Aggiungi il codice per inizializzare FirebaseUI Auth

Aggiungi un pulsante RSVP all'HTML

Verifica l'accesso all'app

Aggiungi lo stato di autenticazione all'interfaccia utente

Anteprima dell'app

7. Scrivi messaggi a Cloud Firestore

Modello dati

Aggiungi messaggi a Firestore

Anteprima dell'app

Mostra il libro degli ospiti solo agli utenti che hanno effettuato l'accesso

Testare l'invio di messaggi

Console Firebase

8. Leggi i messaggi

Sincronizza i messaggi

Testare la sincronizzazione dei messaggi

Anteprima dell'app

9. Impostare regole di sicurezza di base

Identifica le collezioni

Aggiungi regole di sicurezza

Aggiungi regole di convalida

Reimposta gli ascoltatori

10. Passaggio bonus: pratica ciò che hai imparato

Registra lo stato RSVP di un partecipante

Anteprima dell'app

Aggiorna le tue regole di sicurezza

Consenti aggiunte alla raccolta attendees

Aggiungi regole di convalida

Leggi lo stato RSVP

Anteprima dell'app

11. Congratulazioni!

Di cosa abbiamo parlato

Prossimi passi

Saperne di più

Com'è andata?

Consenti aggiunte alla raccolta `attendees`