Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Możesz użyć Firebase Authentication, aby umożliwić użytkownikom logowanie się w aplikacji za pomocą jednej lub więcej metod logowania, w tym logowania się za pomocą adresu e-mail i hasła oraz dostawców tożsamości sfederowanej, takich jak Logowanie Google i Logowanie przez Facebooka. W tym samouczku pokazujemy, jak 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 SDK Authentication

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

  2. Dodaj pakiet SDK JS Firebase Authentication i inicjuj 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) Prototypowanie 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żywać do tworzenia prototypów i testowania funkcji Authentication: Firebase Local Emulator Suite. Jeśli zastanawiasz się, którą metodę uwierzytelniania i którego dostawcę wybrać, testujesz różne modele danych z danymi publicznymi i prywatnymi za pomocą funkcji Authentication i Firebase Security Rules lub tworzysz prototyp interfejsu użytkownika logowania, warto mieć możliwość pracy na komputerze lokalnym bez wdrażania usług na żywo.

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

Korzystanie z emulatora Authentication wymaga wykonania kilku czynności:

  1. Dodanie linii kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
  2. W katalogu głównym lokalnego katalogu projektu uruchom firebase emulators:start.
  3. Korzystanie z interfejsu Local Emulator Suite do tworzenia interaktywnych prototypów lub interfejsu API REST emulatora Authentication do testów nieinterakcyjnych.

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

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 za pomocą adresu e-mail i hasła. Gdy użytkownik wypełni formularz, zweryfikuj podany przez niego adres e-mail i hasło, a następnie prześlij 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 pozwoli obecnym użytkownikom logować 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

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

Dołącz obserwatora za pomocą metody onAuthStateChanged. Gdy użytkownik zaloguje się, możesz uzyskać informacje o tym użytkowniku 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: