MediaSpołecznosciowe-Facebook

Na dobry początek:

Laboratorium 1 - Logowanie z wykorzystaniem Facebooka

Laboratorium to wprowadza do tworzenia aplikacji wykorzystujących API Facebooka. Omówione są

tu przede wszystkim procedury uzyskania dostępu do API i zasobów developerskich.Przedstawione są

tu podstawowe informacje niezbędne do prawidłowego zainicjowania aplikacji Web (lub innej),

współpracującej z API Facebooka. Omówienie kolejnych etapów przedstawione jest na przykładzie

prostej konstrukcji uwierzytelnienia użytkownika za pomocą logowania via Facebook.

Etap 1 – Założenie konta

Aby móc korzystać w swojej aplikacji z logowania via Facebook konieczne jest posiadanie konta…

TAK! Na Facebooku. Konto to będzie traktowane jako właściciel aplikacji, z jego poziomu możliwe

będzie konfigurowanie jej parametrów i uprawnień w Facebooku.

Jeśli posiadasz już konto na Facebooku i chcesz z niego korzystać w czasie tych zajęć, możesz przejść

do etapu 2.

Aby założyć konto na Facebooku konieczne jest posiadanie konta e-mail, do którego będzie

przypisane konto Facebook. Chcącym założyć konto jedynie dla celów tych zajęć proponujemy

wykorzystanie kont e-mail na darmowych serwisach (o2, wp, itd.)

Po założeniu i zweryfikowaniu konta prosimy o „poklikanie” po danych profilu użytkownika (wybranie

widzianych filmów, muzyki, itp.) i umieszczenie kilku wpisów.

Należy również zadbać o liczbę Znajomych. Prosimy porozsyłać między uczestnikami zajęć

zaproszenia, tak aby każde konto posiadało minimum 2 znajomych.

Etap 2 – Hostowanie aplikacji

Nasza aplikacja Web musi być dostępna pod jakąś domeną. Teoretycznie można by skorzystać z

własnego serwera WWW typu XAMPP uruchomionego na tym samym komputerze. Odradzamy tego

podejścia ze względu na konieczność podania adresu url naszej aplikacji (co może być kłopotliwe dla

komputerów laboratoryjnych) oraz potencjalnych problemów z ograniczeniami w ruchu sieciowym

ustanowionymi dla komputerów w laboratorium.

Alternatywą jest posiadanie konta na zewnętrznym serwerze www. Posiadający takie konta mogą

skorzystać z ich zasobów. Reszta uczestników proszona jest o założenie konta www na jednym z

darmowych hostingów, np. prv.pl

Etap 3 – Rejestracja aplikacji w Facebooku

Każda aplikacja współpracująca z Facebookiem musi mieć swój unikalny identyfikator appID.

Uzyskanie takiego identyfikatora jest możliwe podczas rejestrowania aplikacji w serwisie Facebook.

Rejestracja aplikacji rozpoczyna się o przejścia do serwisu: developers.facebook.com (strona

przyjmuje tego samego użytkownika, co w głownym serwisie)

Po kliknięciu na zakładkę Apps musimy wpierw zarejestrować się jako developerzy

Proces ten wymaga niestety dodatkowego poziomu autentykacji w postaci numeru telefonu, na który

zostanie przesłany kod.

Po przebrnięciu przez w/w procedurę można wreszcie zarejestrować aplikację.

Po kliknięciu Add a New App musimy nadać jej nazwę oraz określić jej typ. Zalecane jest, aby nazwa

była w miarę unikalna. Nie jest to jednak nazwa identyfikująca aplikację w Facebooku. Taką unikalną

nazwę można zdefiniować w polu Namespace, ma to szczególne znaczenie w przypadku aplikacji

„wewnętrznych” w Facebooku gdzie późniejszy adres do tej aplikacji będzie miał postać:

facebook.com/nazwaAplikacji.

W rezultacie naszych działań otrzymujemy aplikację o określonej nazwie i identyfikatorze App ID.

Identyfikator App Secret jest elementem szczególnie chronionym i służy do uzyskiwania przez

aplikację uprawnień od użytkowników Facebooka. Jeśli dany użytkownik zezwoli aplikacji na

publikowanie postów w jego imieniu, to zezwolenie to jest przypisywane właśnie do identyfikatora

App Secret tej aplikacji. Tylko z jego pomocą aplikacja może” skorzystać” ze swoich uprawnień.

Etap 4 – konfiguracja dostępu

Jakkolwiek w oficialnym tutorialu Facebooka napisane jest, że do uruchomienia logowania wymagany

jest App ID i miejsce do hostowania aplikacji to jednak konieczne jest jeszcze wskazanie domeny i

adresu www aplikacji w ustawieniach Facebooka. W innym przypadku przy próbie logowania

otrzymamy błąd niezarejestrowanej domeny.

W dziale Settings należy ustawić odpowiednią domenę naszej aplikacji oraz jej adres.

Etap 5 – tworzenie kodu

Na potrzeby tego laboratorium wykorzystamy statyczną stronę www zawierającą kod JavaScript*

