Inizia a utilizzare 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, tra cui l'accesso con indirizzo email e password e provider di identità federati come Google Sign-In e Facebook Login. Questo tutorial ti aiuta a iniziare a utilizzare Firebase Authentication mostrandoti come aggiungere l'accesso con indirizzo email e password alla tua app.

Aggiungi e inizializza l'SDK Authentication

  1. Se non l'hai ancora fatto, installa l'SDK Firebase JS e inizializza Firebase.

  2. Aggiungi l'SDK JS Firebase Authentication e inizializza Firebase Authentication:

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Facoltativo) Crea un prototipo e testa con Firebase Local Emulator Suite

Prima di parlare di come la tua app autentica gli utenti, presentiamo un insieme di strumenti che puoi utilizzare per realizzare il prototipo e testare la funzionalità Authentication: Firebase Local Emulator Suite. Se stai scegliendo tra tecniche di autenticazione e fornitori, provando diversi modelli di dati con dati pubblici e privati utilizzando Authentication e Firebase Security Rules o creando prototipi di design dell'interfaccia utente di accesso, la possibilità di lavorare localmente senza implementare servizi attivi può essere un'ottima idea.

Un emulatore Authentication fa parte di Local Emulator Suite, che consente alla tua app di interagire con i contenuti e la configurazione del database emulati, nonché, facoltativamente, con le risorse del progetto emulate (funzioni, altri database e regole di sicurezza).

L'utilizzo dell'emulatore Authentication prevede solo pochi passaggi:

  1. Aggiungere una riga di codice alla configurazione di test dell'app per connettersi all'emulatore.
  2. Dalla directory principale del progetto locale, esegui firebase emulators:start.
  3. Utilizzo dell'interfaccia utente di Local Emulator Suite per la prototipazione interattiva o dell'API REST dell'emulatore Authentication per i test non interattivi.

Una guida dettagliata è disponibile all'indirizzo Collegare l'app all'emulatore Authentication. Per ulteriori informazioni, consulta l'introduzione a Local Emulator Suite.

Ora vediamo come autenticare gli utenti.

Registrazione di nuovi utenti

Crea un modulo che consenta ai nuovi utenti di registrarsi alla tua app utilizzando il proprio indirizzo email e una password. Quando un utente compila il modulo, convalida l'indirizzo email e la password forniti dall'utente, quindi passali al metodo 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

Accedere agli utenti esistenti

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

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

Impostare un osservatore dello stato di autenticazione e recuperare i dati utente

Per ogni pagina dell'app che richiede informazioni sull'utente che ha eseguito l'accesso, collega un osservatore all'oggetto di autenticazione globale. Questo osservatore viene chiamato ogni volta che cambia lo stato di accesso dell'utente.

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

Web

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/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Passaggi successivi

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