{"id":420,"date":"2010-11-30T22:57:07","date_gmt":"2010-11-30T21:57:07","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=420"},"modified":"2016-01-11T23:11:47","modified_gmt":"2016-01-11T22:11:47","slug":"facebook-api-tutorial","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/facebook-api-tutorial\/","title":{"rendered":"Facebook API – Tutorial"},"content":{"rendered":"

Eins vorweg: Die Facebook API ist so m\u00e4chtig, dass man locker auf der API basierend ein zweites Facebook hochziehen k\u00f6nnte, was durch die Facebook API gespeist wird. Leider gibt es aber auch zich verschiedene Quellen bei Facebook selbst. Vieles, was dort zu finden ist, ist bereits wieder deprecated und sollte nicht mehr verwendet werden. Ich werde nun sowohl die serverseitige<\/b> (PHP) als auch die clientseitige<\/b> (Javascript) Kommunikation mit Facebook anhand von Codeschnippseln beschreiben. Dabei verwende ich nur die Techniken, die laut Facebook noch verwendet werden sollten.<\/p>\n

Getting Started<\/h2>\n

Als allererstes muss mal ein API Key her. Das geht hier<\/a>. Dabei muss ein „App-Name“ vergeben werden und eine Domain spezifiziert werden. Wichtig:<\/b> Nur Requests, die wirklich von der angegebenen Domain kommen, werden von Facebook zugelassen. Diese Domain kann allerdings jederzeit in eurem Developers-Account<\/a> ge\u00e4ndert werden und auch http:\/\/localhost\/<\/i> geht durch. Dort kriegt ihr auch einen „secret-key“, der ebenfalls wichtig ist.<\/p>\n

Serverseite<\/h2>\n

1) Facebook-Klasse und Zertifikat herunterladen<\/h4>\n

Auf der Github Seite<\/a> die facebook.php<\/i> und das Zertifikat herunterladen. Die Klasse werden wir f\u00fcr die API-Kommunikation brauchen und diese braucht wiederum das Zertikat. Achja, unbedingt CURL in der php.ini aktivieren!<\/p>\n

2) Initialisierung<\/h4>\n

Der Konstruktor der Facebook-Klasse verlangt nach eurer App-ID und dem Secret-Key, den ihr beim Anmelden mitgeteilt bekommen habt.<\/p>\n

\r\n$facebook = new Facebook(array(\r\n  'appId'  => 'eure-app-id',\r\n  'secret' => 'euer-secret-key',\r\n  'cookie' => true\r\n));\r\n<\/pre>\n
Jetzt kanns losgehen!<\/p>\n
3) Login-M\u00f6glichkeit<\/h4>\n
Facebook Connect ist ein OAuth<\/a>-Dienst, der es Benutzern erm\u00f6glicht, sich auf eurer Seite \u00fcber Facebook einzuloggen. Diese melden sich dann mit ihrem Facebook Konto an und gew\u00e4hren dadurch eurer Webseite Zugriff auf gewisse Daten ihres Profils. Das geht wie folgt:<\/p>\n
\r\n$url = $facebook->getLoginUrl(array(\r\n\t'req_perms' => 'email,user_birthday,status_update,user_photos,user_videos,publish_stream',\r\n\t'next' => 'https:\/\/d-mueller.de\/thanks.php',\r\n\t'cancel_url' => 'https:\/\/d-mueller.de\/sorry.php' \r\n));\r\n\r\nprint '<a href="'.$url.'">Login!<\/a>';\r\n<\/pre>\n
Ein Klick auf den Login-Link leitet den Benutzer zu facebook weiter, wo er eurer App die Befugnis erteilen kann, seine E-Mail, seinen Geburtstag, seine Statusupdates und seine Fotos \/ Videos<\/i> einzusehen. Weiterhin fordern wir noch das Privileg, auch Posts auf die Pinnwand des Nutzers schreiben zu d\u00fcrfen. Das ist nat\u00fcrlich f\u00fcr ein simples Login v\u00f6llig \u00fcbertrieben und verschreckt Benutzer eher. Werden keine req_perms<\/i> angegeben, ist Zugriff auf die \u00f6ffentlichen Angaben des Users gestattet. Ist ja eigentlich auch ausreichend. Facebook sagt dazu<\/p>\n
By default, your application can access all public data in a user’s profile, including her name, profile picture, gender, and friends<\/p><\/blockquote>\n
Zur next<\/i>-URL wird weitergeleitet, nachdem der Benutzer akzeptiert hat. Zur cancel_url<\/i>, wenn er verweigert hat. Die Angabe beider URLs ist ebenso optional wie req_perms<\/i>. Sind die URLs nicht gesetzt, wird die Referer-Seite verwendet. Verweigere ich der Applikation den Zugriff werde ich \u00fcbrigens im obigen Beispiel auf <\/p>\n
https:\/\/d-mueller.de\/sorry.php?perms&selected_profiles=100000415342961<\/pre>\n
 weitergeleitet. Stimme ich zu, lande ich bei <\/p>\n
