Zacznij korzystać z uwierzytelniania Firebase w witrynach

Możesz użyć uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się do Twojej aplikacji przy użyciu co najmniej jednej metody logowania, w tym logowania za pomocą adresu e-mail i hasła oraz dostawców tożsamości federacyjnych, takich jak Logowanie przez Google i Logowanie przez Facebook. Ten samouczek umożliwia rozpoczęcie pracy z Uwierzytelnianiem Firebase, pokazując, jak dodać adres e-mail i hasło logowania do aplikacji.

Połącz swoją aplikację z Firebase

Zainstalować Firebase SDK . Pamiętaj, aby wkleić kod konfiguracji na swojej stronie internetowej zgodnie z opisem.

(Opcjonalnie) Prototypowanie i testowanie za pomocą pakietu Firebase Local Emulator Suite

Zanim zaczniemy mówić 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 się między technikami i dostawcami uwierzytelniania, wypróbowujesz różne modele danych z danymi publicznymi i prywatnymi za pomocą uwierzytelniania i reguł zabezpieczeń Firebase lub tworzysz prototypy projektów interfejsu logowania, możliwość pracy lokalnej bez wdrażania usług na żywo może być świetnym pomysłem .

Emulator uwierzytelniania jest częścią lokalnego pakietu emulatorów, który umożliwia aplikacji interakcję z zawartością i konfiguracją emulowanej bazy danych, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, innymi bazami danych i regułami zabezpieczeń).

Korzystanie z emulatora uwierzytelniania obejmuje tylko kilka kroków:

1. Dodanie wiersza kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
2. Z katalogu lokalnego katalogu projektu, uruchomiony firebase emulators:start .
3. Korzystanie z interfejsu użytkownika lokalnego pakietu emulatorów do interaktywnego prototypowania lub interfejsu API REST emulatora uwierzytelniania do testowania nieinteraktywnego.

Szczegółowy przewodnik jest dostępny na podłączeniu aplikacji na emulatorze Authentication . Aby uzyskać więcej informacji, zobacz wprowadzenie Local Emulator Suite .

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 ich adresu e-mail i hasła. Gdy użytkownik wypełnia formularz, potwierdzić adres e-mail i hasło podane przez użytkownika, a następnie przekazać je do createUserWithEmailAndPassword metody:

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

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

Zaloguj się istniejących użytkowników

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

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

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

Ustaw obserwatora stanu uwierzytelniania i uzyskaj dane użytkownika

Dla każdej ze stron aplikacji, które wymagają informacji o zalogowanym użytkowniku, dołącz obserwatora do obiektu uwierzytelniania globalnego. Ten obserwator jest wywoływany za każdym razem, gdy zmienia się stan logowania użytkownika.

Przymocować obserwatora przy użyciu onAuthStateChanged metody. Gdy użytkownik pomyślnie się zaloguje, możesz uzyskać informacje o nim w obserwatorze.

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

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

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 do GitHub
• Logowanie anonimowe