Możesz użyć uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się do aplikacji przy użyciu jednej lub większej liczby metod logowania, w tym logowania za pomocą adresu e-mail i hasła oraz federacyjnych dostawców tożsamości, takich jak logowanie przez Google i logowanie przez Facebooka. W tym samouczku zaczniesz korzystać z uwierzytelniania Firebase, pokazując, jak dodać adres e-mail i hasło logowania do swojej aplikacji.
Dodaj i zainicjuj zestaw SDK uwierzytelniania
Jeśli jeszcze tego nie zrobiłeś, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase .
Dodaj pakiet SDK JS uwierzytelniania Firebase i zainicjuj uwierzytelnianie Firebase:
Modułowe API sieciowe
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);
Internetowy interfejs API z przestrzenią nazw
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();
(Opcjonalnie) Stwórz prototyp i przetestuj za pomocą pakietu Firebase Local Emulator Suite
Zanim porozmawiamy o tym, jak Twoja aplikacja uwierzytelnia użytkowników, przedstawmy zestaw narzędzi, których możesz użyć do prototypowania i testowania funkcjonalności uwierzytelniania: Firebase Local Emulator Suite. Jeśli decydujesz pomiędzy technikami uwierzytelniania i dostawcami, wypróbowujesz różne modele danych z danymi publicznymi i prywatnymi przy użyciu reguł uwierzytelniania i zabezpieczeń Firebase lub tworzysz prototypy projektów interfejsu użytkownika logowania, możliwość pracy lokalnej bez wdrażania usług na żywo może być świetnym pomysłem .
Emulator uwierzytelniania jest częścią pakietu Local Emulator Suite, który umożliwia interakcję aplikacji z zawartością i konfiguracją emulowanej bazy danych, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, innymi bazami danych i regułami bezpieczeństwa).
Korzystanie z emulatora uwierzytelniania obejmuje tylko kilka kroków:
- Dodanie wiersza kodu do konfiguracji testowej aplikacji w celu nawiązania połączenia z emulatorem.
- Z katalogu głównego lokalnego katalogu projektu uruchom
firebase emulators:start
. - Używanie interfejsu użytkownika pakietu lokalnego emulatora do interaktywnego prototypowania lub interfejsu API REST emulatora uwierzytelniania do testowania nieinteraktywnego.
Szczegółowy przewodnik jest dostępny na stronie Połącz aplikację z emulatorem uwierzytelniania . Aby uzyskać więcej informacji, zobacz wprowadzenie do pakietu emulatorów lokalnych .
Przejdźmy teraz do sposobu uwierzytelniania użytkowników.
Zarejestruj nowych użytkowników
Utwórz formularz, który umożliwi nowym użytkownikom zarejestrowanie się w Twojej aplikacji przy użyciu adresu e-mail i hasła. Gdy użytkownik wypełni formularz, zweryfikuj podany przez użytkownika adres e-mail i hasło, a następnie przekaż je do metody createUserWithEmailAndPassword
:
Web modular API
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 namespaced API
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Zaloguj istniejących użytkowników
Utwórz formularz, który umożliwi istniejącym użytkownikom zalogowanie się przy użyciu adresu e-mail i hasła. Gdy użytkownik wypełni formularz signInWithEmailAndPassword
wywołaj metodęsignInWithEmailAndPassword:
Web modular API
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 namespaced API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Ustaw obserwatora stanu uwierzytelniania i uzyskaj dane użytkownika
Do każdej strony aplikacji, która potrzebuje informacji o zalogowanym użytkowniku, dołącz obserwatora do obiektu globalnego uwierzytelniania. Ten obserwator jest wywoływany za każdym razem, gdy zmienia się stan logowania użytkownika.
Dołącz obserwatora za pomocą metody onAuthStateChanged
. Gdy użytkownik pomyślnie się zaloguje, możesz uzyskać informacje o użytkowniku w obserwatorze.
Web modular API
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 namespaced API
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 // ... } });
Następne kroki
Dowiedz się, jak dodać obsługę innych dostawców tożsamości i anonimowych kont gości:
- Zaloguj się przez Google
- Nazwa użytkownika Facebook
- Zaloguj się na Twitterze
- Zaloguj się do GitHuba
- Logowanie anonimowe