Rozpocznij korzystanie z uwierzytelniania Firebase w witrynach internetowych

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

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase .

2. Dodaj pakiet SDK JS uwierzytelniania Firebase i zainicjuj uwierzytelnianie Firebase:

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);

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:

1. Dodanie wiersza kodu do konfiguracji testowej aplikacji w celu nawiązania połączenia z emulatorem.
2. Z katalogu głównego lokalnego katalogu projektu uruchom 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 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 :

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

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

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.

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
    // ...
  }
});
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/v8/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:

• Zaloguj się przez Google
• Nazwa użytkownika Facebook
• Zaloguj się na Twitterze
• Zaloguj się do GitHuba
• Logowanie anonimowe