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
Se non l'hai ancora fatto, installa l'SDK Firebase JS e inizializza Firebase.
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:
- Aggiungere una riga di codice alla configurazione di test dell'app per connettersi all'emulatore.
- Dalla directory principale del progetto locale, esegui
firebase emulators:start. - 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;
// ..
});
Web
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ..
});
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;
});
Web
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
});
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
// ...
}
});
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 di altri provider di identità e account ospite anonimi: