Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Zacznij korzystać z uwierzytelniania Firebase w witrynach

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Możesz użyć uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się do Twojej aplikacji przy użyciu co najmniej jednej metody logowania, w tym logowania za pomocą adresu e-mail i hasła oraz dostawców tożsamości federacyjnych, takich jak Logowanie przez Google i Logowanie przez Facebook. Ten samouczek umożliwia rozpoczęcie pracy z Uwierzytelnianiem Firebase, pokazując, jak dodać adres e-mail i hasło logowania do aplikacji.

Dodaj i zainicjuj zestaw SDK uwierzytelniania

  1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase , jeśli jeszcze tego nie zrobiłeś.

  2. Dodaj pakiet SDK Firebase Authentication JS i zainicjuj uwierzytelnianie Firebase:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Opcjonalnie) Prototypowanie i testowanie za pomocą pakietu Firebase Local Emulator Suite

Zanim zaczniemy mówić o tym, jak Twoja aplikacja uwierzytelnia użytkowników, przedstawmy zestaw narzędzi, których możesz użyć do prototypowania i testowania funkcjonalności uwierzytelniania: Firebase Local Emulator Suite. Jeśli decydujesz się między technikami i dostawcami uwierzytelniania, wypróbowujesz różne modele danych z danymi publicznymi i prywatnymi za pomocą uwierzytelniania i reguł zabezpieczeń Firebase lub tworzysz prototypy projektów interfejsu logowania, możliwość pracy lokalnej bez wdrażania usług na żywo może być świetnym pomysłem .

Emulator uwierzytelniania jest częścią lokalnego pakietu emulatorów, który umożliwia aplikacji interakcję z zawartością i konfiguracją emulowanej bazy danych, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, innymi bazami danych i regułami zabezpieczeń).

Korzystanie z emulatora uwierzytelniania obejmuje tylko kilka kroków:

  1. Dodanie wiersza kodu do konfiguracji testowej aplikacji, aby połączyć się z emulatorem.
  2. Z katalogu głównego lokalnego katalogu projektu uruchom firebase emulators:start .
  3. Korzystanie z interfejsu użytkownika lokalnego pakietu emulatorów do interaktywnego prototypowania lub interfejsu API REST emulatora uwierzytelniania do testowania nieinteraktywnego.

Szczegółowy przewodnik jest dostępny w artykule Połącz swoją aplikację z emulatorem uwierzytelniania . Aby uzyskać więcej informacji, zobacz wprowadzenie do lokalnego pakietu emulatorów .

Przejdźmy teraz do uwierzytelniania użytkowników.

Zarejestruj nowych użytkowników

Utwórz formularz, który pozwoli nowym użytkownikom zarejestrować się w Twojej aplikacji przy użyciu ich 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 przekaż je do metody createUserWithEmailAndPassword :

Web version 9

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

Web version 8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Zaloguj się istniejących użytkowników

Utwórz formularz, który umożliwi istniejącym użytkownikom logowanie się przy użyciu ich adresu e-mail i hasła. Gdy użytkownik wypełni formularz, wywołaj metodę signInWithEmailAndPassword :

Web version 9

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;
  });

Web version 8

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Ustaw obserwatora stanu uwierzytelniania i uzyskaj dane użytkownika

Dla każdej ze stron aplikacji, które wymagają informacji o zalogowanym użytkowniku, dołącz obserwatora do obiektu uwierzytelniania globalnego. 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 pomyślnie się zaloguje, możesz uzyskać informacje o nim w obserwatorze.

Web version 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web version 8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Następne kroki

Dowiedz się, jak dodać obsługę innych dostawców tożsamości i anonimowych kont gości: