Tworzenie aplikacji na Facebooka w PHP wykorzystując Graph API w praktyce.

Cel ćwiczenia: zapoznanie się z zasadą pobierania danych użytkownika za pomocą Graph API.

Opis: Zaprojektować system autoryzujący użytkownika, wyświetlający jego zdjęcie, imię, nazwisko, miejsce zamieszkania oraz polubione rzeczy.

Efekt finalny przedstawiono na zrzucie ekranu.

Cały proces podzielimy na trzy części. W pierwszej zaprojektujemy na lokalnym komputerze szkic witryny z wykorzystaniem elementów CSS3, a w drugiej rozbudujemy autoryzujący skrypt utworzony w tym poście, aby spełniał założenia zadania.W ostatniej scalimy ze sobą dwie pierwsze uzyskując ostateczną aplikację.

1. Projekt HTML

1.1 Wizualny schemat strony.

Przed przystąpieniem do zadania warto naszkicować sobie na kartce papieru schemat witryny i oznaczyć poszczególne divy. Ja zrobiłem to w ten sposób:

Sekcja #frame zawiera w sobie wszystkie elementy. Jej szerokość jest 10px mniejsza niż szerokość jaką daje nam okno iFrame Facebooka (760px). Wewnątrz mamy dwa większe kontenery - #topPanel i #mainArea. Pierwszy zawiera zdjęcie użytkownika, jego imię i nazwisko oraz miasto w którym aktualnie się znajduje. Drugi składa się ze stałego tekstu oraz pola #userLikes sformatowanego tak, by wyświetlał dane w trzech kolumnach.

1.2 Szkic w kodzie HTML

Kod HTML, zawierający te wszystkie elementy może wyglądać np tak:

<div id="frame">
 <div id="topPanel">
   <div id="photoDiv">
   </div>
   
   <div id="nameDiv">
   </div>
   
   <div id="cityDiv">
   </div>
 </div>
 <div id="mainArea">
  <p class="goText">Wiem co lubisz? Co powiesz na:</p>
  <hr />
  
  <div id="userLikes">
  </div>
 </div>
</div>

1.3 Wprowadzenie przykładowych danych.

Na razie nie mamy żadnego połączenia z Facebookiem, więc na potrzeby stylizacji wprowadzimy przykładowe dane. Kod może wyglądać tak:

<div id="frame">
 <div id="topPanel">
   <div id="photoDiv">
    <img id="userPhoto" src="http://graph.facebook.com/100000027824838/picture?type=normal" />
   </div>
   
   <div id="nameDiv">
    <p>Norbert</p>
    <p>Kozlowski</p>
   </div>
   
   <div id="cityDiv">
    <p>Aktualne miasto:</p>
    <p class="cityName">Wroclaw</p>
   </div>
 </div>
 <div id="mainArea">
  <p class="goText">Wiem co lubisz? Co powiesz na:</p>
  <hr />
  
  <div id="userLikes">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Nulla at turpis eget nibh ultricies dignissim. Duis luctus
 euismod turpis. Mauris augue. Aliquam facilisis semper elit.
 Pellentesque semper hendrerit arcu. Phasellus eleifend
 commodo justo. Aliquam orci urna, imperdiet sit amet,
 posuere in, lobortis et, risus. Integer interdum nonummy
 erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum,
 eleifend vitae, mollis vel, mollis sed, purus. Suspendisse
 mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit
 ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum
 primis in faucibus orci luctus et ultrices posuere cubilia
 Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et
 ligula eu massa sagittis rutrum. In urna nibh, eleifend vel,
 suscipit ut, sagittis id, nunc.
  </div>
 </div>
</div>

W kodzie użyto zdjęcia pobranego z Facebooka. Nazwę miasta wprowadzono w klasie .cityName by ułatwić proces stylizacji który odbędzie się w następnym kroku. Sekcję #userLikes wypełniłem przykładowym tekstem. Niżej aktualny podgląd strony w przeglądarce.

 

1.4 Dołączenie styli

W zasadzie moglibyśmy pominąć ten krok, bo nie jest on konieczny do osiągnięcia celu. Miło jest popatrzeć na coś ładnie się prezentującego, dlatego poświęcimy trochę czasu wklepując kod. Wykorzystałem tu dwa elementy standardu CSS3 - cienie napisów oraz formatowanie tekstu w kolumnach. Internet Explorer nie obsługuje poprawnie tych możliwości.

