Erste Schritte mit Firebase Authentication auf Websites

Mit Firebase Authentication können Sie Nutzern erlauben, sich mit einer oder mehreren Anmeldemethoden in Ihrer App anzumelden, einschließlich der Anmeldung mit E-Mail-Adresse und Passwort sowie föderierter Identitätsanbieter wie Google Log-in und Facebook Log-in. In dieser Anleitung erfahren Sie, wie Sie mit Firebase Authentication loslegen und Ihrer App die Anmeldung per E-Mail-Adresse und Passwort hinzufügen.

Authentication SDK hinzufügen und initialisieren

  1. Installieren und initialisieren Sie das Firebase JS SDK, falls noch nicht geschehen.

  2. Füge das Firebase Authentication JS SDK hinzu und initialisiere 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();

Optional: Prototyp erstellen und mit Firebase Local Emulator Suite testen

Bevor wir uns damit befassen, wie Nutzer in Ihrer App authentifiziert werden, stellen wir Ihnen einige Tools vor, mit denen Sie Authentication-Funktionen prototypisieren und testen können: Firebase Local Emulator Suite. Wenn Sie sich zwischen Authentifizierungstechniken und ‑anbietern entscheiden, verschiedene Datenmodelle mit öffentlichen und privaten Daten mit Authentication und Firebase Security Rules ausprobieren oder Prototyping-UI-Designs für die Anmeldung erstellen, kann es sehr hilfreich sein, lokal arbeiten zu können, ohne Live-Dienste bereitzustellen.

Ein Authentication-Emulator ist Teil des Local Emulator Suite. Er ermöglicht es Ihrer App, mit emulierten Datenbankinhalten und ‑konfigurationen sowie optional mit Ihren emulierten Projektressourcen (Funktionen, anderen Datenbanken und Sicherheitsregeln) zu interagieren.

Die Verwendung des Authentication-Emulators ist ganz einfach:

  1. Fügen Sie der Testkonfiguration Ihrer App eine Codezeile hinzu, um eine Verbindung zum Emulator herzustellen.
  2. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses firebase emulators:start aus.
  3. Mit der Local Emulator Suite-Benutzeroberfläche für interaktives Prototyping oder der Authentication-Emulator-REST API für nicht interaktive Tests

Eine ausführliche Anleitung finden Sie unter App mit dem Authentication-Emulator verbinden. Weitere Informationen finden Sie in der Local Emulator SuiteEinführung.

Fahren wir nun mit der Authentifizierung von Nutzern fort.

Neue Nutzer registrieren

Erstellen Sie ein Formular, mit dem sich neue Nutzer mit ihrer E-Mail-Adresse und einem Passwort in Ihrer App registrieren können. Wenn ein Nutzer das Formular ausfüllt, validieren Sie die von ihm angegebene E-Mail-Adresse und das Passwort und übergeben Sie sie dann an die Methode 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

Vorhandene Nutzer anmelden

Erstellen Sie ein Formular, mit dem sich bestehende Nutzer mit ihrer E-Mail-Adresse und ihrem Passwort anmelden können. Rufen Sie die Methode signInWithEmailAndPassword auf, wenn ein Nutzer das Formular ausgefüllt hat:

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

Beobachter für den Authentifizierungsstatus festlegen und Nutzerdaten abrufen

Fügen Sie dem globalen Authentifizierungsobjekt einen Beobachter für jede Seite Ihrer App hinzu, auf der Informationen zum angemeldeten Nutzer erforderlich sind. Dieser Beobachter wird jedes Mal aufgerufen, wenn sich der Anmeldestatus des Nutzers ändert.

Hängen Sie den Beobachter mit der Methode onAuthStateChanged an. Wenn sich ein Nutzer erfolgreich anmeldet, können Sie im Beobachter Informationen zu ihm abrufen.

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

Nächste Schritte

So fügen Sie Unterstützung für andere Identitätsanbieter und anonyme Gastkonten hinzu: