Nutzer mit Facebook anmelden

In diesem Artikel erfahren Sie, wie Sie Nutzer mit Identity Platform in Facebook anmelden.

Hinweis

In dieser Anleitung wird davon ausgegangen, dass Sie Identity Platform bereits aktiviert und eine einfache Webanwendung erstellt haben, die mit HTML und JavaScript geschrieben wurde. Weitere Informationen dazu finden Sie in der Kurzanleitung.

Facebook als Anbieter konfigurieren

So konfigurieren Sie Facebook als Identitätsanbieter:

  1. Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.

    Zur Seite "Identitätsanbieter"

  2. Klicken Sie auf Anbieter hinzufügen.

  3. Wählen Sie Facebook aus der Liste aus.

  4. Geben Sie Ihre Facebook-Anwendungs-ID und Ihr Anwendungs-Secret ein. Wenn Sie noch keine ID und kein Secret haben, können Sie diese auf der Seite Facebook for Developers erhalten.

  5. Konfigurieren Sie den unter Facebook konfigurieren aufgeführten URI als gültigen OAuth-Weiterleitungs-URI für Ihre Facebook-Anwendung. Wenn Sie in Identity Platform eine benutzerdefinierte Domain konfiguriert haben, aktualisieren Sie den Weiterleitungs-URI in der Konfiguration Ihrer Facebook-App, damit die benutzerdefinierte Domain anstelle der Standarddomain verwendet wird. Ändern Sie beispielsweise https://myproject.firebaseapp.com/__/auth/handler in https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Klicken Sie unter Autorisierte Domains auf Domain hinzufügen, um die Domains Ihrer Anwendung zu registrieren. Für Entwicklungszwecke ist localhost bereits standardmäßig aktiviert.

  7. Klicken Sie unter Anwendung konfigurieren auf Einrichtungsdetails. Kopieren Sie das Snippet in den Code Ihrer Anwendung, um das Identity Platform Client SDK zu initialisieren.

  8. Klicken Sie auf Speichern.

Nutzer mit dem Client SDK anmelden

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

    JavaScript

    var provider = new firebase.auth.FacebookAuthProvider();

  2. Optional: Fügen Sie OAuth-Bereiche hinzu. Die Bereiche legen fest, welche Daten Sie von Facebook anfordern. Für sensiblere Daten sind möglicherweise spezielle Bereiche erforderlich. In der Dokumentation des Anbieters können Sie ermitteln, welche Bereiche Ihre Anwendung benötigt.

    JavaScript 

    provider.addScope('user_birthday');

  3. Optional: Lokalisieren Sie den Authentifizierungsablauf. Sie können eine Sprache angeben oder die Standardsprache des Geräts verwenden:

    JavaScript

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

  4. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an. Sie gelten speziell für Facebook und werden meist verwendet, um das Authentifizierungserlebnis anzupassen. Sie können keine von OAuth oder Identity Platform reservierten Parameter übergeben.

    JavaScript 

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

  5. Verwenden Sie das Facebook-Anbieterobjekt, um den Nutzer anzumelden. Sie können entweder ein Pop-up-Fenster öffnen oder die aktuelle Seite weiterleiten. Für Nutzer von Mobilgeräten ist die Weiterleitung einfacher.

    Rufen Sie signInWithPopup() auf, um ein Pop-up-Fenster einzublenden:

    JavaScript 

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

    // The signed-in user info.
    var user = result.user;

    // 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;

    // ...
  });

    Rufen Sie zum Weiterleiten der Seite zuerst signInWithRedirect() auf.

    Beachten Sie die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    Rufen Sie dann das Facebook-Token beim Laden der Seite ab. Dazu rufen Sie getRedirectResult() auf:

    JavaScript

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

Sobald Sie ein Zugriffstoken haben, können Sie es zum Aufrufen der Facebook API verwenden. Beispiel:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Nutzer manuell anmelden

Wenn Sie das Client SDK nicht verwenden möchten, können Sie den Anmeldevorgang auch manuell ausführen.

Bei dieser Anmeldemethode wird auch Facebook Login for Gaming als Identitätsanbieter unterstützt. Identity Platform unterstützt nicht die manuelle Implementierung von Facebook Login for Gaming. Es werden nur die Tokens für den Austausch von Identity Platform-Anmeldedaten akzeptiert.

  1. Binden Sie die Facebook- oder Facebook Login for Gaming-Authentifizierung in Ihre Anwendung ein. Folgen Sie dazu der Anleitung in der Entwicklerdokumentation:

  2. Melden Sie sich mit dem Nutzer, der im vorherigen Schritt implementiert wurde, in Facebook oder Facebook Login for Gaming an.

  3. Tauschen Sie das Token, das Sie von Facebook oder Facebook Login for Gaming erhalten, gegen Anmeldedaten für Identity Platform ein:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. Verwenden Sie die Anmeldedaten, um den Nutzer mit Identity Platform anzumelden:

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

Nächste Schritte