Eseguire l'autenticazione con Firebase utilizzando account basati su password con JavaScript

Puoi utilizzare Firebase Authentication per consentire agli utenti di autenticarsi su Firebase utilizzando i loro indirizzi email e le loro 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 l'app al progetto Firebase, fallo dalla console Firebase.
  3. Attiva l'accesso con email/password:
    1. Nella console Firebase, apri la sezione Auth.
    2. Nella scheda Metodo di accesso, attiva il metodo di accesso Email/password e fai clic su Salva.

Creare 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 registrazione della tua app, completa tutti i passaggi di convalida del nuovo account richiesti dalla tua app, ad esempio verifica che la password del nuovo account sia stata digitata correttamente e soddisfi i requisiti di complessità.
  2. Crea un nuovo account passando l'indirizzo email e la password del nuovo utente a createUserWithEmailAndPassword:

    Web

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

    Web

    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
    Se il nuovo account è stato creato, l'utente accede automaticamente. Consulta la sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha eseguito l'accesso.

    Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

Accedere a un utente con un indirizzo email e una password

I passaggi per far accedere un utente con una password sono simili a quelli per creare un nuovo account. Nella pagina di accesso dell'app, segui questi passaggi:

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

    Web

    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

    Web

    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
    Consulta la sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha eseguito l'accesso.

    Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

(Consigliato) Imposta un criterio per le password

Puoi migliorare la sicurezza dell'account applicando i requisiti di complessità delle password.

Per configurare un criterio per le password per il tuo progetto, apri la scheda Criterio per le password nella pagina Impostazioni di autenticazione della console Firebase:

Impostazioni di autenticazione

I criteri per le password di Firebase Authentication supportano i seguenti requisiti per le password:

  • È necessario un carattere minuscolo

  • È richiesto un carattere maiuscolo

  • È necessario un carattere numerico

  • È richiesto un carattere non alfanumerico

    I seguenti caratteri soddisfano il requisito del carattere non alfanumerico: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • Lunghezza minima della password (da 6 a 30 caratteri; il valore predefinito è 6)

  • Lunghezza massima della password (lunghezza massima di 4096 caratteri)

Puoi attivare l'applicazione forzata dei criteri relativi alle password in due modalità:

  • Richiedi: i tentativi di registrazione non vanno a buon fine finché l'utente non aggiorna una password conforme ai criteri.

  • Invia una notifica: gli utenti possono registrarsi con una password non conforme. Quando utilizzi questa modalità, devi verificare se la password dell'utente è conforme ai criteri lato client e chiedere all'utente in qualche modo di aggiornare la password se non è conforme.

I nuovi utenti sono sempre tenuti a scegliere una password conforme alle tue norme.

Se hai utenti attivi, ti consigliamo di non attivare l'upgrade forzato al momento dell'accesso se non intendi bloccare l'accesso agli utenti le cui password non sono conformi ai tuoi criteri. Utilizza invece la modalità di notifica, che consente agli utenti di accedere con le loro password attuali e di informarli dei requisiti mancanti per la password.

Convalida di una password sul client

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

(Consigliato) Attiva la protezione da enumerazione email

Alcuni metodi Firebase Authentication che accettano indirizzi email come parametri generano errori specifici se l'indirizzo email non è registrato quando deve esserlo (ad esempio, quando accedi con un indirizzo email e una password) o se è registrato quando deve essere inutilizzato (ad esempio, quando modifichi l'indirizzo email di un utente). Sebbene questa opzione possa essere utile per suggerire rimedi specifici agli utenti, può anche essere utilizzata da malintenzionati per scoprire gli indirizzi email registrati dai tuoi utenti.

Per ridurre questo rischio, ti consigliamo di attivare la protezione per l'enumerazione delle email per il tuo progetto utilizzando lo strumento gcloud di Google Cloud. Tieni presente che l'attivazione di questa funzionalità modifica il comportamento di generazione di report sugli errori di Firebase Authentication: assicurati che la tua app non si basi sugli errori più specifici.

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato nel tuo progetto Firebase e può essere utilizzato per identificare un utente in tutte le app del progetto, indipendentemente da come accede.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto Auth. Puoi quindi recuperare le informazioni di base del profilo dell'utente dall'oggetto User. Vedi Gestire gli utenti.

  • Nelle Regole di sicurezza Firebase Realtime Database e Cloud Storage, puoi recuperare l'ID utente univoco dell'utente che ha eseguito 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 scollegare un utente, chiama signOut:

Web

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

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

Web

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