Nutzer mit Facebook anmelden

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

Hinweise

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 für Entwickler abrufen.

  5. Konfigurieren Sie den unter Facebook konfigurieren aufgeführten URI als gültigen OAuth-Weiterleitungs-URI für Ihre Facebook-App. Wenn Sie auf der Identity Platform eine benutzerdefinierte Domain konfiguriert haben, aktualisieren Sie den Weiterleitungs-URI in der Konfiguration Ihrer Facebook-App so, dass 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;

    // ...
  });

    Um die Seite weiterzuleiten, rufe zuerst signInWithRedirect() auf.

    Folgen Sie den Best Practices zur 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 Sie das Client SDK nicht verwenden möchten, können Sie den Anmeldevorgang auch manuell ausführen.

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

  1. Integrieren Sie die Facebook- oder Facebook-Log-in for Gaming-Authentifizierung in Ihre App. Folgen Sie dazu der Anleitung in der Entwicklerdokumentation:

  2. Melde den Nutzer mit Facebook- oder Facebook-Log-in für Gaming an. Verwende dabei den Vorgang, den du im vorherigen Schritt implementiert hast.

  3. Tauschen Sie das Token, das Sie von Facebook- oder Facebook-Log-in für Gaming erhalten, gegen Identity Platform-Anmeldedaten aus:

    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