Authentifizieren Sie sich anonym bei Firebase mit JavaScript

Sie können die Firebase-Authentifizierung verwenden, um temporäre anonyme Konten zu erstellen und zu verwenden, um sich bei Firebase zu authentifizieren. Diese temporären anonymen Konten können verwendet werden, um Benutzern, die sich noch nicht bei Ihrer App angemeldet haben, zu ermöglichen, mit Daten zu arbeiten, die durch Sicherheitsregeln geschützt sind. Wenn ein anonymer Benutzer beschließt, sich bei Ihrer App anzumelden, können Sie seine Anmeldeinformationen mit dem anonymen Konto verknüpfen, damit er in zukünftigen Sitzungen weiterhin mit seinen geschützten Daten arbeiten kann.

Bevor Sie beginnen

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu .
  2. Wenn Sie Ihre App noch nicht mit Ihrem Firebase-Projekt verbunden haben, tun Sie dies über die Firebase-Konsole .
  3. Anonyme Authentifizierung aktivieren:
    1. Öffnen Sie in der Firebase-Konsole den Abschnitt Auth .
    2. Aktivieren Sie auf der Seite Anmeldemethoden die anonyme Anmeldemethode.

Authentifizieren Sie sich anonym bei Firebase

Wenn ein abgemeldeter Benutzer eine App-Funktion verwendet, die eine Authentifizierung bei Firebase erfordert, melden Sie den Benutzer anonym an, indem Sie die folgenden Schritte ausführen:

  1. Rufen Sie die signInAnonymously Methode auf:

    Webversion 9

    import { getAuth, signInAnonymously } from "firebase/auth";
    
    const auth = getAuth();
    signInAnonymously(auth)
      .then(() => {
        // Signed in..
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

    Webversion 8

    firebase.auth().signInAnonymously()
      .then(() => {
        // Signed in..
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });
    Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes finden Sie in den Auth Reference Docs .
  2. Wenn die signInAnonymously Methode ohne Fehler abgeschlossen wird, wird der in onAuthStateChanged registrierte Beobachter ausgelöst, und Sie können die Kontodaten des anonymen Benutzers aus dem User abrufen:

    Webversion 9

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

    Webversion 8

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

Wandeln Sie ein anonymes Konto in ein permanentes Konto um

Wenn sich ein anonymer Benutzer bei Ihrer App anmeldet, möchten Sie ihm möglicherweise erlauben, seine Arbeit mit seinem neuen Konto fortzusetzen – Sie möchten beispielsweise die Artikel, die der Benutzer seinem Einkaufswagen hinzugefügt hat, bevor er sich anmeldet, in seinem neuen Konto verfügbar machen Warenkorb des Kontos. Führen Sie dazu die folgenden Schritte aus:

  1. Wenn sich der Benutzer anmeldet, schließen Sie den Anmeldeablauf für den Authentifizierungsanbieter des Benutzers bis zum Aufrufen einer der Auth.signInWith Methoden ab, schließen diese jedoch nicht ein. Rufen Sie beispielsweise das Google-ID-Token, das Facebook-Zugriffstoken oder die E-Mail-Adresse und das Passwort des Benutzers ab.
  2. Holen Sie sich ein AuthCredential für den neuen Authentifizierungsanbieter:

    Google-Anmeldung

    Webversion 9

    import { GoogleAuthProvider } from "firebase/auth";
    
    const credential = GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);

    Webversion 8

    var credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
    Facebook Login

    Webversion 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const credential = FacebookAuthProvider.credential(
      response.authResponse.accessToken);

    Webversion 8

    var credential = firebase.auth.FacebookAuthProvider.credential(
      response.authResponse.accessToken);
    E-Mail-Passwort-Anmeldung

    Webversion 9

    import { EmailAuthProvider } from "firebase/auth";
    
    const credential = EmailAuthProvider.credential(email, password);

    Webversion 8

    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
  3. Übergeben Sie das AuthCredential -Objekt an die link -Methode des Anmeldebenutzers:

    Webversion 9

    import { getAuth, linkWithCredential } from "firebase/auth";
    
    const auth = getAuth();
    linkWithCredential(auth.currentUser, credential)
      .then((usercred) => {
        const user = usercred.user;
        console.log("Anonymous account successfully upgraded", user);
      }).catch((error) => {
        console.log("Error upgrading anonymous account", error);
      });

    Webversion 8

    auth.currentUser.linkWithCredential(credential)
      .then((usercred) => {
        var user = usercred.user;
        console.log("Anonymous account successfully upgraded", user);
      }).catch((error) => {
        console.log("Error upgrading anonymous account", error);
      });

Wenn der link erfolgreich ist, kann das neue Konto des Benutzers auf die Firebase-Daten des anonymen Kontos zugreifen.

Nächste Schritte

Da sich Benutzer jetzt bei Firebase authentifizieren können, können Sie ihren Zugriff auf Daten in Ihrer Firebase-Datenbank mithilfe von Firebase-Regeln steuern .