Możesz używać uwierzytelniania Firebase, aby zezwolić użytkownikom na logowanie się w aplikacji za pomocą jednego lub więcej metod logowania, w tym logowanie za pomocą adresu e-mail i hasła, dostawców tożsamości sfederowanych, takich jak Logowanie przez Google i Logowanie przez Facebooka. Ten pokazuje, jak zacząć korzystać z Uwierzytelniania Firebase. Pokażemy, jak dodać adres e-mail i hasło, aby zalogować się w aplikacji.
Dodawanie i zainicjowanie pakietu Authentication SDK
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 przez Twoją aplikację, narzędzia służące do prototypowania i testowania funkcji uwierzytelniania: Pakiet emulatorów lokalnych Firebase. Jeśli zastanawiasz się nad techniką uwierzytelniania i usługodawcom, testując różne modele danych z wykorzystaniem danych publicznych i prywatnych za pomocą uwierzytelniania i reguł zabezpieczeń Firebase lub prototypowania interfejsu logowania, pracować lokalnie bez wdrażania usług w czasie rzeczywistym.
Emulator uwierzytelniania jest częścią Pakietu emulatorów lokalnych, umożliwia aplikacji interakcję z emulowaną treścią i konfiguracją bazy danych a także opcjonalnie emulowane zasoby projektu (funkcje, inne bazy danych, i reguły 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. - przy użyciu interfejsu użytkownika Pakietu emulatorów lokalnych do interaktywnego prototypowania; Interfejs API typu REST emulatora uwierzytelniania do testowania nieinteraktywnego.
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 pozwala nowym użytkownikom zarejestrować się w aplikacji za pomocą adresu e-mail
adresu e-mail i hasła. Gdy użytkownik wypełni formularz, potwierdź adres e-mail
adresu i hasła podanych przez użytkownika, a następnie przekazać je
Metoda 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ą ich adresów e-mail
i hasło. Gdy użytkownik wypełni formularz, wywołaj metodę
Metoda 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
Na każdej stronie aplikacji, która wymaga informacji o zalogowanym użytkowniku, oraz przyłącza obserwatora do globalnego obiektu uwierzytelniania. Ten obserwator otrzymuje za każdym razem, gdy zmieni się stan logowania użytkownika.
Podłącz obserwatora za pomocą metody onAuthStateChanged
. Gdy użytkownik
użytkownik się zaloguje, uzyskasz informacje o użytkowniku 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 gości konta:
- Logowanie przez Google
- Logowanie do Facebooka
- Logowanie na Twitterze
- Logowanie w GitHub
- Logowanie anonimowe