realizujący wywołanie logowania via Facebook i wyświetlenie danych zalogowanego użytkownika.

Wykorzystamy do tego celu gotowy przykład ze strony developerskiej Facebooka.

Przykład ten wykorzystuje jedną z oficjalnych bibliotek dla popularnych języków programowania. Jest

to biblioteka JavaScript.

Facebook traktuje dość nieufnie kod JavaScript. Wprowadzone są mechanizmy znacznie

ograniczające możliwości skryptu gdy jest on uruchamiany z poziomu strony wyświetlanej jako

integralna część serwisu Facebook. Jako alternatywę Facebook proponuje FBJS (FaceBook JavaScript).

Kod przykładu dostępny jest poniżej

<!DOCTYPE html> <html> <head> <title>Facebook Login JavaScript Example</title> <meta charset="UTF-8"> </head> <body> <h1>test</h1> <script> function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); if (response.status === 'connected') { testAPI(); } else if (response.status === 'not_authorized' ) { document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : ' 3176……65220', // numer App ID wygenerowany wcze śniej

cookie : true, xfbml : true, version : 'v2.1' }); FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; // Asynchroniczne pobranie javascriptowego SDK Fa cebooka (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 = "//connect.facebook.net/en_US/ sdk.js ";

fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function testAPI() { console.log('Welcome! Fetching your informatio n.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + respon se.name); document.getElementById('status').innerHTML =

'Thanks for logging in, ' + response.name + '!';

}); } </script> <!-- SKD facebooka rozpoznaje znaczniki zaczynaj ące si ę od <fb: i wstawia w ich miejsce odpowiednie kontrolki. W tym przypadku jest to przycisk aktywuj ący logowanie poprzez facebook. Funkcja FB.login(). Tutaj równie ż jest okre ślony zakres danych u żytkownika, jakie zostan ą przekazane do aplikacji wraz z loginem. --> <fb:login-button scope=" public_profile,email " onlogin="checkLoginState();">

</fb:login-button> <div id="status"> </div> </body> </html>

Zanim omówimy dokładnie znaczenie poszczególnych kawałków kodu, prześledzimy działanie

aplikacji.

Po otwarciu naszej strony w przeglądarce otrzymamy niezwykle bogate wnętrze w postaci nagłówka

„test” oraz przycisku logowania z logiem Facebooka, pod którym znajduje się linijka tekstu

zachęcająca do zalogowania się.

Kliknięcie na w/w przycisk spowoduje jedną z 2 reakcji. Jeśli nie jesteśmy jeszcze zalogowani do

Facebooka w którejś z zakładek tej przeglądarki, pojawi się standardowe okienko logowania do

Facebooka.

Jeśli byliśmy już zalogowani (lub właśnie się zalogowaliśmy w oknie pierwszym) pojawi się kolejne

okienko, informujące o zakresie danych użytkownika, jakie aplikacja chce pobrać z Facebooka

Dopiero po zatwierdzeniu tego komunikatu nastąpi prawidłowe zalogowanie do aplikacji. W naszym

przypadku jest to potwierdzone zmianą komunikatu.

W naszym przypadku możemy nie zobaczyć żadnego z wyskakujących okien po kliknięciu przycisku a

tekst poniżej wskaże nasze zalogowanie. Dzieje się tak z powodu bycia zalogowanym na koncie

developerskim w Facebooku w innej zakładce przeglądarki (eliminacja okna 1) oraz faktu logowania

się do swojej własnej aplikacji (brak potrzeby uzyskania zgody na przekazanie danych – okno 2).

Niestety jednocześnie inni uczestnicy laboratorium próbujący zalogować się do naszej aplikacji

otrzymają komunikat:

Wiąże się to z tym, że nasza aplikacja nie została jeszcze udostępniona publicznie. Aby to zrobić w

zakładce apps -> NazwaNaszejAplikacji w serwisie developerskim musimy przejść do obszaru

Status&Review.

Przełącznik publicznego udostępnienia aplikacji będzie aktywny tylko wtedy, gdy w obszarze Settings

podamy prawidłowy adres w polu Contact Email

Po zapisaniu tych ustawień, każdy użytkownik Facebooka powinien być w stanie zalogować się do

naszej aplikacji.

Przetestuj dostępność aplikacji korzystając z pomocy współuczestników zajęć.

Objaśnienie kodu

Na początek funkcja realizująca asynchroniczne załadowanie Facebook SDK

// Asynchroniczne pobranie javascriptowego SDK Fa cebooka (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 = "//connect.facebook.net/en_US/ sdk.js ";

fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

Pobranie biblioteki sdk.js z adresu connect.facebook.net/en_US/sdk.js może być również

zrealizowane po prostu jako pierwszy skrypt na stronie. Powyższy kod realizuje pobranie tego pliku w

tle i umieszczenie go w strukturze DOM dokumentu przed wszystkimi obiektami typu SCRIPT, z

identyfikatorem facebook-jssdk.

Mając to za sobą możemy śledzić realizację reszty funkcji

<!DOCTYPE html> <html> <head> <title>Przykładowa strona logowania via Facebook</t itle> <meta charset="UTF-8"> </head> <body>

