Google 致力于为黑人社区推动种族平等。查看具体举措
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Inizia con Firebase Authentication sui siti web

Puoi utilizzare Firebase Authentication per consentire agli utenti di accedere alla tua app utilizzando uno o più metodi di accesso, inclusi indirizzo e-mail e accesso con password e provider di identità federati come Google Sign-in e Facebook Login. Questo tutorial ti consente di iniziare con Firebase Authentication mostrandoti come aggiungere un indirizzo email e una password di accesso alla tua app.

Collega la tua app a Firebase

Installa Firebase SDK . Assicurati di incollare il codice di configurazione nella tua pagina web come descritto.

(Facoltativo) Prototipa e prova con Firebase Local Emulator Suite

Prima di parlare di come la tua app autentica gli utenti, introduciamo una serie di strumenti che puoi utilizzare per prototipare e testare la funzionalità di autenticazione: Firebase Local Emulator Suite. Se stai decidendo tra le tecniche e i fornitori di autenticazione, provare diversi modelli di dati con dati pubblici e privati ​​utilizzando l'autenticazione e le regole di sicurezza Firebase o prototipare i progetti dell'interfaccia utente di accesso, essere in grado di lavorare localmente senza distribuire servizi live può essere un'ottima idea .

Un emulatore di autenticazione fa parte della Local Emulator Suite, che consente alla tua app di interagire con il contenuto e la configurazione del database emulato, nonché facoltativamente con le risorse del progetto emulate (funzioni, altri database e regole di sicurezza). Tieni presente che la Local Emulator Suite non supporta ancora il Cloud Storage emulato.

L'utilizzo dell'emulatore di autenticazione richiede solo pochi passaggi:

  1. Aggiunta di una riga di codice alla configurazione di test della tua app per connettersi all'emulatore.
  2. Dalla radice della directory del tuo progetto locale, eseguendo firebase emulators:start .
  3. Utilizzo dell'interfaccia utente di Local Emulator Suite per la prototipazione interattiva o dell'API REST dell'emulatore di autenticazione per test non interattivi.

Una guida dettagliata è disponibile su Connetti la tua app all'emulatore di autenticazione . Per ulteriori informazioni, vedere l' introduzione di Local Emulator Suite .

Ora continuiamo con come autenticare gli utenti.

Iscrivi nuovi utenti

Crea un modulo che consenta ai nuovi utenti di registrarsi con la tua app utilizzando il loro indirizzo email e una password. Quando un utente completa il modulo, convalida l'indirizzo e-mail e la password forniti dall'utente, quindi createUserWithEmailAndPassword metodo createUserWithEmailAndPassword :

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Accedi agli utenti esistenti

Crea un modulo che consenta agli utenti esistenti di accedere utilizzando il proprio indirizzo email e la password. Quando un utente completa il modulo, chiama il metodo signInWithEmailAndPassword :

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Imposta un osservatore dello stato di autenticazione e ottieni i dati dell'utente

Per ciascuna delle pagine della tua app che richiedono informazioni sull'utente connesso, collega un osservatore all'oggetto di autenticazione globale. Questo osservatore viene chiamato ogni volta che lo stato di accesso dell'utente cambia.

Collega l'osservatore utilizzando il metodo onAuthStateChanged . Quando un utente accede con successo, puoi ottenere informazioni sull'utente nell'osservatore.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Prossimi passi

Scopri come aggiungere il supporto per altri provider di identità e account guest anonimi: