Możesz używać uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się w Twojej aplikacji za pomocą co najmniej 1 metody logowania, w tym logowania za pomocą adresu e-mail i hasła, oraz usług dostawców tożsamości sfederowanych, takich jak Logowanie przez Google i Logowanie przez Facebooka. Z tego samouczka dowiesz się, jak dodać do aplikacji uwierzytelnianie Firebase za pomocą adresu e-mail i hasła.
Dodawanie i zainicjowanie pakietu Authentication SDK
Jeśli jeszcze nie masz tego za sobą, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.
Dodaj pakiet JS SDK Uwierzytelniania Firebase i zainicjuj Uwierzytelnianie Firebase:
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();
(Opcjonalnie) Prototypowanie i testowanie w Pakiecie emulatorów lokalnych Firebase
Zanim przejdziemy do omówienia sposobu uwierzytelniania użytkowników w Twojej aplikacji, przedstawimy zestaw emulatorów lokalnych Firebase, którego możesz użyć do prototypowania i testowania funkcji uwierzytelniania. Dobrym pomysłem może być wypróbowywanie różnych modeli danych z danymi publicznymi i prywatnymi za pomocą uwierzytelniania oraz reguł zabezpieczeń Firebase albo prototypowanie projektów interfejsu logowania. Dobrym pomysłem może być praca lokalnie bez wdrażania aktywnych usług.
Emulator uwierzytelniania jest częścią Pakietu emulatorów lokalnych, który umożliwia aplikacji interakcję z treścią i konfiguracją emulowanej bazy danych, a także opcjonalnie emulowanymi zasobami projektu (funkcjami, innymi bazami danych i regułami zabezpieczeń).
Aby zacząć korzystać z emulatora uwierzytelniania, wystarczy kilka kroków:
- Dodajesz wiersz kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
- Uruchomienie
firebase emulators:start
w katalogu głównym projektu lokalnego. - Używanie interfejsu użytkownika pakietu emulatorów lokalnych do interaktywnego prototypowania lub interfejsu API REST emulatora uwierzytelniania do testów nieinteraktywnych.
Szczegółowy przewodnik znajdziesz w artykule Łączenie aplikacji z emulatorem uwierzytelniania. Więcej informacji znajdziesz we wprowadzeniu do Pakietu emulatorów lokalnych.
Teraz przejdźmy do uwierzytelniania użytkowników.
Zarejestruj nowych użytkowników
Utwórz formularz, który umożliwia nowym użytkownikom rejestrowanie się w aplikacji za pomocą ich adresu e-mail i hasła. Gdy użytkownik wypełni formularz, sprawdź poprawność adresu e-mail i hasła podanych przez niego, a następnie przekaż je do metody 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; // .. });
Logowanie istniejących użytkowników
Utwórz formularz, który umożliwia dotychczasowym użytkownikom logowanie się za pomocą adresu e-mail i hasła. Gdy użytkownik wypełni formularz, wywołaj metodę 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; });
Ustawianie obserwatora stanu uwierzytelniania i pobieranie danych użytkownika
Do każdej strony aplikacji, która wymaga informacji o zalogowanym użytkowniku, dołącz obserwatora do globalnego obiektu uwierzytelniania. Ten obserwator jest wywoływany po każdej zmianie stanu logowania użytkownika.
Podłącz obserwatora za pomocą metody onAuthStateChanged
. Gdy użytkownik się zaloguje, informacje o nim możesz uzyskać w narzędziu „obserwator”.
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 // ... } });
Dalsze kroki
Dowiedz się, jak dodać obsługę innych dostawców tożsamości i anonimowych kont gości:
- Logowanie przez Google
- Logowanie do Facebooka
- Logowanie na Twitterze
- Logowanie w GitHub
- Logowanie anonimowe