Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Możesz używać uwierzytelniania Firebase, aby zezwolić użytkownikom na logowanie się w aplikacji za pomocą jednego lub więcej metod logowania, w tym logowanie za pomocą adresu e-mail i hasła, dostawców tożsamości sfederowanych, takich jak Logowanie przez Google i Logowanie przez Facebooka. Ten pokazuje, jak zacząć korzystać z Uwierzytelniania Firebase. Pokażemy, jak dodać adres e-mail i hasło, aby zalogować się w aplikacji.

Dodawanie i zainicjowanie pakietu Authentication SDK

  1. zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

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

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 w Pakiecie emulatorów lokalnych Firebase

Zanim przejdziemy do omówienia sposobu uwierzytelniania użytkowników przez Twoją aplikację, narzędzia służące do prototypowania i testowania funkcji uwierzytelniania: Pakiet emulatorów lokalnych Firebase. Jeśli zastanawiasz się nad techniką uwierzytelniania i usługodawcom, testując różne modele danych z wykorzystaniem danych publicznych i prywatnych za pomocą uwierzytelniania i reguł zabezpieczeń Firebase lub prototypowania interfejsu logowania, pracować lokalnie bez wdrażania usług w czasie rzeczywistym.

Emulator uwierzytelniania jest częścią Pakietu emulatorów lokalnych, umożliwia aplikacji interakcję z emulowaną treścią i konfiguracją bazy danych a także opcjonalnie emulowane zasoby projektu (funkcje, inne bazy danych, i reguły 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. przy użyciu interfejsu użytkownika Pakietu emulatorów lokalnych do interaktywnego prototypowania; Interfejs API typu REST emulatora uwierzytelniania do testowania nieinteraktywnego.

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 pozwala nowym użytkownikom zarejestrować się w aplikacji za pomocą adresu e-mail adresu e-mail i hasła. Gdy użytkownik wypełni formularz, potwierdź adres e-mail adresu i hasła podanych przez użytkownika, a następnie przekazać je Metoda 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żliwia dotychczasowym użytkownikom logowanie się za pomocą ich adresów e-mail i hasło. Gdy użytkownik wypełni formularz, wywołaj metodę Metoda 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, oraz przyłącza obserwatora do globalnego obiektu uwierzytelniania. Ten obserwator otrzymuje za każdym razem, gdy zmieni się stan logowania użytkownika.

Podłącz obserwatora za pomocą metody onAuthStateChanged. Gdy użytkownik użytkownik się zaloguje, uzyskasz informacje o użytkowniku w narzędziu „obserwator”.

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