Firebase Auth VS Manual Auth: Eine Entwicklerreise

Die Entwicklung einer neuen E-Commerce-Plattform, die Stockx- und eBay-Funktionen mischt, präsentierte eine steile Lernkurve. Mein erstes großes Projekt, das ich zunächst auf eine vollständig kundenspezifische Lösung zielte, einschließlich der Authentifizierung. Diese Entscheidung hat jedoch die wesentlichen Vorteile von Firebase Auth gegenüber der manuellen Authentifizierung hervorgehoben.

Manuelle Authentifizierung: Der anfängliche Versuch

Mein erster Ansatz umfasste ein manuelles Authentifizierungssystem neben Firebase für die Datenspeicherung. Der Prozess war:

1. Anmelden: sammeln Benutzerdaten, generieren Sie ein JWT (JSON -Web -Token) und speichern Sie Benutzerdetails in Firebase.
2. Login: Überprüfen Sie die Anmeldeinformationen mit der Firebase -Datenbank, authentifizieren Sie mit dem JWT und leiten Sie sie auf die Homepage weiter.

Diese erste Implementierung, die unten gezeigt wurde, schien einfach:

<code class="language-javascript">const submitFormData = async (path, data) => {
  // Store JWT token
  localStorage.setItem("token", responseData.data.token);

  console.log("Redirecting to home page");
  location.replace("/");
};

subBtn.addEventListener("click", () => {
  // Form validation
  if (!tac.checked) {
    showAlert("you must agree to our terms and conditions");
  } else {
    loader.style.display = "block";
    submitFormData("/signup", {
      name: name.value,
      email: email.value,
      password: password.value,
      number: number.value,
      tac: tac.checked,
      notification: notification.checked,
      seller: false
    });
  }
});</code>

Die Straßensperre

Das Problem trat beim Abholen von Benutzerdaten von Firebase auf. Das Benutzerobjekt gab konsequent null zurück. Stunden des Debuggens zeigten die Einschränkungen meines manuellen Ansatzes. Firebase Auth war eine weitaus elegantere Lösung.

Die Firebase -Auth -Lösung: Ein optimierter Ansatz

Umschaltung in Firebase Autha -Autha -Authu -Verfahren den Prozess dramatisch vereinfacht. Die überarbeitete Implementierung:

anmelden

<code class="language-javascript">const auth = getAuth();

createUserWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    const user = userCredential.user;
    loader.style.display = "block";
    return submitFormData("/signup", {
      name: name.value,
      email: email.value,
      password: password.value,
      number: number.value,
      tac: tac.checked,
      notification: notification.checked,
      seller: false
    });
  })
  .catch((error) => {
    showAlert(error.message);
  });</code>

Login

<code class="language-javascript">signInWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    const user = userCredential.user;
    loader.style.display = "block";
    return submitFormData("/login", {
      email: email.value,
      password: password.value
    });
  })
  .catch((error) => {
    showAlert(error.message);
  });</code>

Schlüsselverbesserungen:

1. vereinfachtes Setup: getAuth() verarbeitet komplexe Sicherheitskonfigurationen.
2. robuste Benutzerverwaltung: createUserWithEmailAndPassword() und signInWithEmailAndPassword() E -Mail -Validierung, Kennwortsicherheit, Benutzererstellung und Sitzungsverwaltung automatisch verwalten.

Lektionen gelernt

Authentifizierung von Grund auf neu erstellen ist eine wertvolle Lernerfahrung, aber Firebase Auth bietet eine sichere, gut getestete und zeitsparende Alternative. Die nahtlose Integration in Firestore und integrierte Sicherheitsfunktionen sind für Produktionsanwendungen von unschätzbarem Wert. Für produktionsbereite Software wird die Nutzung etablierter Lösungen wie Firebase Auth sehr empfohlen.

Das obige ist der detaillierte Inhalt vonFirebase Auth VS Manual Auth: Eine Entwicklerreise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!