<h1>test</h1>

Nasz ulubiony tekst nagłówkowy

<script> function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); if (response.status === 'connected') { testAPI(); } else if (response.status === 'not_authorized' ) { document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } }

Funkcja realizująca sprawdzenie stanu po operacji logowania. Response jest zwracane przez

FB.getLoginStatus() po zakończeniu operacji logowania. Response zawiera pole status określające

stan zalogowania do Facebooka i aplikacji. Możliwe opcje to „connected” – zalogowany do aplikacji,

„not_authorized” – zalogowany do Facebooka ale nie do aplikacji (użytkownik nie autoryzował

dostępu do danych dla aplikacji),” unknown” – użytkownik nie jest zalogowany na Facebooku (stan

jego zalogowania do aplikacji nie jest znany).

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

Funkcja sprawdzająca stan zalogowania po zakończeniu działania przycisku login. Funkcja jest

wywoływana jako obsługa zdarzenia onlogin dla tego przycisku.

window.fbAsyncInit = function() { FB.init({ appId : ' 3176……65220', // numer App ID wygenerowany wcze śniej

cookie : true, xfbml : true, version : 'v2.1' });

Funkcja inicjacji SDK aplikacji w Facebooku. Najważniejszy jest tu appId, który musi zawierać

wygenerowany w serwisie deweloperskim ciąg cyfr. Parametr xfbml określa czy aplikacja będzie

wykorzystywać pluginy społecne (social plugins), o których szerzej w następnym laboratorium.

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

Funkcja sprawdzająca stan zalogowania po załadowaniu aplikacji

// Asynchroniczne pobranie javascriptowego SDK Fa cebooka (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 = "//connect.facebook.net/en_US/ sdk.js ";

fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

To już wiemy

function testAPI() { console.log('Welcome! Fetching your informatio n.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + respon se.name); document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';

}); } </script>

Funkcja ta jest wywoływana w przypadku zalogowania do aplikacji. Wykonuje ona zapytanie do

serwisu Graph Facebooka o udostępnienie danych zalogowanego użytkownika (słowo kluczowe

„/me”). Komunikacja z serwisem Graph realizowana jest z użyciem tokenu Oauth określającym

poziom dostępu aplikacji do danych użytkownika Facebooka.

<!-- SKD facebooka rozpoznaje znaczniki zaczynaj ące si ę od <fb: i wstawia w ich miejsce odpowiednie kontrolki. W tym przypadku jest to przycisk aktywuj ący logowanie poprzez Facebooku - Funkcja FB.login()w S DK. Tutaj równie ż jest okre ślony zakres danych u żytkownika, jakie zostan ą przekazane do aplikacji wraz z loginem (o ile u żytkownik wyrazi zgod ę). --> <fb:login-button scope=" public_profile,email " onlogin="checkLoginState();">

</fb:login-button> <div id="status"> </div> </body>

</html>

Przycisk logowania i kontener DIV na status zalogowania.

Zadanie 1

Po przebrnięciu przez tutorial będący pierwszą częścią laboratorium 1, kolej na pracę własną.

Potrafimy już zrealizować logowanie użytkownika poprzez Facebook do naszej aplikacji. Proces

logowania odbywa się jednak po stronie użytkownika (w przeglądarce), konieczne jest dodanie zapisu

danych logowania po stronie serwera

Zadaniem jest rozbudowanie istniejącego logowania via Facebook z wykorzystaniem języka po

stronie serwera (preferowany PHP). Aplikacja powinna gromadzić dostępne dane o zalogowanym

użytkowniku (minimum to ID) w celu odróżnienia nowych użytkowników od logujących się ponownie.

Wymagane dane to ID i data ostatniego logowania. Dane te powinny być przechowywane na

serwerze.

Wymagane ekrany aplikacji:

* Ekran powitalny dla niezalogowanych użytkowników (Przycisk logowania via Facebook)

* Ekran powitalny dla nowego użytkownika (formularz profilu użytkownika z podstawowymi polami

wypełnionymi na podstawie danych z Facebooka – nie musimy obecnie go zapisywać)

* Ekran powitalny dla użytkownika logującego się ponownie (Powitanie po nazwie i informacja o

ostatnim poprawnym logowaniu)

* Ekran informacji o błędzie logowania (not_authorized)

Aplikacja powinna zostać umieszczona na serwerze i przetestowana przez współuczestników zajęć.

Podpowiedź:

Odczyt danych o zalogowanym użytkowniku można zrealizować albo po stronie użytkownika,

rozbudowując funkcję testAPI i przekazując je na serwer(istnieje niebezpieczeństwo ingerencji w dane

użytkownika przesyłane zwrotnie do serwera).

Odczyt danych można zrealizować również po stronie serwera wykorzystując

FacebookJavaScriptLoginHelper for the Facebook SDK for PHP

https://developers.facebook.com/docs/php/FacebookJavaScriptLoginHelper/4.0.0?locale=pl_PL

oraz ten przykład Retrieve User Profile via the Graph API

https://developers.facebook.com/docs/php/howto/profilewithgraphapi/4.0.0?locale=pl_PL