Erste Schritte mit Firebase Authentication auf Websites

Mit Firebase Authentication können sich Nutzer mit einer oder mehreren Anmeldemethoden in Ihrer App anmelden, z. B. mit einer E-Mail-Adresse und einem Passwort oder über föderierte Identitätsanbieter wie Google Log-in und Facebook Login. In diesem Tutorial erfahren Sie, wie Sie Ihrer App die Anmeldung mit einer E-Mail-Adresse und einem Passwort hinzufügen.Firebase Authentication

Authentication SDK hinzufügen und initialisieren

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

  2. Fügen Sie das Firebase Authentication JS SDK hinzu und initialisieren Sie 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: Prototyping und Tests mit Firebase Local Emulator Suite

Bevor wir uns ansehen, wie Ihre App Nutzer authentifiziert, stellen wir Ihnen eine Reihe von Tools vor, mit denen Sie die Authentication Funktionen prototypisieren und testen können: Firebase Local Emulator Suite. Wenn Sie sich zwischen verschiedenen Authentifizierungstechniken und ‑anbietern entscheiden müssen, verschiedene Datenmodelle mit öffentlichen und privaten Daten mithilfe von Authentication und Firebase Security Rules testen oder Prototypen für die UI für die Anmeldung erstellen möchten, kann es sinnvoll sein, lokal zu arbeiten, ohne Live-Dienste bereitzustellen.

Ein Authentication Emulator ist Teil der Local Emulator Suite. Damit kann Ihre App mit emulierten Datenbankinhalten und ‑konfigurationen sowie optional mit den emulierten Projektressourcen (Funktionen, anderen Datenbanken und Sicherheitsregeln) interagieren.

Die Verwendung des Authentication Emulators umfasst nur wenige Schritte:

  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. Verwenden Sie die Local Emulator Suite UI für interaktives Prototyping oder die Authentication Emulator-REST API für nicht interaktive Tests.

Eine detaillierte Anleitung finden Sie unter App mit dem Authentication Emulator verbinden. Weitere Informationen finden Sie in der Local Emulator Suite Einführung.

Sehen wir uns nun an, wie Sie Nutzer authentifizieren.

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 createUserWithEmailAndPassword Methode:

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 vorhandene Nutzer mit ihrer E-Mail-Adresse und ihrem Passwort anmelden können. Wenn ein Nutzer das Formular ausfüllt, rufen Sie die signInWithEmailAndPassword Methode auf:

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

Authentifizierungsstatus-Observer festlegen und Nutzerdaten abrufen

Fügen Sie jeder Seite Ihrer App, die Informationen zum angemeldeten Nutzer benötigt, einen Observer an das globale Authentifizierungsobjekt an. Dieser Observer wird aufgerufen, wenn sich der Anmeldestatus des Nutzers ändert.

Fügen Sie den Observer mit der onAuthStateChanged Methode an. Wenn sich ein Nutzer erfolgreich anmeldet, können Sie im Observer Informationen zum Nutzer 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

Informationen zum Hinzufügen der Unterstützung für andere Identitätsanbieter und anonyme Gast konten: