Mit JavaScript über Facebook Login authentifizieren

Sie können Ihren Nutzern erlauben, sich mit ihren Facebook-Konten bei Firebase zu authentifizieren indem Sie die Facebook-Anmeldung in Ihre App integrieren. Sie können Facebook-Log-in indem Sie entweder das Firebase SDK für die Anmeldung verwenden oder den Facebook-Anmeldevorgang manuell ausführen und das resultierende Zugriffstoken an Firebase

Hinweis

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Auf Facebook for Developers erhalten Sie die App-ID und das App-Secret für Ihre App.
  3. Facebook-Anmeldung aktivieren:
    1. Öffnen Sie in der Firebase-Konsole den Abschnitt Auth.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode Facebook und geben Sie die App-ID und das App-Secret an, die Sie von Facebook erhalten haben.
    3. Prüfen Sie dann, ob Ihr OAuth-Weiterleitungs-URI (z. B. my-app-12345.firebaseapp.com/__/auth/handler) in der Konfiguration Produkteinstellungen > Facebook-Anmeldung auf der Seite „Einstellungen“ Ihrer Facebook-App auf der Website Facebook für Entwickler als einer Ihrer OAuth-Weiterleitungs-URIs aufgeführt ist.

Anmeldevorgang mit dem Firebase SDK durchführen

Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer zu authentifizieren. mit Firebase über die Facebook-Konten das Firebase JavaScript SDK. Wenn Sie einen Nutzer in Node.js oder einer anderen nicht browserbasierten Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell abwickeln.

So verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz des Facebook-Anbieter-Objekts:

    Web

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie Authentifizierungsanbieter beantragen möchten. Um einen Bereich hinzuzufügen, rufen Sie addScope Beispiel:

    Web

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web

    provider.addScope('user_birthday');
    facebook.js
    Siehe Authentifizierungsanbieter Dokumentation.
  3. Optional: Wenn du den OAuth-Ablauf des Anbieters in der bevorzugten Sprache des Nutzers lokalisieren möchtest, ohne die entsprechenden benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisiere den Sprachcode in der Auth-Instanz, bevor du den OAuth-Ablauf startest. Beispiel:

    Web

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Anbieterparameter an, die mit der OAuth-Anfrage gesendet werden sollen. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters beim initialisierten Anbieter mit einem Objekt, das den Schlüssel enthält OAuth-Anbieter und im entsprechenden Wert angegeben. Beispiel:

    Web

    provider.setCustomParameters({
  'display': 'popup'
});
    auth_facebook_provider_params.js

    Web

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Siehe Authentifizierungsanbieter-Referenz für weitere Informationen.
  5. Authentifizieren Sie sich mit Firebase über das Facebook-Anbieterobjekt. Sie können fordern Sie Ihre Nutzer auf, sich mit ihrem Facebook-Konto anzumelden, indem sie ein Pop-up-Fenster öffnen oder zur Anmeldeseite weitergeleitet werden. Die Weiterleitungsmethode ist auf Mobilgeräten bevorzugt.
    • Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie signInWithPopup:

      Web

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      Web

      firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });
      facebook.js
      Beachten Sie auch, dass Sie das OAuth-Token des Facebook-Anbieters abrufen können, mit dem Sie zusätzliche Daten mithilfe der Facebook APIs abrufen können.

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

    • Wenn Sie sich durch Weiterleitung zur Anmeldeseite anmelden möchten, rufen Sie signInWithRedirect auf: Folgen Sie den Best Practices für die Verwendung von „signInWithWeiterleitung“.

      Web

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Dann können Sie auch das OAuth-Token des Facebook-Anbieters abrufen, indem Sie getRedirectResult beim Laden der Seite:

      Web

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      Web

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
      facebook.js
      Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes finden Sie in der Referenzdokumentation zur Authentifizierung.

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine App für eine Chrome-Erweiterung erstellen, lesen Sie die Leitfaden zu nicht sichtbaren Dokumenten.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.

  • Um den Authentifizierungsstatus Ihrer Nutzer in Ihren Apps zu ermitteln, gehen Sie folgendermaßen vor: einen Beobachter für das Auth-Objekt festlegen. Sie können dann die E-Mail-Adresse grundlegende Profilinformationen aus dem User-Objekt. Weitere Informationen finden Sie unter Nutzer verwalten:

  • In Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen, und steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie auf, um einen Nutzer abzumelden. signOut:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js