p {
  padding:0;
  margin:0;
 }
 
 #frame {
  width:750px;
 }
 
 #topPanel {
  height:140px;
  background-color: #4aa0e8;
  padding-left:10px;
  padding-right:5px;
  border:1px solid #3e33ff;
 }
 
 #photoDiv {
  float:left;
  width:102px;
  padding-top:10px;
 }
 
 #nameDiv p {
  font-family: "Blackadder ITC";
  font-size:47px;
  
  text-shadow: 3px 3px 2px #808080;
  -moz-text-shadow: 3px 3px 2px #808080;
  -webkit-text-shadow: 3px 3px 2px #808080;
 }
 
 #nameDiv {
  float: left;
  padding-top:10px;
  padding-left:5px;
 }
 
 #cityDiv {
  float:right;
  text-align:right;
  line-height: 15px;
  margin-top:10px;
  margin-right:10px;
  font-family:"Calisto MT";
 }
 
 #cityDiv .cityName {
  text-transform: uppercase;
  font-weight:bold;
  margin-top:5px;
 }
 
 #userPhoto {
  border:1px solid white;
  height:80%;
 }
 
 #mainArea {
  margin-top:3px;
  background-color:#ff8040;
  border:1px solid #804000;
  padding:0 5px 5px 5px;
  text-align:justify;
 }
 
 #userLikes {
  font-family:Tahoma;
  font-size:12px;
  line-height:18px;
  
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
 }
 
 #mainArea .goText {
  margin-top:3px;
  margin-bottom:3px;
  width:100%;
  font-family:Tahoma;
  text-align:center;
 }

Opakujmy ten styl pomiędzy znacznik <style> i umieśćmy przed głównym kodem HTML. Jak prezentuje się strona w różnych przeglądarkach?

Firefox 5.0

Safari 5.0.5

Internet Explorer 9.0 64bit

Internet Explorer nie obsługuje cienia rzucanego przez imię i nazwisko, nie dzieli tekstu na trzy kolumny, oraz ma problemy z interpretacją źródła do obrazka. Trzeba to uwzględnić przy projektowaniu większych aplikacji. Nie jest naszym celem stworzenie teraz aplikacji, która będzie poprawnie obsługiwana przez wszystkie przeglądarki, ale pobieranie danych poprzez Facebook Graph API i na tym się skupimy.

Mając gotową stronę, możemy przejść do drugiego kroku, czyli do tworzenia ...

2. Skrypt PHP

1.1  Skrypt autoryzujący pobierający dodatkowe informacje

Korzystając z informacji w tym wpisie zalążkiem naszego skryptu będzie właśnie to co napisaliśmy. Zacznijmy od następującego kodu stopniowo go modyfikując.

<?php
 // Nr ID aplikacji
 $app_id = '179524192103712';
 // Adres canvas aplikacji
 $canvas_page = 'http://apps.facebook.com/khozzyaps/';
 // Tworzenie adresu url zgodnego ze standardem OAuth
 // Pobieramy dodatkowo takie informacje jak lubiane rzeczy oraz lokalizacje uzytkownika
 $auth_url = 'http://facebook.com/dialog/oauth?client_id=' . $app_id . '&redirect_uri=' . urlencode($canvas_page) 
 . '&scope=user_likes,user_location';
 // Odebranie danych i zapisanie jej do zmiennej
 $signed_request = $_REQUEST["signed_request"];
 // Dzielimy odebrane dane wzgledem kropki na dwie czesci
 list($encoded_sig,$payload) = explode('.',$signed_request,2);
 // Dekodujemy druga czecs odebranych danych i zapisujemy je do zmiennej
 $data = json_decode(base64_decode(strtr($payload,'_-',' /')), true);
 
 // Jezeli nie zautoryzowano uzytkownika, przenies go z powrotem na strone autoryzacji
 if (empty($data["user_id"])) {
  echo("<script> top.location.href='" . $auth_url . "'</script>");
 }
 // Jezli wszystko odbylo sie poprawnie mozemy kontynuowac
 else {
  
  // TU WLASCIWY KOD
 }
?>

Jak już wiadomo, odbywa się tu procedura autoryzacji użytkownika, w której prosimy także o udostępnienie informacji o jego lokalizacji i lubianych rzeczach. Jeśli uzyskano zgodę (tym samym zwrócony został obiekt signed_request zawierający wymagany access_token) możemy przejść do właściwego fragmentu kodu.

1.2 Tworzenie zapytań

Mając obiekt signed_request zapisany w zmiennej $data, wyłuskajmy z niego i zapiszmy ID użytkownika oraz wygenerowany klucz.

$user_id = $data['user_id'];
$access_token = $data['oauth_token'];

Ułatwi to nam konstruowanie zapytań do serwera Graph.

