Inizia con l'autenticazione Firebase sui siti web

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

Connetti la tua app a Firebase

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

(Facoltativo) Prototipo e test 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 tecniche e provider di autenticazione, provando diversi modelli di dati con dati pubblici e privati ​​utilizzando le regole di sicurezza di autenticazione e Firebase o prototipando 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 di 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 emulato (funzioni, altri database e regole di sicurezza).

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

1. Aggiunta di una riga di codice alla configurazione di test dell'app per connettersi all'emulatore.
2. Dalla radice della directory progetto locale, in esecuzione 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 i test non interattivi.

Una guida dettagliata è disponibile presso Collegare l'app per l'emulatore di autenticazione . Per ulteriori informazioni, vedere l' introduzione locale emulatore Suite .

Ora continuiamo con come autenticare gli utenti.

Registra nuovi utenti

Crea un modulo che consenta ai nuovi utenti di registrarsi alla tua app utilizzando il loro indirizzo email e una password. Quando un utente compila il modulo, convalidare l'indirizzo email e la password fornita dall'utente, per poi passare al createUserWithEmailAndPassword metodo:

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

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

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

Accedi utenti esistenti

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

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

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

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

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 che ha eseguito l'accesso, collega un osservatore all'oggetto di autenticazione globale. Questo osservatore viene chiamato ogni volta che lo stato di accesso dell'utente cambia.

Fissare l'osservatore utilizzando il onAuthStateChanged metodo. Quando un utente accede correttamente, puoi ottenere informazioni sull'utente nell'osservatore.

import { getAuth, onAuthStateChanged } from "firebase/auth";

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

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

Prossimi passi

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

• Accesso a Google
• Accesso a Facebook
• Accedi a Twitter
• Accesso a GitHub
• Accesso anonimo