Build

Anmeldung für Spiele auf Facebook

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

Wenn du ein Spiel entwickelst, das auf Facebook.com gespielt werden soll, entwickelst du eine Web-App, die in einem iframe-Container auf Facebook.com bereitgestellt wird. Facebook stellt nur Spiele für angemeldete Spieler*innen bereit, d. h., dir steht für die Authentifizierung garantiert ein*e angemeldete*r Facebook-Nutzer*in zur Verfügung.

Von daher solltest du in deinem Spiel stets die Facebook Login-Unterstützung integrieren. So erhältst du eine einheitliche ID, für die du die Synchronisierung durchführen und den Spielfortschritt aufzeichnen kannst. Außerdem kannst du so die sozialen Funktionen implementieren, die Spieler*innen von ihren Spielen erwarten. Wenn dein Spiel auf mehreren Plattformen verwendet werden kann, kannst du mit derselben ID den Spielstatus deiner Spieler*innen für alle ihre Geräte synchronisieren.

In diesem Dokument werden die verschiedenen Verwendungsmöglichkeiten von Facebook Login erläutert und du erfährst, wie du sie in deinem Spiel optimal einsetzt.

Authentifizierungsquellen

Es gibt mehrere Möglichkeiten, wie sich Spieler*innen zum ersten Mal authentifizieren können und wie die Identität nach der ersten Authentifizierung überprüft werden kann.

Authentifizierung über das App Center

Wenn Spieler*innen dein Spiel über den Button „Jetzt spielen“ im App Center starten, authentifizieren sie deine App für bestimmte Berechtigungen, die im App-Details-Tab im App-Dashboard konfiguriert sind.

Der Button „Jetzt spielen“ im App Center

Da ein hoher Prozentsatz der Spieler*innen über das App Center auf deine App zugreifen wird, handelt es sich hierbei um einen üblichen Authentifizierungspfad. Um eine reibungslose Anmeldung über das App Center zu gewährleisten, solltest du die Berechtigungen, die über das App Center erteilt werden, so konfigurieren, dass sie den Berechtigungen entsprechen, mit denen dein Spiel auf Facebook.com und Mobilgeräten arbeitet.

Weitere Informationen erhältst du im App Center-Leitfaden.

Authentifizierung auf anderen Plattformen

Wenn dein Spiel auf mobilen Plattformen implementiert wurde und Facebook Login in der Mobilversion unterstützt, wurden einige deiner Spieler*innen bereits möglicherweise authentifiziert, wenn sie dein Spiel auf Facebook.com spielen. Wichtig ist, dass die Version deines Spiels auf Facebook.com mit denselben Berechtigungen wie dein mobiles Spiel arbeitet.

Erkennen des Login-Status

Wie oben beschrieben, greifen Spieler*innen entweder angemeldet oder unangemeldet auf dein Spiel zu, je nachdem, ob sie deinem Spiel bereits Berechtigungen erteilt haben, weil sie es entweder zuvor auf Facebook, über das App Center oder über eine Mobilversion gespielt haben.

Du kannst mithilfe von zwei Möglichkeiten erkennen, ob sich ein*e Spieler*in bereits bei deinem Spiel angemeldet hat:

  • Clientseitig, mit der FB.getLoginStatus()-Methode des JS-SDK
  • Serverseitig, durch Dekodierung einer signed_request

Verwenden des Facebook-SDK für JavaScript

Durch Aufrufen von FB.getLoginStatus() beim Laden des Dokuments kannst du sicherstellen, dass Spieler*innen sofort angemeldet sind, wenn sie das Spiel laden. Dann kannst du mit FB.api() auf den Spielstatus des*der Spieler*in über seine Nutzer-ID zugreifen sowie Informationen für die Personalisierung abrufen, z. B. Name, Profilbild und Freundesliste des*der Spieler*in.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your
    // app, and response.authResponse supplies
    // the user's ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
  } else {
    // the user isn't logged in to Facebook.
  }
 });

Wenn sich der*die Spieler*in nicht angemeldet hat, kannst du FB.login(...) aufrufen, um oben im Startbildschirm deines Spiels eine modale Version des Login-Dialogs anzuzeigen. Der Rückruf für diesen Dialog sollte mit demselben Methodenaufruf erfolgen, den du beim Aufrufen von FB.getLoginStatus verwendest.

Verwenden einer signierten Anfrage

Wenn dein Spiel auf Facebook.com geladen wird, wird eine HTTP-POST-Anfrage an deine jeweilige Facebook Web-Spiele-URL durchgeführt. Diese POST-Anfrage enthält einige Parameter, beispielsweise den signed_request-Parameter, den du für die Autorisierung verwenden kannst.

Der signed_request-String ist base64url-kodiert und mit einer HMAC-Version deines App-Geheimcodes auf Basis der OAuth 2.0-Spezifikation signiert.

Das bedeutet, dass du den Parameter, wenn er per POST an deine App gesendet wird, parsen und überprüfen musst, bevor er verwendet werden kann. Dies erfolgt in drei Schritten:

  1. Teile die signierte Anfrage in zwei Teile mit einem „.“ als Trennzeichen (z. B. 238fsdfsd.oijdoifjsidf899).
  2. Dekodiere den ersten Teil – die kodierte Signatur – der base64url-Kodierung.
  3. Dekodiere den zweiten Teil – die Payload – der base64url-Kodierung und dekodiere dann das entstandene JSON-Objekt.

Diese Schritte können in jeder modernen Programmiersprache durchgeführt werden. Nachfolgend ein Beispiel in PHP:

function parse_signed_request($signed_request) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

  $secret = "appsecret"; // Use your app secret here

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  // confirm the signature
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

Dadurch entsteht ein JSON-Objekt, das in etwa wie folgt aussieht:

{
   "oauth_token": "{user-access-token}",
   "algorithm": "HMAC-SHA256",
   "expires": 1291840400,
   "issued_at": 1291836800,
   "user_id": "218471"
}

Durch Parsen des signed_request-Parameters kannst du erkennen, ob der*die aktuelle Spieler*in dein Spiel authentifiziert hat. Ist dies der Fall, enthält signed_request die Nutzer-ID des*der Spieler*in, mit der du Personalisierungsinformationen und den Spielstatus abrufen kannst. Du kannst diesen signed_request-Parameter gegen einen Zugriffsschlüssel austauschen und diesen für den Zugriff auf die Graph API verwenden.

Erstmalige Authentifizierung

Wenn ein*e Spieler*in dein Spiel zum ersten Mal aufruft, solltest du ihn*sie zur Authentifizierung auffordern, indem du den Login-Dialog anzeigst. Für den Login-Vorgang bei der Authentifizierung wird die clientseitige Anmeldung über das JavaScript-SDK empfohlen. Beispielsweise können Entwickler*innen vor dem Starten und nach dem Abbrechen eines Login-Dialogs einfache Spielgrafiken präsentieren.

Happy Acres zeigt bei der Anmeldung einen selbstdefinierten Hintergrund

Clientseitige Anmeldung über das JS-SDK

Einzigartig für Spiele auf Facebook ist, dass die JavaScript-Version des Login-Dialogs im async-Modus innerhalb des iframe ausgelöst wird. Das bedeutet, dass er als modales Pop-up über den Rest der Spielinhalte eingeblendet wird und nicht als separates Pop-up-Browserfenster.

Das ist wichtig, denn es bedeutet, dass der Dialog direkt über Code aufgerufen werden kann und nicht als Teil eines UI-Events. Außerdem wird er nicht aufgrund von Erkennungsmethoden, die Browser zur Pop-up-Blockierung verwenden, blockiert.

Dadurch kannst du mit FB.getLoginStatus() prüfen, ob der*die aktuelle Spieler*in dein Spiel bereits authentifiziert hat. Falls dies nicht der Fall sein sollte, kannst du so den Login-Dialog sofort über deinen Spielinhalten anzeigen, indem du FB.login() aufrufst, ohne dabei den Login-Button anzeigen zu müssen.

Nachfolgend ein Beispiel:

// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'email'});
  }
});

Nächste Schritte

Ganz gleich, welche Methode du für die Anmeldung verwendest – mit einer wahren Identität in deinem Spiel kannst du großartige soziale Funktionen entwickeln, die dich bei der Kund*innenbindung und Vermarktung deines Spiels unterstützen.

Die Anmeldung bildet den ersten Schritt auf dem Weg zu vielen dieser Funktionen, die du mithilfe der folgenden Produkte erstellen kannst:

In den Best Practices für Spiele auf Facebook findest du weitere Tipps zur erfolgreichen Verwendung von Facebook Login in deinem Spiel.