Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Możesz używać uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się w Twojej aplikacji za pomocą co najmniej 1 metody logowania, w tym logowania za pomocą adresu e-mail i hasła, oraz usług dostawców tożsamości sfederowanych, takich jak Logowanie przez Google i Logowanie przez Facebooka. Z tego samouczka dowiesz się, jak dodać do aplikacji uwierzytelnianie Firebase za pomocą adresu e-mail i hasła.

Dodawanie i zainicjowanie pakietu Authentication SDK

  1. Jeśli jeszcze nie masz tego za sobą, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet JS SDK Uwierzytelniania Firebase i zainicjuj Uwierzytelnianie Firebase:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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 w Twojej aplikacji, przedstawimy zestaw emulatorów lokalnych Firebase, którego możesz użyć do prototypowania i testowania funkcji uwierzytelniania. Dobrym pomysłem może być wypróbowywanie różnych modeli danych z danymi publicznymi i prywatnymi za pomocą uwierzytelniania oraz reguł zabezpieczeń Firebase albo prototypowanie projektów interfejsu logowania. Dobrym pomysłem może być praca lokalnie bez wdrażania aktywnych usług.

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

Aby zacząć korzystać z emulatora uwierzytelniania, wystarczy kilka kroków:

  1. Dodajesz wiersz kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
  2. Uruchomienie firebase emulators:start w katalogu głównym projektu lokalnego.
  3. Używanie interfejsu użytkownika pakietu emulatorów lokalnych do interaktywnego prototypowania lub interfejsu API REST emulatora uwierzytelniania do testów nieinteraktywnych.

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 umożliwia nowym użytkownikom rejestrowanie się w aplikacji za pomocą ich adresu e-mail i hasła. Gdy użytkownik wypełni formularz, sprawdź poprawność adresu e-mail i hasła podanych przez niego, a następnie przekaż je do metody createUserWithEmailAndPassword:

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

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żliwia dotychczasowym użytkownikom logowanie się za pomocą adresu e-mail i hasła. Gdy użytkownik wypełni formularz, wywołaj metodę signInWithEmailAndPassword:

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

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

Do każdej strony aplikacji, która wymaga informacji o zalogowanym użytkowniku, dołącz obserwatora do globalnego obiektu uwierzytelniania. Ten obserwator jest wywoływany po każdej zmianie stanu logowania użytkownika.

Podłącz obserwatora za pomocą metody onAuthStateChanged. Gdy użytkownik się zaloguje, informacje o nim możesz uzyskać w narzędziu „obserwator”.

Web Modular API

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

Interfejs API internetowej przestrzeni nazw

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ści: