Beginnen Sie mit der Firebase-Authentifizierung auf Websites

Sie können die Firebase-Authentifizierung verwenden, um Benutzern die Anmeldung bei Ihrer App mit einer oder mehreren Anmeldemethoden zu ermöglichen, einschließlich der Anmeldung per E-Mail-Adresse und Passwort sowie mit föderierten Identitätsanbietern wie Google Sign-in und Facebook Login. Dieses Tutorial erleichtert Ihnen den Einstieg in die Firebase-Authentifizierung, indem es Ihnen zeigt, wie Sie Ihrer App eine E-Mail-Adresse und ein Anmeldekennwort hinzufügen.

Fügen Sie das Authentifizierungs-SDK hinzu und initialisieren Sie es

  1. Falls noch nicht geschehen, installieren Sie das Firebase JS SDK und initialisieren Sie Firebase .

  2. Fügen Sie das Firebase Authentication JS SDK hinzu und initialisieren Sie die Firebase Authentication:

Modulare Web-API

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-Namespace-API

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) Prototypen erstellen und mit der Firebase Local Emulator Suite testen

Bevor wir darüber sprechen, wie Ihre App Benutzer authentifiziert, stellen wir eine Reihe von Tools vor, mit denen Sie Authentifizierungsfunktionen prototypisieren und testen können: Firebase Local Emulator Suite. Wenn Sie sich für Authentifizierungstechniken und -anbieter entscheiden, verschiedene Datenmodelle mit öffentlichen und privaten Daten mithilfe von Authentifizierungs- und Firebase-Sicherheitsregeln ausprobieren oder Prototypen für Anmelde-UI-Designs erstellen, kann die Möglichkeit, lokal zu arbeiten, ohne Live-Dienste bereitzustellen, eine gute Idee sein .

Ein Authentifizierungsemulator ist Teil der Local Emulator Suite, der es Ihrer App ermöglicht, mit emulierten Datenbankinhalten und -konfigurationen sowie optional mit Ihren emulierten Projektressourcen (Funktionen, andere Datenbanken und Sicherheitsregeln) zu interagieren.

Die Verwendung des Authentifizierungsemulators erfordert 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 .
  3. Verwenden der Local Emulator Suite-Benutzeroberfläche für interaktives Prototyping oder der Authentifizierungsemulator-REST-API für nicht interaktive Tests.

Eine ausführliche Anleitung finden Sie unter „Verbinden Sie Ihre App mit dem Authentifizierungsemulator“ . Weitere Informationen finden Sie in der Einführung zur Local Emulator Suite .

Fahren wir nun mit der Authentifizierung von Benutzern fort.

Melden Sie neue Benutzer an

Erstellen Sie ein Formular, das es neuen Benutzern ermöglicht, sich mit ihrer E-Mail-Adresse und einem Passwort bei Ihrer App zu registrieren. Wenn ein Benutzer das Formular ausfüllt, validieren Sie die vom Benutzer angegebene E-Mail-Adresse und das Kennwort und übergeben Sie sie dann an die Methode createUserWithEmailAndPassword :

Web modular API

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 namespaced API

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

Melden Sie bestehende Benutzer an

Erstellen Sie ein Formular, das es bestehenden Benutzern ermöglicht, sich mit ihrer E-Mail-Adresse und ihrem Passwort anzumelden. Wenn ein Benutzer das Formular ausfüllt, rufen Sie die Methode signInWithEmailAndPassword auf:

Web modular API

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 namespaced API

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

Legen Sie einen Beobachter für den Authentifizierungsstatus fest und rufen Sie Benutzerdaten ab

Fügen Sie für jede Seite Ihrer App, die Informationen über den angemeldeten Benutzer benötigt, einen Beobachter an das globale Authentifizierungsobjekt an. Dieser Beobachter wird immer dann aufgerufen, wenn sich der Anmeldestatus des Benutzers ändert.

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

Web modular API

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 namespaced API

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

Erfahren Sie, wie Sie Unterstützung für andere Identitätsanbieter und anonyme Gastkonten hinzufügen: