Autenticati con Firebase utilizzando account basati su password utilizzando Javascript

Puoi utilizzare Firebase Authentication per consentire ai tuoi utenti di autenticarsi con Firebase utilizzando i loro indirizzi e-mail 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 accesso tramite e-mail/password:
   1. Nella console Firebase , apri la sezione Auth .
   2. Nella scheda Metodo di accesso, abilita il metodo di accesso tramite e- mail/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 registrazione dell'app, completa tutti i passaggi di convalida del nuovo 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 passando l'indirizzo e-mail e la password del nuovo utente a createUserWithEmailAndPassword :

   Web version 9

   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

   Web version 8

   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. Dai un'occhiata alla sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha effettuato l'accesso.

   Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

Accedi come utente con un indirizzo e-mail e una password

I passaggi per l'accesso di un utente con una password sono simili ai passaggi per la creazione di 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 version 9

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

   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

   Dai un'occhiata alla sezione Passaggi successivi di seguito per ottenere i dettagli dell'utente che ha effettuato l'accesso.

   Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

Consigliato: abilita la protezione dell'enumerazione della posta elettronica

Alcuni metodi di autenticazione Firebase che accettano gli 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 e-mail di un utente). Anche se questo può essere utile per suggerire rimedi specifici agli utenti, può anche essere abusato da attori malintenzionati per scoprire gli indirizzi e-mail registrati dai tuoi utenti.

Per mitigare questo rischio, ti consigliamo di abilitare la protezione dell'enumerazione email per il tuo progetto utilizzando lo strumento gcloud di Google Cloud. Tieni presente che l'abilitazione di questa funzione 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 ha effettuato 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 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 sul profilo User dall'oggetto Utente. Vedere Gestire gli utenti .

• In Firebase Realtime Database and Cloud Storage Security Rules , puoi ottenere 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 disconnettere un utente, chiama signOut :

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

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

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