Das Multiplayer-Game, Elferchallenge, für das Social-Network Facebook wurde in Flash und PHP entwickelt. Die Hauptlogik des Spiels ist in PHP ausgelagert, sodass in Flash keine Spiellogik mehr stattfinden muss. Somit kann sich Flash ganz auf die grafische Darstellung der Daten konzentrieren. Im Folgenden werde ich einen Einblick geben, wie die Verbindung zwischen Facebook, PHP und Flash besteht.

Als erstes sollte bei dem Anlegen von der Facebook-Anwendung darauf geachtet werden, dass als Rendermethode das Iframe verwendet wird.

Facebook Application Settings

Die URL, der Seite, die in das Iframe geladen werden soll, muss unter “Canvas Callback URL” eingetragen werden. In diesem Fall liegen die Dateien von Elferchallenge auf elferchallenge.de.

Zur weiteren Vorbereitung sollte das PHP-SDK für die Facebook-API heruntergeladen werden. Das Software Development Kit basiert auf Curl und einer Session, die mithilfe eines Cookies gespeichert wird. Da kommen schon die ersten kleinen Probleme auf: Cookies in Iframes? Die meisten Browser akzeptieren keine Third Party Cookies von Haus aus, sodass ein anderer Weg zur Sessionübergabe verwendet werden sollte. Dazu später mehr.

Damit sich zuerst einmal die Anwendung auf Facebook authentifizieren kann, können bei dem Konstruktoraufruf des API-SDKs von Facebook Parameter zur Authentifizierung mitgegeben werden.

$this->facebook = new Facebook(
    array(
        'appId'  => '66947884760',
        'secret' => 'your secret key'
    )
);

Damit sich nun auch noch der Benutzer mit der Anwendung authentifizieren kann, muss überprüft werden, ob eine gültige Facebook-Session vorhanden ist. Wenn der Benutzer authentifiziert ist, wird die aktuelle Facebook-Session in der lokalen Session abgespeichert, ansonsten muss sich der Benutzer mit der Anwendung (neu) authentifizieren.

Mit der Funktion checkLogin() erfolgt diese Überprüfung. Der Parameter $boolIsApiCall wird verwendet um zwischen API-Aufrufen vom Actionscript und Seitenaufrufe von Benutzern zu unterscheiden. Wenn der Benutzer die Seite aufruft und noch nicht authentifiziert ist, wird er direkt zur Authentifizierung weitergeleitet. Bei den API-Aufrufen wird der Text ‘reload’ ausgegeben, welcher im Actionscript als Neuladen der Seite interpretiert wird.

private function checkLogin( $boolIsApiCall = true ) {
    if ( $this->logged_in() ) {
        $facebookSession = $this->facebook->getSession();
        $_SESSION['fb'] = serialize( $this->facebook->getSession() );
    }
    else {
        $this->login( $boolIsApiCall );
    }
}

private function logged_in() {
    $session = $this->facebook->getSession();

    if ( isset($session) && (($session['expires']) > time()) ) {
        return true;
    }
    return false;
}

private function login( $boolIsApiCall ) {
    $nextUrl = 'http://apps.facebook.com/elferchallenge/';

    // Facebook Iframe Bug in Opera -> iframe too small
    // if browser is opera overwrite $nextUrl
    if ( strstr($_SERVER["HTTP_USER_AGENT"], 'Opera')) {
        $nextUrl = 'http://elferchallenge.de/';
    }

    if ( $boolIsApiCall == true ) {
        echo 'reload';
    }
    else {
        // build login url
        $url = $this->facebook->getLoginUrl(
            array(
                'req_perms' => 'publish_stream,read_friendlists',
                'fbconnect' => '0',
                'api_key'   => 'f99b1c470160abdf236e8fbbecf2194b',
                'next'      => $nextUrl
            )
        );
        // redirect to page
        echo 'top.location.href = "' . $url . '";';

    }

    // stop other output
    die();
}

Nachdem der Benutzer sich mit der Anwendung authentifiziert hat, gibt Facebook seine Session als JSON-Parameter mit. Diese Facebook-Session wird, wie oben beschrieben, lokal abgespeichert.
Bei der Elferchallenge wird die lokale Session, genauer die lokale Session-ID, über die URL mitgegeben. Beim Aufruf von der Anwendung wird die lokale Session-ID einmalig an das Flash übergeben und von dort an bei jedem API-Aufruf an PHP mit übergeben.

Hier sind zwei Beispiele wie mit dem PHP SDK an die GRAPH-API von Facebook Anfragen gesendet werden.

$params = array(
    'fields' => 'id, name, picture'
);
$friendInformation = $this->facebook->api(
        '/me/friends',
        'GET', $param
    );

In diesem Beispiel werden von allen Freunden jeweils Facebook-ID, Namen und Profilbild-URL abgerufen.

private function writeToWall( $message, $picture = '', $link = '',
                              $caption = '', $name = '',
                              $description = '', $facebookId = 'me'
                             ) {

    $params = array(
        'message'      => $message,
        'picture'      => $picture,
        'link'         => $link,
        'name'         => $name,
        'caption'      => $caption,
        'description'  => $description
    );

    $result =  $this->facebook->api(
                                     '/' . $facebookId . '/feed',
                                     'post',
                                     $params
                                   );

    if ( empty($result) ) {
        return false;
    }

    return true;
}

Die Funktion writeToWall() macht es möglich, an die eigene oder an die Wand von einem anderen Facebook-Benutzer zu schreiben.

Der Grundstein ist gelegt!

Flash bzw. das Actionscript sendet nun Http-Requests an die PHP-Datei und bekommt die aufbereiteten Daten zurück, welche im Flash dargestellt werden. Von der PHP Seite aus, wird dann zum Einen mit Facebook und zum Anderen mit der Datenbank kommuniziert.
Bei der Freundesrangliste wird das sehr deutlich. Es werden zwei Datenquellen benötigt. Die Eine ist Facebook und die Andere die lokale Datenbank. Diese Daten werden verbunden und es wird die Rangliste der Freunde erstellt. Bei einem API-Aufruf vom Flash wird aus der Rangliste ein JSON-String erstellt, welcher an das Flash zurück gesendet wird.

Tags: actionscript 3, API, as3, Facebook, flash, JSON, mysql, php