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 Accedi con Facebook. 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 prototipi ed esegui test con Firebase Local Emulator Suite

Prima di parlare di come la tua app autentica gli utenti, introduciamo un insieme di strumenti che puoi utilizzare per prototipare e testare la funzionalità di Authentication: Firebase Local Emulator Suite. Se stai scegliendo tra tecniche e provider di autenticazione, provando diversi modelli di dati con dati pubblici e privati utilizzando Authentication e Firebase Security Rules o creando prototipi di design della UI di accesso, poter lavorare localmente senza eseguire il deployment di servizi live 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 connetterti all'emulatore.
  2. Dalla directory root del progetto locale, esegui firebase emulators:start.
  3. Utilizzando la UI di Local Emulator Suite per la prototipazione interattiva o l'API REST dell'emulatore Authentication per i test non interattivi.

Una guida dettagliata è disponibile alla pagina Connetti l'app all'emulatore Authentication. Per saperne di più, consulta l'introduzione a Local Emulator Suite.

Ora continuiamo con l'autenticazione degli utenti.

Registra nuovi utenti

Crea un modulo che consenta ai nuovi utenti di registrarsi alla tua app utilizzando il loro 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;
    // ..
  });

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Consentire l'accesso 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 compila 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;
  });

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Imposta un osservatore dello stato di autenticazione e ottieni i dati utente

Per ogni pagina della tua 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'observer utilizzando il metodo onAuthStateChanged. Quando un utente esegue l'accesso, puoi ottenere informazioni sull'utente nell'observer.

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

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

Passaggi successivi

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