Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Za pomocą usługi Firebase Authentication możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu co najmniej 1 metody logowania, w tym adresu e-mail i hasła, oraz sfederowanych dostawców tożsamości, takich jak Logowanie przez Google i Logowanie przez Facebooka. W tym samouczku dowiesz się, jak zacząć korzystać z usługi Firebase Authentication, dodając do aplikacji logowanie za pomocą adresu e-mail i hasła.

Dodawanie i inicjowanie pakietu Authentication SDK

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

  2. Dodaj pakiet Firebase Authentication JS SDK i zainicjuj Firebase Authentication:

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) Tworzenie prototypów i testowanie za pomocą Firebase Local Emulator Suite

Zanim omówimy, jak aplikacja uwierzytelnia użytkowników, przedstawimy zestaw narzędzi, których możesz używać do tworzenia prototypów i testowania Authentication funkcji: Firebase Local Emulator Suite. Jeśli zastanawiasz się nad technikami uwierzytelniania i dostawcami, testujesz różne modele danych z danymi publicznymi i prywatnymi przy użyciu Authentication i Firebase Security Rules, lub tworzysz prototypy interfejsu logowania, możliwość pracy lokalnej bez wdrażania usług na żywo może być dobrym rozwiązaniem.

Emulator Authentication jest częścią Local Emulator Suite, który umożliwia aplikacji interakcję z emulowaną zawartością bazy danych i konfiguracją, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, innymi bazami danych i regułami bezpieczeństwa).

Korzystanie z emulatora Authentication wymaga wykonania kilku czynności:

  1. Dodanie wiersza kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
  2. Uruchomienie polecenia firebase emulators:start w katalogu głównym projektu lokalnego.
  3. Używanie interfejsu Local Emulator Suite do interaktywnego tworzenia prototypów lub interfejsu API REST Authentication emulatora do testowania nieinteraktywnego.

Szczegółowy przewodnik znajdziesz w artykule Łączenie aplikacji z emulatorem Authentication. Więcej informacji znajdziesz we Local Emulator Suite wprowadzeniu.

Teraz omówimy, jak uwierzytelniać użytkowników.

Rejestrowanie nowych użytkowników

Utwórz formularz, który umożliwi nowym użytkownikom rejestrację w aplikacji za pomocą adresu e-mail i hasła. Gdy użytkownik wypełni formularz, sprawdź poprawność podanego adresu e-mail i hasła, 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;
    // ..
  });
auth_signup_password.js

Web

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

Logowanie istniejących użytkowników

Utwórz formularz, który umożliwi istniejącym 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;
  });
auth_signin_password.js

Web

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

Ustawianie obserwatora stanu uwierzytelniania i pobieranie danych użytkownika

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

Dołącz obserwatora za pomocą metody onAuthStateChanged. Gdy użytkownik zaloguje się, możesz uzyskać informacje o nim w obserwatorze.

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

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

Dalsze kroki

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