Pierwsze kroki z Uwierzytelnianiem Firebase w witrynach

Za pomocą Firebase Authentication możesz 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 usługi Firebase Authentication adres e-mail i hasło, aby zalogować się w aplikacji.

Dodaj i zainicjuj pakiet SDK Authentication

  1. zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet JS SDK Firebase Authentication 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) Prototypowanie i testowanie przy użyciu Firebase Local Emulator Suite

Zanim przejdziemy do omówienia sposobu uwierzytelniania użytkowników przez Twoją aplikację, narzędzia służące do prototypowania i testowania funkcji Authentication: Firebase Local Emulator Suite Jeśli zastanawiasz się nad techniką uwierzytelniania i usługodawcom, testując różne modele danych z wykorzystaniem danych publicznych i prywatnych przy użyciu interfejsów Authentication i Firebase Security Rules, lub tworzy prototypy interfejsu logowania, pracować lokalnie bez wdrażania usług w czasie rzeczywistym.

Emulator Authentication jest częścią modułu Local Emulator Suite, który 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 użyć emulatora Authentication, wystarczy wykonać kilka czynności:

  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życie interfejsu użytkownika Local Emulator Suite do interaktywnego prototypowania lub Interfejs API typu REST emulatora Authentication do testowania nieinteraktywnego.

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

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: