Zacznij korzystać z uwierzytelniania Firebase w witrynach internetowych

Możesz użyć uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się do Twojej aplikacji przy użyciu jednej lub kilku metod logowania, w tym logowania za pomocą adresu e-mail i hasła, oraz dostawców tożsamości federacyjnych, takich jak Logowanie Google i Logowanie na Facebooku. Z tego samouczka dowiesz się, jak zacząć korzystać z uwierzytelniania Firebase, pokazując, jak dodać adres e-mail i hasło logowania do aplikacji.

Połącz swoją aplikację z Firebase

Zainstaluj pakiet SDK Firebase . Pamiętaj, aby wkleić kod konfiguracyjny do swojej strony internetowej zgodnie z opisem.

(Opcjonalnie) Twórz prototypy i testuj 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 funkcji uwierzytelniania: Firebase Local Emulator Suite. Jeśli decydujesz się na techniki uwierzytelniania i dostawców, wypróbowywanie różnych modeli danych z danymi publicznymi i prywatnymi przy użyciu reguł bezpieczeństwa uwierzytelniania i Firebase lub prototypowanie projektów interfejsu użytkownika logowania, możliwość pracy lokalnie bez wdrażania usług na żywo może być świetnym pomysłem .

Emulator uwierzytelniania jest częścią pakietu lokalnego emulatora, który umożliwia aplikacji interakcję z emulowaną zawartością i konfiguracją bazy danych, a także opcjonalnie z emulowanymi zasobami projektu (funkcje, inne bazy danych i reguły zabezpieczeń). Należy pamiętać, że pakiet Local Emulator Suite nie obsługuje jeszcze emulowanego magazynu w chmurze.

Korzystanie z emulatora uwierzytelniania obejmuje tylko kilka kroków:

1. Dodanie wiersza kodu do konfiguracji testowej aplikacji w celu nawiązania połączenia z emulatorem.
2. firebase emulators:start z katalogu głównego lokalnego projektu firebase emulators:start .
3. 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 w łączeniu aplikacji z emulatorem uwierzytelniania . Aby uzyskać więcej informacji, zobacz wprowadzenie do pakietu lokalnego emulatora .

Przejdźmy teraz do uwierzytelniania użytkowników.

Zarejestruj nowych użytkowników

Utwórz formularz, który pozwoli nowym użytkownikom zarejestrować się w Twojej aplikacji przy użyciu adresu e-mail i hasła. Gdy użytkownik wypełni formularz, potwierdź adres e-mail i hasło podane przez użytkownika, a następnie przekaż je do metody createUserWithEmailAndPassword :

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

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;
    // ..
  });
auth_signup_password.js

Zaloguj istniejących użytkowników

Utwórz formularz, który umożliwi istniejącym użytkownikom logowanie się przy użyciu ich adresu e-mail i hasła. Gdy użytkownik wypełni formularz, wywołaj metodę signInWithEmailAndPassword :

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

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;
  });
auth_signin_password.js

Ustaw obserwatora stanu uwierzytelniania i pobierz dane użytkownika

Dla każdej strony aplikacji, która wymaga informacji o zalogowanym użytkowniku, dołącz obserwatora do globalnego obiektu uwierzytelniającego. Ten obserwator jest wywoływany za każdym razem, gdy zmienia się stan logowania użytkownika.

Dołącz obserwatora przy użyciu metody onAuthStateChanged . Po pomyślnym zalogowaniu się użytkownika można uzyskać informacje o użytkowniku w obserwatorze.

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
    // ...
  }
});
index.js

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
    // ...
  }
});
auth_state_listener.js

Następne kroki

Dowiedz się, jak dodać obsługę innych dostawców tożsamości i anonimowych kont gości:

• Logowanie przez Google
• Nazwa użytkownika Facebook
• Logowanie na Twitterze
• Logowanie GitHub
• Logowanie anonimowe