Inizia con l'autenticazione Firebase sui siti Web

Puoi utilizzare l'autenticazione Firebase per consentire agli utenti di accedere alla tua app utilizzando uno o più metodi di accesso, tra cui l'accesso tramite indirizzo e-mail e password, e provider di identità federati come Accesso Google e Accesso Facebook. Questo tutorial ti introduce all'autenticazione Firebase mostrandoti come aggiungere l'indirizzo email e l'accesso tramite password alla tua app.

Aggiungi e inizializza l'SDK di autenticazione

1. Se non lo hai già fatto, installa Firebase JS SDK e inizializza Firebase .

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

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);

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) Prototipa e testa 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à di autenticazione: Firebase Local Emulator Suite. Se stai decidendo tra tecniche e fornitori di autenticazione, provando diversi modelli di dati con dati pubblici e privati ​​utilizzando l'autenticazione e le regole di sicurezza Firebase o prototipando progetti di interfaccia utente di accesso, poter lavorare localmente senza distribuire servizi live può essere un'ottima idea .

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

L'utilizzo dell'emulatore di autenticazione prevede solo pochi passaggi:

1. Aggiunta di una riga di codice alla configurazione di test della tua app per connettersi all'emulatore.
2. Dalla radice della directory del progetto locale, eseguendo firebase emulators:start .
3. Utilizzando l'interfaccia utente di Local Emulator Suite per la prototipazione interattiva o l'API REST dell'emulatore di autenticazione per test non interattivi.

Una guida dettagliata è disponibile in Connetti la tua app all'emulatore di autenticazione . Per ulteriori informazioni, vedere l' introduzione alla Local Emulator Suite .

Ora continuiamo con come autenticare gli utenti.

Iscrivi 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 completa il modulo, convalida l'indirizzo email e la password forniti dall'utente, quindi passali al metodo createUserWithEmailAndPassword :

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

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

Accedi agli utenti esistenti

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

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

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

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

Per ciascuna pagina della tua app che richiede informazioni sull'utente che ha effettuato 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.

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

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

Prossimi passi

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

• Accesso a Google
• Accesso a Facebook
• Accesso a Twitter
• Accesso a GitHub
• Accesso anonimo