Aby pobrać informacje o imieniu, nazwisku i miejscu zamieszkania a następnie zapisać je, musimy stworzyć zapytanie w odpowiednim formacie. Wszystko opisałem w tym wpisie.

$graph_url = "https://graph.facebook.com/" . $user_id .
"?access_token=" . $access_token;
$response = file_get_contents($graph_url);
$user_info_response = json_decode($response,true);

Na początku tworzone jest ogólne zapytanie w którym argumentami są ID użytkownika i access_token zwrócony przez niego (abyśmy mogli dostać się do prywatnych zasobów). $graph_url jest adresem przechowującym obiekt tekstowy JSON. Pobierzmy te dane i zapiszmy do kolejnej zmiennej. Możemy użyć funkcji curl() (która w tym przypadku jest odrobinę zbyt skomplikowana) lub file_get_contents(). Używając tej drugiej kopiujemy zawartość pliku wskazanego przez $graph_url do zmiennej $response. Nadal jest to tekstowy obiekt JSON. Aby dekodować dane wykonujemy funkcję json_decode(). Drugi parametr true() powoduje, że  $user_info_response jest tablicą asocjacyjną (przechowującą informacje w formacie nazwa-wartość) przechowującą informacje o użytkowniku. Nie podanie tego parametru spowodowałoby utworzenie obiektu stdClass, a co za tym idzie  inny sposób odwoływania się do jej składowych.

Pobierzmy w ten sposób informacje o rzeczach lubianych przez użytkownika.

$likes_url = "https://graph.facebook.com/" . $user_id . 
"/likes?access_token=" . $access_token;
$likesResponse = file_get_contents($likes_url);
$likes_info_response = json_decode($likesResponse);

Dodajmy kod diagnostyczny, aby sprawdzić czy wszystko wygląda na pewno tak jak oczekujemy.

echo '<pre>';
print_r($user_info_response);
print_r($likes_info_response);
echo '</pre>';

Wynik działania przedstawiono na zrzucie ekranu.

 

Tak jak zakładaliśmy, zaznaczony fragment jest tablicą asocjacyjną przechowującą ogólne informacje o użytkowniku, a kod niżej jest klasą stdClass zawierającą tablicę data z jego ulubionymi rzeczami.

1.3 Wyłuskanie danych

Aby pobrać i zapisać imię, nazwisko i miasto, które są zapisane w tablicy wpisujemy po prostu:

$userName = $user_info_response['first_name'];
$userLastName = $user_info_response['last_name'];
$userCity = $user_info_response['location']['name'];

Jeśli dane te byłyby zapisane jako obiekt, odwołuje się do nich w analogiczny sposób:

$userName = $user_info_response->first_name;
$userLastName = $user_info_response->last_name;
$userCity = $user_info_response->location->name;

Tablica, zawierająca lubiane przedmioty:

$likesArray = $likes_info_response->data;

Którą możemy także wylistować:

for ($i = 0; $i < sizeof($likesArray); $i++) {
 echo $likesArray[$i]->name;
}

Pozostaje nam zapisanie adresu zdjęcia profilowego użytkownika:

$userPhotoAddress = "http://graph.facebook.com/ " . 
$user_id . "/picture?type=normal";

3. HTML + PHP

3.1 Dodanie szablonu strony do kodu PHP

Wykorzystując funkcję echo() wkleimy do skryptu PHP cały kod HTML który napisaliśmy w punkcie pierwszym.

else {
  $access_token = $data['oauth_token'];
  $user_id = $data['user_id'];
  
  // Pobranie info o uzytkowniku
  $graph_url = "https://graph.facebook.com/" . $user_id .
 "?access_token=" . $access_token;
  $response = file_get_contents($graph_url);
    $user_info_response = json_decode($response,true);
  
  // Pobranie info o lubionych przedmiotach
  $likes_url = "https://graph.facebook.com/" . $user_id . 
"/likes?access_token=" . $access_token;
  $likesResponse = file_get_contents($likes_url);
  $likes_info_response = json_decode($likesResponse);
  
  $userName = $user_info_response['first_name'];
  $userLastName = $user_info_response['last_name'];
  $userCity = $user_info_response['location']['name'];
  
  // Tablica z lubianymi przedmiotami
  $likesArray = $likes_info_response->data;
  
  // Adres ze zdjeciem profilowym
  $userPhotoAddress = "http://graph.facebook.com/ " 
. $user_id . "/picture?type=normal";
  
  echo '
   TU KOD HTML WITYRYNY
  ';

  //for ($i = 0; $i < sizeof($likesArray); $i  ) {
  // echo '<b>=> </b>' . $likesArray[$i]->name;
  //}
 }

