Facebook Login

Facebook Login für das Web mit dem JavaScript-SDK

Dieses Dokument führt dich durch die Schritte zur Implementierung von Facebook Login mit dem Facebook-SDK für JavaScript auf deiner Webseite.

Bevor du beginnst

Du benötigst Folgendes:

Einfaches Beispiel für automatischen Login

Das folgende Codebeispiel zeigt, wie du deiner Webseite das Facebook-SDK für Javascript hinzufügst und das SDK initialisierst. Wenn du bei Facebook angemeldet bist, werden dein Name und deine E-Mail-Adresse angezeigt. Wenn du nicht bei Facebook angemeldet bist, wird automatisch das Login-Dialog-Pop-up angezeigt.

Für die public_profile-Berechtigung , mit der du öffentlich zugängliche Informationen wie Name und Profilbild abrufen kannst, und die email-Berechtigung ist kein App Review erforderlich. Sie werden automatisch allen Apps gewährt, die Facebook Login nutzen. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (function(d, s, id){
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) {return;}
                              js = d.createElement(s); js.id = id;
                              js.src = "https://connect.facebook.net/en_US/sdk.js";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Aktiviere JavaScript-SDK für Facebook Login

Wähle im App-Dashboard deine App aus und navigiere zu Produkt hinzufügen. Klicke auf der Karte Facebook Login auf Einrichten. Wähle im linken Navigationspanel Einstellungen und gib unter Client-OAuth-Einstellungen deine Umleitungs-URL in das Feld Gültige OAuth Redirect URIs ein, um dich erfolgreich zu authentifizieren.

Stelle den Schalter bei Login mit dem JavaScript-SDK auf „Ja“ und trage in die Liste Für das JavaScript-SDK zugelassene Domains die Domain deiner Seite ein, auf der das SDK läuft, um anzugeben, dass du das JavaScript-SDK zur Anmeldung verwendest. So wird gewährleistet, dass Zugriffsschlüssel nur bei Rückrufen von autorisierten Domains ausgegeben werden. Das Facebook-SDK für Javascript unterstützt ausschließlich HTTPS-Seiten zur Authentifizierung.

2. Prüfe den Login-Status für eine Person

Beim Laden deiner Webseite solltest du als Erstes herausfinden, ob eine Person über Facebook Login bereits bei deiner Webseite angemeldet ist. Mit dem Aufruf von FB.getLoginStatus wird ein Aufruf von Facebook ausgelöst, um den Login-Status zu erfahren. Facebook ruft dann deine Rückruffunktion mit den Ergebnissen auf.

Beispielanruf

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Beispiel einer JSON-Antwort

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status gibt den Login-Status der Person an, die die Webseite verwendet. Der status kann einer der folgenden sein:

Status-TypBeschreibung

connected

Die Person ist bei Facebook angemeldet und hat sich bei deiner Webseite angemeldet.

not_authorized

Die Person ist bei Facebook angemeldet, hat sich aber nicht bei deiner Webseite angemeldet.

unknown

Die Person ist nicht bei Facebook angemeldet. Du weißt also nicht, ob sie bei deiner Webseite angemeldet ist. Möglicherweise wurde auch zuvor FB.logout() aufgerufen und die Verbindung zu Facebook ist deshalb nicht möglich.

Ist der Status connected, sind die folgenden authResponse-Parameter in der Antwort enthalten:

authResponse-ParameterWert

accessToken

Ein Zugriffsschlüssel für den Nutzer der Webseite.

expiresIn

Ein UNIX-Zeitstempel bei Ablauf des Token. Bei Ablauf des Token muss sich der Nutzer erneut anmelden.

reauthorize_required_in

Die verbleibende Zeit (in Sekunden) bis zum Ablauf der Anmeldung und der Notwendigkeit einer erneuten Anmeldung.

signedRequest

Ein signierter Parameter, der Informationen zum Nutzer deiner Webseite enthält.

userID

Die ID des Nutzers deiner Webseite.

Das JavaScript-SDK erkennt den Anmeldestatus automatisch. Du musst hier also nicht mehr auf irgendeine Weise tätig werden.

3. Anmelden einer Person

Wenn ein Nutzer deine Webseite aufruft, aber nicht bei der Webseite oder bei Facebook angemeldet ist, kannst ihn über den Login-Dialog zur Anmeldung auffordern. Wenn die Nutzer nicht bei Facebook angemeldet sind, werden sie zuerst zur Anmeldung bei Facebook aufgefordert und dann zur Anmeldung bei deiner Webseite.

Es gibt zwei Möglichkeiten, eine Person anzumelden:

A. Login über den Login-Button

Verwende zur Nutzung des Login-Buttons unseren Plug-in-Konfigurator zur Anpassung des Login-Buttons und rufe den Code ab.

Plug-in-Konfigurator

Width
Größe des Buttons
Button-Text
Form des Button-Layouts
[?]
Code generieren

B. Login über den Login-Dialog des JavaScript-SDK

Rufe zur Verwendung deines eigenen Buttons den Login-Dialog mit einem Aufruf von FB.login() auf.

FB.login(function(response){
  // handle the response 
});

Nach zusätzlichen Berechtigungen fragen

Wenn eine Person auf deinen HTML-Button klickt, wird ein Popup-Fenster mit dem Login-Dialog angezeigt. In diesem Dialog kannst du nach einer Berechtigung für den Zugriff auf die Daten einer Person fragen. Der scope-Parameter kann zusammen mit dem FB.login()-Funktionsaufruf übergeben werden. Dieser optionale Parameter ist eine Liste mit Berechtigungen (durch Kommata getrennt), die eine Person bestätigen muss, damit deine Webseite auf deren Daten zugreifen kann. Facebook Login benötigt für externe Nutzer die erweiterte „public_profile“-Berechtigung.

Beispielaufruf

Mit diesem Beispiel wird die Person, die sich anmeldet, gefragt, ob deine Webseite Berechtigung für den Zugriff auf ihr öffentliches Profil und ihre E-Mail-Adresse erhalten kann.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Die Antwort des Login-Dialogs verarbeiten

Mit der Antwort, entweder auf die Verbindung oder den Abbruch, wird ein authResponse-Objekt an den Rückruf gesendet, den du festgelegt hast, als du den FB.login()-Aufruf gestartet hast. Diese Antwort kann innerhalb des FB.login() erkannt und verarbeitet werden.

Beispielaufruf

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Abmelden einer Person

Melde Nutzer von deiner Webseite ab, indem du die JavaScript-SDK-Funktion FB.logout() einem Button oder einem Link hinzufügst.

Beispielaufruf

FB.logout(function(response) {
   // Person is now logged out
});

Hinweis: Mit dieser Funktion wird der Nutzer möglicherweise auch bei Facebook abgemeldet.

Interessante Szenarien

  1. Eine Person meldet sich bei Facebook danach bei deiner Webseite. Wenn sie sich von deiner App abmeldet, ist sie weiterhin bei Facebook angemeldet.
  2. Eine Person meldet sich im Rahmen des Anmeldevorgangs deiner App bei deiner Webseite und bei Facebook an. Wenn sie sich von deiner App abmeldet, wird sie auch von Facebook abgemeldet.
  3. Eine Person meldet sich im Rahmen des Anmeldevorgangs einer anderen Webseite bei einer anderen Webseite und bei Facebook an. Danach meldet sie sich bei deiner Webseite an. Wenn sie sich von einer der beiden Webseiten abmeldet, wird sie auch von Facebook abgemeldet.

Außerdem werden mit der Abmeldung von deiner Webseite keine Berechtigungen widerrufen, die die Person deiner Webseite im Rahmen der Anmeldung gewährt hat. Der Widerruf von Berechtigungen muss separat erfolgen. Konfiguriere deine Webseite so, dass eine Person, die sich abgemeldet hat, den Login-Dialog nicht sieht, wenn sie sich erneut anmeldet.

Vollständiges Codebeispiel

Dieser Code wird geladen und initialisiert das JavaScript-SDK in deine HTML-Seite. Ersetze {app-id} durch deine App-ID und {api-version} durch die zu verwendende Graph API-Version. Sofern es keinen speziellen Grund zur Verwendung einer älteren Version gibt, solltest du die aktuellste Version angeben. v21.0. 

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };
 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


<!-- The JS SDK Login Button -->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Weitere Ressourcen