Zacznij korzystać z uwierzytelniania Firebase w witrynach

Można używać uwierzytelniania Firebase aby użytkownicy mogli zalogować się do aplikacji za pomocą jednego lub więcej logowania metod, w tym adres e-mail i hasło logowania i federacyjnych dostawców tożsamości, takie jak Google Zapisz się i Facebooku zalogować. Ten poradnik zostanie uruchomiony z uwierzytelnianiem Firebase pokazując, w jaki sposób dodać adres e-mail i hasło logowania się do aplikacji.

Dodaj i zainicjować SDK Authentication

1. Jeśli tego nie zrobiłeś, zainstaluj Firebase JS SDK i zainicjować Firebase .

2. Dodaj Authentication Firebase JS SDK i zainicjować uwierzytelniania Firebase:

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

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) Prototype i testy z Firebase Lokalnej Emulator Suite

Przed rozmową o tym, jak użytkownicy uwierzytelnia aplikacji, niech wprowadzają zestaw narzędzi, których można użyć do tworzenia prototypów i funkcjonalność Test uwierzytelniania: Firebase lokalny Emulator Suite. Jeśli decydując wśród technik uwierzytelniania i dostawców, wypróbowanie różnych modeli danych z danymi publicznymi i prywatnymi przy użyciu uwierzytelniania i Firebase zasad bezpieczeństwa lub prototypowania logowania UI projektuje, będąc w stanie pracy lokalnie bez wdrażania usług na żywo może być świetnym pomysłem ,

emulator uwierzytelniania jest częścią lokalnej Emulator Suite, który umożliwia aplikację na interakcję z emulowane zawartości bazy danych i konfiguracji, jak również opcjonalnie twoi emulowane zasobów projektu (funkcje, inne bazy danych, oraz zasady bezpieczeństwa).

Korzystanie z emulatora uwierzytelniania obejmuje tylko kilka kroków:

1. Dodawanie linii kodu do aplikacji testowej config połączyć się z emulatora.
2. Z katalogu lokalnego katalogu projektu, uruchomiony firebase emulators:start .
3. Korzystanie z Local Emulator Suite UI do interaktywnego prototypowania lub API Authentication emulator odpoczynku dla testowania nieinterakcyjnym.

Szczegółowy przewodnik jest dostępny na podłączeniu aplikacji na emulatorze Authentication . Aby uzyskać więcej informacji, zobacz wprowadzenie Local Emulator Suite .

Teraz kontynuować jak do uwierzytelniania użytkowników.

Zapisz się nowych użytkowników

Utwórz formularz, który pozwala nowym użytkownikom zarejestrować się w aplikacji przy użyciu adresu e-mail i hasło. Gdy użytkownik wypełnia formularz, potwierdzić adres e-mail i hasło podane przez użytkownika, a następnie przekazać je do createUserWithEmailAndPassword metody:

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;
    // ..
  });
auth_signup_password.js

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

Zaloguj się istniejących użytkowników

Utwórz formularz, który pozwala użytkownikom na istniejące zalogować się przy użyciu swojego adresu e-mail i hasło. Gdy użytkownik wypełnia formularz, zadzwoń signInWithEmailAndPassword metodę:

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

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

Set obserwatora stanu uwierzytelniania i uzyskać dane użytkownika

Dla każdej strony aplikacji, że potrzeba informacji o zalogowaniu się użytkownika, należy dołączyć obserwatora do obiektu globalnego uwierzytelniania. To obserwator jest wywoływana ilekroć autora logowania zmian stanu.

Przymocować obserwatora przy użyciu onAuthStateChanged metody. Gdy użytkownik loguje się powodzeniem, można uzyskać informacje na temat użytkownika w obserwatora.

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
    // ...
  }
});
auth_state_listener.js

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
    // ...
  }
});
index.js

Następne kroki

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

• Google Sign-in
• Nazwa użytkownika Facebook
• Twitter Logowanie
• GitHub Logowanie
• Anonymous logowania