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 dowiesz się, jak zacząć korzystać z Firebase Authentication, dodając do aplikacji logowanie przy użyciu 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 rozważasz różne techniki uwierzytelniania i dostawców, testowanie różnych modeli danych z danymi publicznymi i prywatnymi za pomocą funkcji Authentication i Firebase Security Rules lub prototypowanie interfejsu logowania, warto skorzystać z możliwości pracy w wersji lokalnej 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 zajmijmy się uwierzytelnianiem 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 istniejących 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 wymaga informacji o zalogowanym użytkowniku, dołącz obserwatora do obiektu globalnego uwierzytelniania. Ten obserwator jest wywoływany, gdy zmienia się stan logowania użytkownika.

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: