Media Społecznos ciowe - 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 Facebooka (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 information... '); FB.api('/me', function(response) { console.log('successful login for: ' + response.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 Facebooka (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</title> <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 Facebooka (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 information... '); FB.api('/me', function(response) { console.log('successful login for: ' + response.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 SDK. 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