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 noch keine ID und kein Secret haben, können Sie diese über die Facebook for Developers.

  5. Konfigurieren Sie den unter Facebook konfigurieren aufgeführten URI als gültigen OAuth. Weiterleitungs-URI für Ihre Facebook-App. Wenn Sie eine benutzerdefinierte Domain in Identity Platform konfiguriert haben, Aktualisieren Sie den Weiterleitungs-URI in der Konfiguration Ihrer Facebook-App so, dass stattdessen die benutzerdefinierte Domain verwendet wird. der Standarddomain. Ändern Sie beispielsweise https://myproject.firebaseapp.com/__/auth/handler zu 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. Wende dich an den Dokumentation um zu 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;

    // ...
  });

    Rufe zum Weiterleiten der Seite zuerst signInWithRedirect() auf.

    Folgen Sie den Best Practices für die Verwendung von signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect.

    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 du das Client SDK nicht verwenden möchtest, manuell weiterlaufen lassen.

Diese Anmeldemethode unterstützt auch die Facebook-Anmeldung für Gaming als einen IdP. Die manuelle Implementierung von Facebook Login for Gaming wird von Identity Platform nicht unterstützt. Es werden nur Tokens für den Austausch von Identity Platform-Anmeldedaten akzeptiert.

  1. Integrieren Sie Facebook- oder Facebook-Log-in für die Gaming-Authentifizierung in Ihr wie in der Entwicklerdokumentation beschrieben:

  2. Melde den Nutzer mit der Facebook- oder Facebook-Anmeldung für Gaming über die den Sie im vorherigen Schritt implementiert haben.

  3. Tauschen Sie das Token aus, das Sie von der Facebook- oder Facebook-Anmeldung erhalten. Umgehen nach Anmeldedaten für Identity Platform:

    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