Autenticazione con Firebase utilizzando account basati su password utilizzando Javascript

Puoi utilizzare l'autenticazione Firebase per consentire ai tuoi utenti di autenticarsi con Firebase utilizzando i propri indirizzi email e password e per gestire gli account basati su password della tua app.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto JavaScript .
  2. Se non hai ancora collegato la tua app al tuo progetto Firebase, fallo dalla console Firebase .
  3. Abilita l'accesso tramite email/password:
    1. Nella console Firebase , apri la sezione Autenticazione .
    2. Nella scheda Metodo di accesso , attiva il metodo di accesso tramite email/password e fai clic su Salva .

Crea un account basato su password

Per creare un nuovo account utente con una password, completa i seguenti passaggi nella pagina di registrazione della tua app:

  1. Quando un nuovo utente si registra utilizzando il modulo di iscrizione della tua app, completa tutti i nuovi passaggi di convalida dell'account richiesti dall'app, ad esempio verificando che la password del nuovo account sia stata digitata correttamente e soddisfi i requisiti di complessità.
  2. Crea un nuovo account trasmettendo l'indirizzo email e la password del nuovo utente a createUserWithEmailAndPassword :

    Web modular API

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
    
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed up 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });

    Web namespaced API

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in 
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ..
      });
    Se è stato creato il nuovo account, l'utente accederà automaticamente. Dai un'occhiata alla sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha effettuato l'accesso.

    Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Accedi come utente con un indirizzo email e una password

I passaggi per accedere a un utente con una password sono simili ai passaggi per creare un nuovo account. Nella pagina di accesso dell'app, procedi come segue:

  1. Quando un utente accede alla tua app, passa l'indirizzo email e la password dell'utente a signInWithEmailAndPassword :

    Web modular API

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

    Web namespaced API

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    Dai un'occhiata alla sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha effettuato l'accesso.

    Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Consigliato: abilitare la protezione dell'enumerazione dei messaggi di posta elettronica

Alcuni metodi di autenticazione Firebase che accettano indirizzi e-mail come parametri generano errori specifici se l'indirizzo e-mail non è registrato quando deve essere registrato (ad esempio, quando si accede con un indirizzo e-mail e una password) o registrato quando deve essere inutilizzato (ad esempio, quando si modifica l'indirizzo email di un utente). Anche se questo può essere utile per suggerire soluzioni specifiche agli utenti, può anche essere sfruttato da malintenzionati per scoprire gli indirizzi email registrati dai tuoi utenti.

Per mitigare questo rischio, ti consigliamo di abilitare la protezione dell'enumerazione delle email per il tuo progetto utilizzando lo strumento gcloud di Google Cloud. Tieni presente che l'abilitazione di questa funzionalità modifica il comportamento di segnalazione degli errori di Firebase Authentication: assicurati che la tua app non si basi su errori più specifici.

Prossimi passi

Dopo che un utente accede per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni sul provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso dell'utente.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni di base del profilo dell'utente dall'oggetto User . Vedi Gestisci utenti .

  • Nel tuo Firebase Realtime Database e Cloud Storage Security Rules , puoi ottenere l'ID utente univoco dell'utente che ha effettuato l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per disconnettere un utente, chiamare signOut :

Web modular API

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});