Gdzie napisany przez nas kod witryny to:

<style>
 p {
  padding:0;
  margin:0;
 }
 
 #frame {
  width:750px;
 }
 
 #topPanel {
  height:140px;
  background-color: #4aa0e8;
  padding-left:10px;
  padding-right:5px;
  border:1px solid #3e33ff;
 }
 
 #photoDiv {
  float:left;
  width:102px;
  padding-top:10px;
 }
 
 #nameDiv p {
  font-family: "Blackadder ITC";
  font-size:47px;
  
  text-shadow: 3px 3px 2px #808080;
  -moz-text-shadow: 3px 3px 2px #808080;
  -webkit-text-shadow: 3px 3px 2px #808080;
 }
 
 #nameDiv {
  float: left;
  padding-top:10px;
  padding-left:5px;
 }
 
 #cityDiv {
  float:right;
  text-align:right;
  line-height: 15px;
  margin-top:10px;
  margin-right:10px;
  font-family:"Calisto MT";
 }
 
 #cityDiv .cityName {
  text-transform: uppercase;
  font-weight:bold;
  margin-top:5px;
 }
 
 #userPhoto {
  border:1px solid white;
  height:80%;
 }
 
 #mainArea {
  margin-top:3px;
  background-color:#ff8040;
  border:1px solid #804000;
  padding:0 5px 5px 5px;
  text-align:justify;
 }
 
 #userLikes {
  font-family:Tahoma;
  font-size:12px;
  line-height:18px;
  
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
 }
 
 #mainArea .goText {
  margin-top:3px;
  margin-bottom:3px;
  width:100%;
  font-family:Tahoma;
  text-align:center;
 }
</style>

<div id="frame">
 <div id="topPanel">
   <div id="photoDiv">
    <img id="userPhoto" src="http://graph.facebook.com/100000027824838/picture?type=normal" />
   </div>
   
   <div id="nameDiv">
    <p>Norbert</p>
    <p>Kozlowski</p>
   </div>
   
   <div id="cityDiv">
    <p>Aktualne miasto:</p>
    <p class="cityName">Wroclaw</p>
   </div>
 </div>
 <div id="mainArea">
  <p class="goText">Wiem co lubisz? Co powiesz na:</p>
  <hr />
  
  <div id="userLikes">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Nulla at turpis eget nibh ultricies dignissim. Duis luctus
 euismod turpis. Mauris augue. Aliquam facilisis semper elit.
 Pellentesque semper hendrerit arcu. Phasellus eleifend
 commodo justo. Aliquam orci urna, imperdiet sit amet,
 posuere in, lobortis et, risus. Integer interdum nonummy
 erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum,
 eleifend vitae, mollis vel, mollis sed, purus. Suspendisse
 mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit
 ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum
 primis in faucibus orci luctus et ultrices posuere cubilia
 Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et
 ligula eu massa sagittis rutrum. In urna nibh, eleifend vel,
 suscipit ut, sagittis id, nunc.
  </div>
 </div>
</div>

Należy zamienić takie miejsca jak:

• #photoDiv
• #nameDiv
• #cityDiv
• #userLikes

Aby poszczególne sekcje pobierały dane ze zmiennych, należy podmienić wpisane przykładowe wartości nazwami zmiennych. Więc:

<div id="photoDiv">
 <img id="userPhoto" src="' . $userPhotoAddress . '" />
</div>

Zamiana imienia i nazwiska:

<div id="nameDiv">
 <p>' . $userName . '</p>
 <p>' . $userLastName . '</p>
</div>

miasta:

<div id="cityDiv">
 <p>Aktualne miasto:</p>
 <p class="cityName">' . $userCity . '</p>
</div>

Wypisanie lubianych przedmiotów

<div id="userLikes">';

 for ($i = 0; $i < sizeof($likesArray); $i  ) {
  echo '<b>=> </b>' . $likesArray[$i]->name;
 }
  
echo ' 
</div>

Użyłem apostrofów, aby wyjść funkcji echo, wypisać całą zawartość tablicy, a potem znowu ją wywołać, aby pozamykać pozostałe sekcje. Warto też dodać znacznik nowej linii po każdym przedmiocie (tutaj był pomijany). Całość widać na zrzucie ekranu

Wnioski

Przykładowe screeny:

 

Napotkane problemy wymagające rozwiązania: kompatybilność z przeglądarkami (poprawne wyświetlanie zdjęcia), kodowanie polskich znaków.

Założony cel osiągnięty.