https:\/\/d-mueller.de\/thanks.php?perms=email,user_birthday,status_update,publish_stream,user_photos,user_videos&selected_profiles=100000415342961&installed=1&session=some-crazy-json-session-information<\/pre>\n
 So l\u00e4sst sich per <\/p>\n
$perms = explode(",",$_GET['perms']);<\/pre>\n
 gut auswerten, welche Rechte der Benutzer der Applikation einger\u00e4umt hat. Dann wird noch die Facebook-Session mit \u00fcbergeben.<\/p>\n
4) Logout-M\u00f6glichkeit<\/h4>\n
\r\n$logoutUrl = $facebook->getLogoutUrl(array('next' => 'https:\/\/d-mueller.de\/loggedout.php'));\r\n<\/pre>\n
Wie oben auch ist die next<\/i>-URL wieder optional. <\/p>\n
5) Alle Infos des Benutzers auslesen, auf die wir Zugriff haben<\/h4>\n
Habe in Kommentaren unter dem jeweiligen Aufruf den dazugeh\u00f6rigen Output gekleistert.<\/p>\n
\r\n$session = $facebook->getSession();\r\n\r\nif (!$session) \r\n{\r\n\tprint "Not Logged in or not yet allowed the app!";\r\n\tprint '<a href="'.$facebook->getLoginUrl().'">Login!<\/a>';\r\n}\r\nelse\r\n{\r\n\tprint "Logged in!";\t\t\r\n\t$me = $facebook->api('\/me');\r\n\tprint_r($me);\r\n\t\/*\r\n\tArray\r\n\t(\r\n\t\t[id] => 100000415342961\r\n\t\t[name] => David M\u00fcller\r\n\t\t[first_name] => David\r\n\t\t[last_name] => M\u00fcller\r\n\t\t[link] => http:\/\/www.facebook.com\/mueller.dav\r\n\t\t[birthday] => 03\/13\/1989\r\n\t\t[education] => Array\r\n\t\t\t(\r\n\t\t\t\t[0] => Array\r\n\t\t\t\t\t(\r\n\t\t\t\t\t\t[school] => Array\r\n\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t[id] => 106191932753089\r\n\t\t\t\t\t\t\t\t[name] => HS Darmstadt\r\n\t\t\t\t\t\t\t)\r\n\t \r\n\t\t\t\t\t\t[type] => College\r\n\t\t\t\t\t)\r\n\t \r\n\t\t\t)\r\n\t \r\n\t\t[gender] => male\r\n\t\t[email] => mueller.dav@gmail.com\r\n\t\t[timezone] => 1\r\n\t\t[locale] => de_DE\r\n\t\t[verified] => 1\r\n\t\t[updated_time] => 2010-11-23T07:01:59+0000\r\n\t)\r\n\t*\/\r\n\t\r\n\tprint_r($session);\r\n\t\/*\r\n\tArray\r\n\t(\r\n\t\t[session_key] => 2.KNAv1M6c72HwXVjecs8f5g__.3600.1291136400-100000415342961\r\n\t\t[uid] => 100000415342961\r\n\t\t[expires] => 1291136400\r\n\t\t[secret] => dGqYF3hEUpvvVaWZ4T5QAw__\r\n\t\t[access_token] => 182175161797277|2.KNAv1M6c72HwXVjecs8f5g__.3600.1291136400-100000415342961|DPZ2h8JmrDlB0_tWs0uMxGgbtK8\r\n\t\t[sig] => 82f24e389171741c571bb217874c382b\r\n\t)\r\n\t*\/\r\n}\r\n<\/pre>\n
6) Facebook Query Language FQL<\/h4>\n
Die neue<\/i> Art, wie die Facebook-API bedient werden sollte ist die FQL. Wer mit SQL einigerma\u00dfen vertraut ist, sollte sofort damit klarkommen. Erstmal ein Beispiel:<\/p>\n
\r\n$fql_query  =   array(\r\n\t'method' => 'fql.query',\r\n\t'query' => 'SELECT uid, first_name, last_name, pic_square, pic_big, sex FROM user WHERE uid = '.$facebook->getUser()\r\n);\r\n$fql_info = $facebook->api($fql_query);\r\nprint_r($fql_info);\r\n\/*\r\nArray\r\n(\r\n\t[0] => Array\r\n\t\t(\r\n\t\t\t[first_name] => David\r\n\t\t\t[last_name] => M\u00fcller\r\n\t\t\t[pic_big] => http:\/\/profile.ak.fbcdn.net\/hprofile-ak-snc4\/hs168.ash2\/41506_100000415342961_8052474_n.jpg\r\n\t\t\t[sex] => m\u00e4nnlich\r\n\t\t\t[uid] => 100000415342961\r\n\t\t\t[pic_square] => http:\/\/profile.ak.fbcdn.net\/hprofile-ak-snc4\/hs169.ash2\/41534_100000415342961_1227664_q.jpg\r\n\t\t)\r\n)\r\n*\/\r\n<\/pre>\n
Einfach, oder? Hier gibt es eine FQL Referenz<\/a> mit allen m\u00f6glichen Feldern und Tabellen, die ihr abfragen k\u00f6nnt. Mit FQL l\u00e4sst sich so auch herausfinden, welche Berechtigungen ein Benutzer euch erteilt hat. Es ist n\u00e4mlich nicht gesagt, dass eure App immer gleichviel darf – Ein Benutzer kann nach Belieben die Rechte eurer App einschr\u00e4nken. Deswegen lohnt sich f\u00fcr viele Aktionen ein Check. Der geht nach folgendem Schema:<\/p>\n
\r\n$fql_query  =   array(\r\n\t'method' => 'fql.query',\r\n\t'query' => 'SELECT publish_stream FROM permissions WHERE uid = '.$facebook->getUser()\r\n);\r\n$fql_info = $facebook->api($fql_query);\r\nprint_r($fql_info);\r\n\/*\r\nArray\r\n(\r\n\t[0] => Array\r\n\t\t(\r\n\t\t\t[publish_stream] => 1\r\n\t\t)\r\n)\r\n<\/pre>\n
Bedeutet: Wir d\u00fcrfen (immernoch) die Pinnwand des Benutzers vollkritzeln. Wie das geht? Siehe direkt untendrunter.<\/p>\n
7) Auf Pinnwand des Benutzers schreiben<\/h4>\n
Am besten – wie unter Punkt 8 oben erw\u00e4hnt – vorher pr\u00fcfen, ob die App \u00fcberhaupt noch die Berechtigung dazu hat.<\/p>\n
\r\n$facebook->api('\/'.$facebook->getUser().'\/feed', 'post', array(\r\n\t'message' => 'Hey there! Message from the void.',\r\n\t'name' => 'Appname',\r\n\t'description' => 'Message description',\r\n\t'caption' => 'Some Caption',\r\n\t'picture' => 'http:\/\/img01.lachschon.de\/images\/78394_orly_owl.jpg',\r\n\t'link' => 'https:\/\/d-mueller.de'\r\n));\r\n<\/pre>\n
Sieht dann auf der Pinnwand so aus:
\n
\"\"<\/a>
fb-post<\/p><\/div><\/p>\n
8) \u00d6ffentliche Informationen beliebiger User auslesen<\/h4>\n
Auch wenn ein Benutzer eure Applikation nicht erlaubt hat, ist ein kleines Subset an Infos trotz allem \u00f6ffentlich auslesbar. Dabei zum Testen einfach schauen, welche ID euer Profil hat (Facebook Profilseite besuchen) – bei mir http:\/\/www.facebook.com\/mueller.dav<\/i>.<\/p>\n
\r\n$public = $facebook->api('\/mueller.dav');\r\nprint_r($public);\r\n\/*\r\nArray\r\n(\r\n\t[id] => 100000415342961\r\n\t[name] => David M\u00fcller\r\n\t[first_name] => David\r\n\t[last_name] => M\u00fcller\r\n\t[link] => http:\/\/www.facebook.com\/mueller.dav\r\n\t[gender] => male\r\n\t[locale] => de_DE\r\n)\r\n*\/\r\n<\/pre>\n
9) Benutzerbild darstellen<\/h4>\n
\r\n<img src="https:\/\/graph.facebook.com\/<?php echo $facebook->getUser(); ?>\/picture">\r\n<\/pre>\n
getUser()<\/i> liefert die Benutzer-ID des Users zur\u00fcck (siehe letzter Schritt). Auch zum Laden des Benutzerbilds braucht man kein Einverst\u00e4ndnis des Benutzers, ich k\u00f6nnte hier also beliebige Benutzer-IDs verwenden.<\/i><\/p>\n
Clientseite<\/h2>\n
Prinzipiell geht alles, was auf der Serverseite ging ebenso mit Javascript. Auch der Zugriff auf die extrem m\u00e4chtige Facebook Query Language. Es ist also immer abzuw\u00e4gen, ob im jeweiligen Fall sinnvoller die serverseite oder die Clientseite zu verwenden ist.<\/p>\n
1) Initialisierung<\/h4>\n
\r\n<div id="fb-root"><\/div>\r\n<script src="http:\/\/connect.facebook.net\/de_DE\/all.js"><\/script>\r\n\r\n<script>\r\nFB.init({\r\n  appId   : 'your-appid',\r\n  status  : true, \/\/ check login status\r\n  cookie  : true, \/\/ enable cookies to allow the server to access the session\r\n  xfbml   : true \/\/ parse XFBML\r\n});\r\n<\/script>\r\n<\/pre>\n
Danach kanns losgehen! Eigentlich sehr analog zur Initialisierung der PHP-Klasse, blos das kein secret-key angegeben wird. Wichtig:<\/b> Unbedingt auf das fb-root<\/i>-div vor Aufruf von FB.init<\/i> achten. Sonst hagelts Fehlermeldungen.<\/p>\n
2) \u00dcberpr\u00fcfen, ob ein Benutzer eingeloggt ist<\/h4>\n
Der Code sollte selbstsprechend sein.<\/p>\n
\r\nFB.getLoginStatus(function(response) \/\/callback\r\n{\r\n\tif (!response.session)\r\n\t{\r\n\t\talert("user is not logged in");\r\n\t\tconsole.log(response);\r\n\t\t\/*\r\n\t\tObject\r\n\t\t\tperms: null\r\n\t\t\tsession: null\r\n\t\t\tstatus: "unknown"\r\n\t\t*\/\r\n\t}\r\n\telse\r\n\t{\r\n\t\talert("user is logged in");\r\n\t\tconsole.log(response);\r\n\t\t\/*\r\n\t\tObject\r\n\t\t\tperms: "{"extended":["status_update","photo_upload","video_upload","email","create_note","share_item","publi\u2026"\r\n\t\t\tsession: Object\r\n\t\t\t\taccess_token: "182175161797277|2.k9LeCVa1qBVELkQXMuILkg__.3600.1291136400-100000415342961|ZtQwAJOTbOJe5Nf6nTWkb6PzA\u2026"\r\n\t\t\t\texpires: 1291136400\r\n\t\t\t\tsecret: "secretkey"\r\n\t\t\t\tsession_key: "2.k9LeCVa1qBVELkQXMuILkg__.3600.1291136400-100000415342961"\r\n\t\t\t\tsig: "signature"\r\n\t\t\t\tuid: "100000415342961"\r\n\t\t\tstatus: "connected"\r\n\t\t*\/\r\n\t}\r\n});\r\n<\/pre>\n
3) Benutzer einloggen<\/h4>\n
Was hier passiert, ist das das typische Facebook-Login-Popup hochkommt. Es gibt 3 verschiedene M\u00f6glichkeiten, was nun passiert.
\n
\"Login-Fenster\"<\/a>
Login-Fenster<\/p><\/div><\/p>\n
    \n
  1. Der Benutzer hat der App noch keinen Zugriff gew\u00e4hrt:<\/b> Der Benutuzer loggt sich ein und erlaubt dann der App den Zugriff – oder eben nicht.<\/li>\n
  2. Der Benutzer hat der App bereits den Zugriff erteilt:<\/b>Er muss sich nur noch einloggen.<\/li>\n
  3. Der Benutzer hat der App den Zugriff erteilt und kommt mit einer g\u00fcltigen Session:<\/b> Das Fenster geht sofort wieder zu und der User gilt als eingeloggt<\/li>\n<\/ol>\n
    \r\nFB.login(function(response) \/\/callback\r\n{\r\n\tif (response.session) \r\n\t{\r\n\t\tconsole.log(response);\r\n\t\t\/*\r\n\t\tObject\r\n\t\t\tperms: "read_stream,publish_stream,offline_access",\r\n\t\t\tsession: Object { session_key="b089d77c93b5e25689470537-100000415342961", uid="100000415342961", more...},\r\n\t\t\taccess_token: "182175161797277|b089d77...3qTMrJmGcQiXszuf2apUbOk",\r\n\t\t\texpires: 0,\r\n\t\t\tsecret:\t"secretkey",\r\n\t\t\tsession_key: "b089d77c93b5e25689470537-100000415342961",\r\n\t\t\tsig: "signature".\r\n\t\t\tuid:\t"100000415342961"\r\n\t\t\tstatus: "connected",\r\n\t\t*\/\r\n\r\n\t\tif (response.perms) \r\n\t\t{\r\n\t\t\t\/\/ user is logged in and granted some permissions.\r\n\t\t} \r\n\t\telse \r\n\t\t{\r\n\t\t\t\/\/ user is logged in, but did not grant any permissions\r\n\t\t}\r\n\t} \r\n\telse \r\n\t{\r\n\t\t\/\/ user is not logged in\r\n\t}\r\n}, {perms:'read_stream,publish_stream,offline_access'});\r\n<\/pre>\n
    Hier fordern wir vom Benutzer die unten aufgelisteten Rechte. Er hat nat\u00fcrlich die Wahl, dies zu gestatten oder zu verneinen. Wie es auch kommt – wir haben die Wahl, in der Callback-Funktion auf alles entsprechend zu reagieren. Sch\u00f6n ist, dass sich Facebook selbst drum k\u00fcmmert, ob der Benutzer die App erst erlauben muss oder ob er sich nur einloggen muss. Hat er die App noch nicht erlaubt, kommt nach dem Login einfach folgendes zus\u00e4tzliches Formular, in dem der User die Vernetzung vornimmt:
    \n
    \"Permissions\"<\/a>
    Permissions<\/p><\/div><\/p>\n
    Probleme mit dieser Art des Logins:<\/b><\/p>\n