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 Accedi con Google 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 Firebase Authentication JS 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) 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à Authentication: Firebase Local Emulator Suite. Se stai scegliendo tra tecniche e fornitori di autenticazione, provando diversi modelli di dati con dati pubblici e privati utilizzando Authentication e Firebase Security Rules o prototipando i design dell'interfaccia utente di accesso, può essere una buona idea lavorare localmente senza implementare servizi live.

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

L'utilizzo dell'emulatore Authentication prevede pochi passaggi:

  1. Aggiungendo una riga di codice alla configurazione di test dell'app per connettersi all'emulatore.
  2. Dalla radice della directory del progetto locale, esegui firebase emulators:start.
  3. Utilizzo della UI 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 Connettere l'app all'emulatore Authentication. Per ulteriori informazioni, consulta l'introduzione a Local Emulator Suite.

Ora continuiamo a vedere come autenticare gli utenti.

Registrare 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 metodo 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

Impostare un osservatore dello stato di autenticazione e ottenere 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 lo stato di accesso dell'utente cambia.

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 per altri provider di identità e account ospite anonimi: