• en
  • pl

Javascript

facebook-icon
Jak połączyć sesję Javascript z PHP w Facebook SDK 4.0

SDk Facebooka nigdy nie grzeszyły ani stabilnością, ani rozbudowaną dokumentacją. Zespół developerów FB próbuje jednak tą dziurę łatać w kolejnych wersjach. Ostatnia, czwarta wersja SDK ma już znamiona używalnego. Wprowadza kilka zmian, które ułatwiają wiele elementów, jednak w pierwszym momencie można pogubić się co, jak i dlaczego. Spróbujemy przybliżyć zmiany na podstawie przypadku, kiedy użytkownik loguje się za pomocą SDK Javascriptowego, a następnie nasz program ma za zadanie wykorzystać ciastko otworzone w ten sposób do wykonywania zapytań z pomocą PHP.

//These need to be updated, obviously
$fb_app_id = "xxxxxxxxxxxxxxxxxxx";
$fb_app_secret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

require_once( 'Facebook/FacebookSession.php' );
require_once( 'Facebook/FacebookRedirectLoginHelper.php' );
require_once( 'Facebook/FacebookRequest.php' );
require_once( 'Facebook/FacebookResponse.php' );
require_once( 'Facebook/FacebookSDKException.php' );
require_once( 'Facebook/FacebookRequestException.php' );
require_once( 'Facebook/FacebookOtherException.php' );
require_once( 'Facebook/FacebookAuthorizationException.php' );
require_once( 'Facebook/GraphObject.php' );
require_once( 'Facebook/GraphSessionInfo.php' );
require_once( 'Facebook/FacebookSignedRequestFromInputHelper.php' );
require_once( 'Facebook/FacebookJavaScriptLoginHelper.php' );
require_once( 'Facebook\HttpClients\FacebookHttpable.php' );
require_once( 'Facebook\HttpClients\FacebookCurlHttpClient.php' );
require_once( 'Facebook\HttpClients\FacebookCurl.php' );
require_once( 'Facebook\Entities\SignedRequest.php' );
require_once( 'Facebook\GraphUser.php' );

use Facebook\GraphUser;
use Facebook\FacebookRequest;
use Facebook\FacebookRequestException;
use Facebook\FacebookSession;
use Facebook\FacebookSignedRequestFromInputHelper;
use Facebook\FacebookJavaScriptLoginHelper;
use Facebook\Entities\SignedRequest;
use Facebook\HttpClients\FacebookCurlHttpClient;
use Facebook\HttpClients\FacebookHttpable;
use Facebook\HttpClients\FacebookCurl;

FacebookSession::setDefaultApplication($fb_app_id, $fb_app_secret);
$session = null;

//Starting new session to remember the token
session_start();

/* checking if facebook session token is available */
if ( !empty( $_SESSION["fb_token"] ) ) {
    try {
        $session = new FacebookSession( $_SESSION["fb_token"] );
        $session->validate();
    } catch (FacebookAuthorizationException $ex) {
        $session = null;
        $_SESSION["fb_token"] = NULL;
    }
} else {
    // getting token from js api/sdk
    $helper = new FacebookJavaScriptLoginHelper();

    try {
        $session = $helper->getSession();

        // creating new, long lived session. Js returns shortly living token
        $session = $session->getLongLivedSession();

        // remembering token for further usage
        $_SESSION["fb_token"] = $session->getToken();

    } catch (FacebookRequestException $ex) {
        // When Facebook returns an error
        $_SESSION["fb_token"] = NULL;
        echo $ex->getMessage();
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

if ($session) {
    try {
        //getting user data
        $user_profile = (new FacebookRequest(
            $session, 'GET', '/me'
        ))->execute()->getGraphObject(GraphUser::className());

        //printing user data
        print_r( $user_profile );
    } catch (FacebookRequestException $e) {
        print_r($e->getMessage());
        return null;
    }
}

Sam kod powinien być zrozumiały, jedna trzeba zwrócić uwagę na kilka rzeczy. Token zwracany przez getLongLivedSession() nie jest zapisywany przez SDK, należy go zapamiętać własnoręcznie, i wykorzystać do utworzenia kolejne sesji. Inaczej przy kolejnym requescie tracimy możliwość wykonania zapytania do API facebooka.

Kod służący do zainicjowania SDK po stronie js wygląda następująco:

window.fbAsyncInit = function() {
	FB.init({
	  appId      : '<?php echo $fb_app_id; ?>',
	  xfbml      : true,
	  version    : 'v2.0',
	  cookie:true
	});
};

(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'));

Zwracamy uwage na cookie:true, co tworzy ciastko po stronie serwera i daje nam dostęp do sesji z poziomu PHP.

Najnowsza wersja SDK wymaga PHP w wersji minimum 5.3.

Powodzenia!

Facebook SDK 4.0
https://developers.facebook.com/docs/reference/php/4.0.0

prototype-img
Frameworki html do szybkiego prototypowania

Jedną z największych zalet HTML5 jest możliwość szybkiego prototypowania aplikacji. Dzięki temu mamy możliwość przetestowania funkcjonalności zanim przedrzemy się przez dziesiątki tysięcy linii kodu, testów i dokumentacji. Daje to nam szybki podgląd na to, czy nasz serwis będzie funkcjonalny, czy wymaga przemyślenia lub optymalizacji pod kątem usability. Poniżej prezentujemy najpopularniejsze frameworki które ułatwiają to zadanie.

 Foundation

http://foundation.zurb.com/

Pierwszym (i jednocześnie naszym faworytem) jest Foundation, stworzony przez firmę Zurb. Framework ten, poza podstawową funkcjonalnością, czyli rozmieszczaniem elementów na responsywnym gridzie, udostępnia zestaw gotowych, spójnych komponentów ułatwiających tworzenie nawigacji i struktury informacyjnej.

Do zestawu oferowanych przez niego przyjemnych kolorystycznie i świetnie łączących się ze sobą kontrolek należą m.in.:

– alerty
– block grid
– breadcrumbs
– przyciski
– grupy przycisków
– dropdowns/listy rozwijane
– formularze
– flex video
– joyride (świetny dla tworzenia tutoriali i samouczków)
– etykiety
– magellan
– paginacja
– i wiele innych.

Poza zestawem kontrolek mamy do dyspozycji również zestaw klas ogólnego zastosowania, które umożliwiają osiągnięcie określonego, spójnego z resztą elementów wyglądu. Warto zaznaczyć, że konfiguracja Foundation jest oparta nie na czystym CSS, a na SASS.

Bootstrap

http://getbootstrap.com/

Bootstrap jest najpopularniejszym rozwiązaniem wśród narzędzi do prototypowania. Na pierwszy rzut oka niewiele różni się od Foundation. Na drugi i trzeci zresztą również. Podobnie jak wspomniany wyżej, tworzenie layoutów odbywa się na zasadziej „mobile first”, czyli najpierw projektujemy interfejs mobilny i rozwijamy go dla urządzeń o większych rozdzielczościach.

Warto wspomnieć, że Bootstrap został stworzony przez pracowników Twittera.

Co udostępnia:

– dropdowns
– grupy przycisków
– paski przycisków (button toolbars)
– pionowa nawigacja
– checkboxes i radiobuttons
– button addons
– przyciski z dropdownami
– navbars
– formularze
– breadcrumbs
– paginację
– etykiety
– badges
– alerty
– paski postępu
– i mnóstwo innych elementów.

Przewagę Bootstrapa odnajdujemy w ogromie kombinacji w które można układać komponenty. Całość jest spójna i jest bardzo łatwa w obsłudze.

Skeleton

http://www.getskeleton.com/

Skeleton jest najmniej znanym rozwiązaniem z wymienionych. Został stworzony przez… jednego z byłych pracowników zarówno Twittera jak i firmy Zurb, co już samo w sobie świadczy o klasie rozwiązania. W przeciwieństwie do pozostałych dwóch, Skeleton mniej skupia się na samym wyglądzie, a bardziej na jego układzie i rozmieszczeniu. Otrzymujemy na dzień dobry wyłącznie rozmieszczanie elementów na gridzie, podstawową, jednak estetycznie przygotowaną typografię, prosty formularz oraz oskinowane przyciski.

 


 

Jeśli poszukujecie prostych i szybkich rozwiązań do tworzenia prototypów aplikacji html5, lub serwisów internetowych, te trzy pozycję stanowią pierwszy wybór. Nasz dość pobieżny opis niewiele mówi o ich złożoności i możliwościach, ale więcej informacji bez problemu odnajdziecie na stronach ich twórców.