Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Możesz użyć Firebase Authentication, aby umożliwić użytkownikom logowanie się w aplikacji za pomocą co najmniej jednej metody, w tym logowania przy użyciu adresu e-mail i hasła oraz dostawców tożsamości sfederowanej, takich jak Logowanie Google i logowanie przez Facebooka. Ten samouczek pomoże Ci zacząć korzystać z Firebase Authentication. Dowiesz się z niego, jak dodać do aplikacji logowanie za pomocą adresu e-mail i hasła.

Dodawanie i inicjowanie pakietu Authentication SDK

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

  2. Dodaj Firebase Authentication pakiet SDK w JavaScript 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 sposób uwierzytelniania użytkowników w aplikacji, przedstawimy zestaw narzędzi, których możesz użyć do prototypowania i testowania Authenticationfunkcji:Firebase Local Emulator Suite. Jeśli wybierasz techniki uwierzytelniania i dostawców, testujesz różne modele danych z danymi publicznymi i prywatnymi za pomocą Authentication i Firebase Security Rules lub tworzysz prototypy interfejsu logowania, praca lokalna bez wdrażania usług na żywo może być świetnym pomysłem.

Authentication Emulator jest częścią Local Emulator Suite, która 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 zabezpieczeń).

Korzystanie z Authentication emulatora wymaga wykonania tylko kilku czynności:

  1. Dodanie do konfiguracji testowej aplikacji wiersza kodu, który połączy ją z emulatorem.
  2. Uruchom firebase emulators:start w katalogu głównym projektu lokalnego.
  3. Korzystając z interfejsu Local Emulator Suite do interaktywnego prototypowania lub interfejsu API REST emulatora Authentication do testowania nieinteraktywnego.

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

Teraz przejdźmy do uwierzytelniania użytkowników.

Rejestrowanie nowych użytkowników

Utwórz formularz, który umożliwi nowym użytkownikom rejestrację w aplikacji przy użyciu adresu e-mail i hasła. Gdy użytkownik wypełni formularz, sprawdź adres e-mail i hasło podane przez użytkownika, 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 dotychczasowych użytkowników

Utwórz formularz, który umożliwi zalogowanie się obecnym użytkownikom przy użyciu 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

Do każdej strony aplikacji, która potrzebuje informacji o zalogowanym użytkowniku, dołącz obserwatora do globalnego obiektu 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 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: