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 Facebook-Anmeldung. 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 abwickeln

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. Wenn Sie einen Umfang hinzufügen möchten, rufen Sie addScope auf. Beispiel:

    Web

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

    Web

    provider.addScope('user_birthday');
    facebook.js
    Weitere Informationen finden Sie in der Dokumentation des Authentifizierungsanbieters.
  3. Optional: Um den OAuth-Ablauf des Anbieters für den vom Nutzer bevorzugten Dienst zu lokalisieren ohne die relevanten benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisieren Sie auf der Auth-Instanz, bevor Sie den OAuth-Ablauf starten. 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: Zusätzliche benutzerdefinierte OAuth-Anbieterparameter angeben die Sie mit der OAuth-Anfrage senden möchten. 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. Weitere Informationen finden Sie in der Referenz zum Authentifizierungsanbieter.
  5. Authentifizieren Sie sich mit Firebase über das Facebook-Anbieterobjekt. Sie können Nutzer auffordern, sich mit ihren Facebook-Konten anzumelden. Dazu können Sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird 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 außerdem, dass Sie das OAuth-Token des Facebook-Anbieters abrufen können, das zum Abrufen zusätzlicher Daten mithilfe der Facebook-APIs verwendet werden kann.

      Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes finden Sie in der Referenzdokumentation zur Authentifizierung.

    • Rufen Sie signInWithRedirect auf, um sich anzumelden und zur Anmeldeseite weiterzuleiten: Beachten Sie die Best Practices für die Verwendung von „signInWithRedirect“.

      Web

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

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

      Web

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

      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 abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

In einer Chrome-Erweiterung mit Firebase 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 die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, 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