Puoi utilizzare l'autenticazione Firebase per consentire agli utenti di accedere alla tua app utilizzando uno o più metodi di accesso, inclusi l'accesso tramite indirizzo e-mail e password, e provider di identità federati come Accesso Google e Accesso Facebook. Questo tutorial ti consente di iniziare con l'autenticazione Firebase mostrandoti come aggiungere l'indirizzo e-mail e la password di accesso alla tua app.
Aggiungi e inizializza l'SDK di autenticazione
Se non lo hai già fatto, installa Firebase JS SDK e inizializza Firebase .
Aggiungi l'SDK Firebase Authentication JS e inizializza l'autenticazione Firebase:
Web version 9
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 version 8
import firebase from "firebase/app"; import "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 firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(Facoltativo) Prototipazione 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à di autenticazione: Firebase Local Emulator Suite. Se stai decidendo tra tecniche e provider 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, essere in grado di lavorare localmente senza distribuire servizi live può essere un'ottima idea .
Un emulatore di autenticazione fa parte di Local Emulator Suite, che consente all'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 richiede solo pochi passaggi:
- Aggiunta di una riga di codice alla configurazione di test dell'app per la connessione all'emulatore.
- Dalla radice della directory del tuo progetto locale, eseguendo
firebase emulators:start
. - Utilizzo dell'interfaccia utente di Local Emulator Suite per la prototipazione interattiva o dell'API REST dell'emulatore di autenticazione per test non interattivi.
Una guida dettagliata è disponibile all'indirizzo Collega la tua app all'emulatore di autenticazione . Per ulteriori informazioni, vedere l' introduzione di Local Emulator Suite .
Ora continuiamo con come autenticare gli utenti.
Registra nuovi utenti
Crea un modulo che consenta ai nuovi utenti di registrarsi con la tua app utilizzando il loro indirizzo e-mail e una password. Quando un utente completa il modulo, convalida l'indirizzo e-mail e la password forniti dall'utente, quindi passali al metodo createUserWithEmailAndPassword
:
Web version 9
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web version 8
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Accedi agli utenti esistenti
Crea un modulo che consenta agli utenti esistenti di accedere utilizzando il proprio indirizzo e-mail e password. Quando un utente completa il modulo, chiama il metodo signInWithEmailAndPassword
:
Web version 9
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 version 8
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 dell'utente
Per ciascuna delle pagine della tua app che richiedono informazioni sull'utente che ha eseguito l'accesso, allega un osservatore all'oggetto di autenticazione globale. Questo osservatore viene chiamato ogni volta che lo stato di accesso dell'utente cambia.
Collega l'osservatore usando il metodo onAuthStateChanged
. Quando un utente accede correttamente, puoi ottenere informazioni sull'utente nell'osservatore.
Web version 9
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/firebase.User const uid = user.uid; // ... } else { // User is signed out // ... } });
Web version 8
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/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Prossimi passi
Scopri come aggiungere il supporto per altri provider di identità e account guest anonimi: