Upload
matteo-riggio
View
6.479
Download
2
Embed Size (px)
DESCRIPTION
Citation preview
Sviluppare applicazioni Facebook
Intesys, 11/07/2011
Intesys Talk
Intesys TalkPagina 2
1. Introduzione2. Risorse principali
1. Canvas Page2. Social Channels3. Insights
3. Concetti chiave della piattaforma
1. Social Graph2. Open Graph3. Graph API4. OAuth5. Authentication
1. Server-side Flow2. Client-side Flow
Sommario4. In pratica
1. Creare l’app2. Configurazione3. Il canvas4. Autorizzazioni5. Esempio6. SDKs
1. Javascript SDK1. Channel File2. Autenticazione e
Autorizzazione3. Chiamate alle
API2. PHP SDK
1. Installazione e Inizializzazione
2. Autenticazione e Autorizzazione
3. Chiamata alle API
5. Tools1. Access Token Tool2. Test Users3. Platform Status4. Debugger5. Graph API
Explorer6. Javascript Test
Console6. Funzionalità avanzate
1. FQL2. Dialogs3. Credits4. I18N5. Chat API
7. Fonti e ringraziamenti
Intesys TalkPagina 3
Perché sviluppare applicazioni Facebook?E’ utile sviluppare applicazioni Facebook perchè permette di creare un canale social tra il brand per cui lavoriamo e gli utenti finali.
Intesys TalkPagina 4
Strumenti messi a disposizione da Facebook- Canvas Page
- Social Channels - Insights
Le 3 risorse principali
Intesys TalkPagina 5
Le applicazioni FB sono web app liberamente realizzabili con i comuni linguaggi orientati allo sviluppo web (php, python,Java, C#,ecc).La canvas è molto simile ad un iframe all’interno del quale viene caricata la nostra app.La canvas viene popolata attraverso una Canvas URL sulla quale risiederà la nostra app.Quando un utente visita la nostra app, FB caricherà tramite iframe il contenuto della nostra Canvas URL. Lo spazio a disposizione all’interno della Canvas è di default di 760px ma può essere fluido (dal Novembre 2011) ed occupare tutta la larghezza del browser.
Canvas Page
Intesys TalkPagina 6
Per portare più traffico possibile verso la propria app, Facebook mette a disposizione alcuni
canali quali :
Bookmarks
Aggiunti in automatico sulla pagina dell’utente una volta che ha utilizzato l’app;
permettono facilmente di far tornare l’utente
Notifiche
Permettono a più utenti di ricevere notifiche riguardanti inviti ad utilizzare l’app;
ne esistono di 2 tipi:
user generated : richieste tramite popup all’utente che decide se inviarle o meno agli amici
app generated : inviate in automatico dall’app agli utenti che ne hanno espresso il consenso nei
permessi (si vedrà dopo come richiedere i permessi)
News feed
Vengono creati in automatico da Facebook nella parte in alto a destra dell’homepage
mentre possono essere pubblicati come post sempre dietro consenso esplicito dell’utente.
Social Channels
Intesys TalkPagina 7
InsightsInsights è uno strumento messo a disposizione da Facebook per trackare e quindi poter analizzare gli utenti, lo sharing fatto in relazione all’applicazione, le performance dell’applicazione, ecc.
Intesys TalkPagina 8
Concetti chiavePrima di procedere con la creazione di un applicazione bisogna andare a capire com'è stato strutturato e
concepito il social network.
- Social Graph
- Open Graph
- Graph API
- Authentication
Intesys TalkPagina 9
Social GraphTutti i dati presenti all'interno di Facebook sono
rappresentati come entità di un immenso grafo(*)
dotato di identificato univoco (FB id).
Ad esempio, l'utente Mario Rossi con i suoi dati è
un nodo del grafo, da questo nodo partono
connessioni verso altri nodi : gli amici di Mario,
le sue foto,ecc. Tutto l'insieme dei milioni e milioni
di utenti di Facebook forma il grafo dell'intero
social network, che si potrà scandagliare per
mezzo delle Graph API.
(*) Grafo: struttura matematica costituita da un
insieme di nodi collegati fra loro.
Date le molte proprietà, vengono studiati sia in
matematica che in informatica.
(http://it.wikipedia.org/wiki/Grafo)
Intesys TalkPagina 10
L’OGP è un protocollo creato da Facebook nel 2008 (evolutosi fino ad oggi – vedi la “timeline”), chetrasforma qualsiasi pagina web in un entità associabile al grafo sociale di un’utente.Le pagine web che contengono il “Like Button” di Facebook vengono viste dalla piattaforma come “pagine Facebook” e quindi entità del grafo complessivo del social network.Come nell’esempio qui sotto, l’utente clicca sul “mi piace” di una pagina di un film ed in automatico viene creata la connessione tra l’entità (la pagina Facebook del film) e l’utente.
Open Graph Protocol
Intesys TalkPagina 11
Dal settembre 2011, dopo la conferenzaF8, che ha introdotto Timeline, all'interno di OGP sono state incluse le “attività” e gli “oggetti” (per ora solo applicazioni) che si integrano in profondità con il social network.Un breve esempio.Creiamo un'applicazione che fornisce ricette, durante la configurazione dell'app si può impostare che tipo di attività l'utente svolgerà (in questo caso cucinare).Quando l'utente aggiungerà l'app alla sua timeline, le attività specificate durante la configurazione verranno condivise sul news feed, sul ticker (l'area in alto a destra) e sulla propria timeline.
Modifiche a Open Graph Protocol
Intesys TalkPagina 12
Il cuore della programmazione Facebook è costituito dalle Graph API, collezione di semplici servizi Web utili per navigare il grafo sociale.Un semplice esempio.Collegandosi all'indirizzo https://graph.facebook.com/platform, vedremo apparire una serie di informazioni relative all'id (in questo caso l'alias) dell'utente inserito.Come detto prima, ogni entità del grafo ha un suo identificativo (numerico o alias) che può essere usato per recuperare i dati sull'entità, qualora ne avessimo i permessi.Ogni entità ha i suoi dati, in quanto, ovviamente, un album di foto avrà campi diversi dal profilo di un utente.Per vedere quali campi si possono estrarre da ogni entità ci viene incontro la documentazione ufficiale: http://developers.facebook.com/docs/reference/api/Altro tool molto utile è il Graph API Explorer, che ci aiuta notevolmente nello sviluppo delle apps: https://developers.facebook.com/tools/explorer?method=GET&path=19292868552L'impiego delle API verrà spiegato a breve, dopo la creazione e configurazione delle nostre apps.
Graph API
Intesys TalkPagina 13
Si aveva la necessità di autenticare applicazioni di terze parti su sistemi esterni per dare la possibilità a queste applicazioni di accedere alle API del sistema esterno.OAuth è un protocollo open, conforme alla metodologia RESTful, quindi facilmente applicabile da tutte quelle applicazioni scritte con linguaggi capacia di aprire socket.I principi fondamentali sono 2 (riportati dal sito ufficiale): - è un metodo facile per interagire con dati protetti, è un metodo sicuro con cui gli utenti forniscono gli accessi. - se si interagisce con i dati degli utenti si consiglia Oauth, perché permette di accedere ai dati degli utenti senza conoscerne le credenziali.In poche parole, l’utente autorizzerò un’applicazione ad accedere ai suoi dati presso il sistema esterno senza che l’applicazione conosca le credenziali dell’utente.
Lo utilizzano quasi tutti i big del web, come Facebook, Twitter, Yahoo!,Google,ecc.Di seguito spiegherò il flusso di autenticazione.
Il protocollo OAuth
Intesys TalkPagina 14
Fase preliminare: lo sviluppatore dell’Applicazione deve registrare quest’ultima sul Servizio Esterno, indicando quali dati potranno essere recuperati.1 - L’ utente accede all’applicazione,(2) che contatta il sistema esterno per ricevere un “Unauthorized Request Token”(3);4 - L’applicazione ridirige l’ utente verso il sistema esterno, passando il token non autorizzato;5 - L’ utente decide di autorizzare l’applicazione direttamente sul sistema esterno;6 - Il sistema esterno ridirige l’utente verso l’applicazione passando un “Access Token”(7);L’applicazione accede ai dati dell’Utente presenti sul sistema esterno grazie al token autorizzato.
Il protocollo OAuth
Intesys TalkPagina 15
All’inizio del Maggio 2010, il gruppo di lavoro di OAuth ha rilasciato la bozza della seconda versione.Le novità rispetto alla versione precedente riguardano:- 6 nuovi flussi di autenticazione (user-agent flow,web server flow, device flow, ecc.) per
le applicazioni che non prevedono browser- L’applicazione client non necessità per forza di meccanismi di crittografia, ma si utilizza
una connessione via https per l’autenticazione (basato sulle API di Twitter, poi implementato anche da facebook)
- Autenticazione meno complicata- I token forniti con OAuth 2.0 hanno un tempo di expires breve- Netta separazione dei ruoli tra il server responsabile della gestione delle richieste
OAuth e il server che gestisce l’autorizzazione dell’utente.
Differenze tra OAuth 1.0 e OAuth 2.0
Intesys TalkPagina 16
Facebook utilizza il protocollo OAuth 2.0 per l'autenticazione e l'autorizzazione.Supporta diversi flussi per l'autenticazione da integrare con il proprio sito o la propria app, mobile o desktop che sia.
User LoginFacebook supporta 2 tipi diversi di flusso per il login dell'utente. - server-side, noto come flusso con codice di autenticazione - client-side, noto come flusso implicitoQuello server-side viene usato per fare una chiamata alle Graph API dal nostro web server, quello client-side per effettuare le chiamate tramite javascript su browser o da applicazioni mobile o desktop.
Indipendentemente dal tipo di flusso scelto, l'implementazione di Facebook dei flussi prevede 3 step: - user authentication, verifica che l'utente è quello che dice di essere - app authorization, verifica che l'utente conosce quali permessi l'applicazione avrà sui suoi dati - app authentication, verifica che l'utente sta fornendo le sue informazioni e non quelle di altriUna volta completati tutti questi step, all'app viene fornito uno user access token, che permette all'app di accedere alle informazioni dell'utente.
Facebook Authentication
Intesys TalkPagina 17
L'autenticazione dell'utente e l'autorizzazione dell'app vengono effettuate contemporaneamente attraverso il popup OAuth.Quando si richiama questo popup si devono passare i parametri app_id (generata al momento di creazione dell'app) e l'URI di ritorno a cui il browser punterà dopo l'autorizzazione dell'app (*).https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL
(*) Il parametro redirect_uri deve ovviamente far parte del dominio su cui risiede l'app.
Se l'utente è già loggato, il popup valida il cookie di login salvato sul browser dell'utente, altrimenti vengonomostrati i campi di login.Una volta autenticato l'utente viene mostrata la lista di permessi che l'applicazione richiede all'utente.Di default l'app ha accesso alle informazioni pubbliche dell'utente.Per richiedere informazioni aggiuntive, come foto, note, link, ecc., si deve aggiungere un altro parametro all'url, cioè scope. Nel parametro scope vanno specificati i permessi da richiedere all'utente.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream
Per la lista di tutti i permessi si guardi la reference: http://developers.facebook.com/docs/reference/api/permissions/
NB: Facebook ha verificato una proporzionalità inversa tra il numero di permessi richiesti ed il numero di utenti.
Server-side Flow
Intesys TalkPagina 18
Se l'utente non garantisce i permessi l'OAuth Dialog redireziona(via HTTP 302) all'URI passato come parametro con alcuni parametri aggiuntivi: http://YOUR_URL? error_reason=user_denied& error=access_denied& error_description=The+user+denied+your+request.Se l'utente garantisce i permessi l'OAuth Dialog redireziona, come nel precedente, all'URI specificato aggiungendo però il parametro code : http://YOUR_URL?code=A_CODE_GENERATED_BY_SERVERAvendo il parametro code in mano si può procedere allo step finale, cioè l'app authentication, per ottenere l'access token da utilizzare per le chiamate API.Per farlo si devono passare all'URL https://graph.facebook.com/oauth/access_token questi parametri:- client_id=YOUR_APP_ID : parametro generato alla creazione dell'app- redirect_uri=YOUR_URL : come nello step precedente, è un URI che risiede sul nostro dominio,
su cui atterreremo una volta autorizzata l'app- client_secret=YOUR_APP_SECRET : parametro generato alla creazione dell'app- code=THE_CODE_FROM_ABOVE : il codice ottenuto appena primaquindihttps://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID& redirect_uri=YOUR_URL& client_secret=YOUR_APP_SECRET& code=THE_CODE_FROM_ABOVE
Server-side Flow
Intesys TalkPagina 19
Una volta autorizzata l'app, il server ci restituirà l'access token.Insieme all'access token avremo anche il parametro expires, contenente il numero di secondi prima che il token scada.Ovviamente se il token scade, si dovranno rifare tutti quanti i passaggi precedenti.
NB: per avere un access_token che non scada mai, bisogna richiedere come permesso quello di offline_access,permesso che però viene molto spesso negato dagli utenti.
Nel caso di un errore nell'autorizzazione dell'app, il server ci restituirà l'errore HTTP 400, contenente nel responsetipo e messaggio di errore.
Server-side Flow
Intesys TalkPagina 20
La versione client-side usa anch'essa OAuthDialog ma con un parametro aggiuntivo che è il response_type.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=tokenAnche qui, per i permessi aggiuntivi, si usa il parametro scope=permessi_da_richiedere.Una volta che l’utente è autenticato ed ha autorizzato l’app, il browser reindirizza al redirect_uri, però anziché passare il parametro code, passa l’access_token all’interno di un frammento dell’URI (#access_token).Dato che l’access_token è passato tramite frammento dell’URI, solo codice client-side potrà estrapolarlo.
Client-side Flow
Intesys TalkPagina 21
Creare l’appSe non si sono mai create applicazioni, bisogna visitare la “Developer app”, che ci autorizza a creareapplicazioni.Per creare un app poi verrà verificato l’account dello sviluppatore attraverso la conferma del numero ditelefono o della carta di credito.
Intesys TalkPagina 22
1. Cliccando su “+Crea Applicazione”, avremo questopopup in cui specificare nome dell’applicazione enamespace (vedremo dopo a cosa servirà).2. Il passo successivo prevede l’inserimento di un CAPTCHA fino ad arrivare al pannello di gestionedell’applicazione (figura 2).3. Arrivati a questo punto Facebook avrà generato:App ID e App Secret, dopo aver finito di compilare icampi Contact Email e Category andiamo ad inserire i campi Canvas URL e Secure Canvas URL(*) con ilnostro dominio sulla quale risiede l’app.La nostra app dovrà risiedere o sulla document root o su una sottocartella del dominio.Ad esempio:https://www.gardaland.it/facebook/TabRaptorCountdown/
(*) Dal 1° Ottobre 2011 tutte le applicazioni su Facebook dovranno essere su domini con certificato HTTPS, mentre la fase di testing si può fare con il dominio senza certificato.
Configurare l’app
Intesys TalkPagina 23
La nostra app viene comunque caricata all’interno di Facebook, quindi ci sonoimposizioni da parte della piattaforma sulle dimensioni.
Dimensioni del Canvas
Canvas widthLa larghezza della nostra app può essere impostata su fissa a 760px o su fluida.Nel qual caso la larghezza fosse fluida l’iframe che contiene l’app avrà width al 100%.Se il nostro contenuto sfora la larghezza massima verrà mostrata la scrollbar sotto o tagliatoparte del contenuto.Canvas heightL’altezza del canvas può essere impostato su fluida(come sopra) o su Settable (default: 800px).Lo sviluppatore può cambiare l’altezza dell’iframe attraverso alcune funzioni messe a disposizione da Facebook quali:- FB.Canvas.setSize()- FB.Canvas.setAutoResizePer approfondire si veda l’ How-To: Build an app on Facebook with Fluid Canvas
Intesys TalkPagina 24
Quando un utente accede alla nostra app, Facebook ci invia informazioni sull’utente Attraverso una richiesta HTTP POST alla nostra canvas, contenente un parametro (signed_request) formato da un oggetto JSON encodato in base 64).Al primo accesso, l’oggetto signed_request contiene solamente:- user : array composto dai dati sulla localizzazione ed età dell’utente- algorithm : stringa che descrive il meccanismo usato per il sign-in della richiesta- issued_at : timestamp di quando è stato creato il parametro signed_requestPer ottenere i permessi sull’utente da parte dell’applicazione è bene utilizzare il popup dirichiesta permessi (OAuth Dialog) attraverso il redirect (top.location.href dato che siamo in un iframe) all’url:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE
che permetterà all’applicazione di avere accesso ai permessi di base sull’utente (nome,sesso, immagine profilo,ecc).Per ottenere altri permessi quali email, post dell’utente, ecc. è necessario modificare l’url aggiungendo alcuni parametri, nella forma:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream
Per tutte queste operazioni c i verrà in aiuto l’SDK uffic iale.
Autorizzazioni
Intesys TalkPagina 25
<?php $app_id = "YOUR_APP_ID";
$canvas_page = "YOUR_CANVAS_PAGE_URL";
$auth_url = https://www.facebook.com/dialog/oauth?client_id= . $app_id . "&redirect_uri=" . urlencode($canvas_page);
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
if (empty($data["user_id"])) {echo("<script> top.location.href='" . $auth_url . "'</script>");
} else {echo ("Welcome User: " . $data["user_id"]);
}?>Semplice esempio di come autenticare l’utente sulla nostra app.
Primo esempio
Intesys TalkPagina 26
Facebook mette a disposizione degli sviluppatori vari tipi di kit di sviluppo tutti open-source.Quelli che si utilizzano per lo sviluppo di applicazioni sono quelli Javascript e PHP.Per lo sviluppo di applicazioni mobile Facebook mette a disposiz ione altri 2 SDK, uno per iOS e uno per Android.
Javascript SDKLa versione Javascript mette a disposiz ione una serie di funzioni che effettuano le chiamate alle API server-side per l’accesso alle API Rest, alle Graph API e alle Dialogs. Inoltre aiuta nella generazionedel markup XFBML (linguaggio di markup proprietario) per i Social Plugins.
PHP SDKLe funzionalità che va a ricoprire sono pressochè identiche a quello Javascript (tranne le Dialogs).La differenza nei tempi di caricamento dell’applicazione però è notevole. E’ disponibile su GitHub.
iOS SDKMette a disposiz ione una starting-class scritta ovviamente in Objective-C.Le funzioni che supporta sono SSO, Graph API e le Dialogs.Vale sia per iPhone che per iPad e iPod Touch. Reperibile sempre su GitHub.
Android SDKSimile a quello per IOS anche a livello di funzioni offerte, anch’esso disponibile su GitHub
SDKs
Intesys TalkPagina 27
L’SDK javascript viene caricato asincronamente tramite una funzione javascript, per via della velocità di caricamento della pagina.
<div id="fb-root"></div><script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script>
La funzione window.fbAsyncInit inizializza l’SDK utilizzando le opzioni maggiormente usate.
Javascript SDK
Intesys TalkPagina 28
Il channel file serve per risolve alcuni problemi cross-browser di caricamento dell’SDK via Javascript. Deve puntare ad un URL che contenga solamente il tag:
<script src="//connect.facebook.net/en_US/all.js"></script>
e deve essere cachato :<?php$cache_expire = 60*60*24*365;header("Pragma: public");header("Cache-Control: max-age=".$cache_expire);header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');?><script src="//connect.facebook.net/en_US/all.js"></script>
E’ un parametro opzionale ma raccomandato dalla piattaforma stessa perché risolve 3 problemi già conosciuti.1. Pagine che contengono frame comunicanti non fanno funzionare correttamente i Social Plugins se non con il channel file.2. Se la pagina contiene file audio o video con autoplay, l’utente sentirà 2 stream audio perché la pagina viene ricaricata per permettere la comunicazione cross-domain.3. Evita che le statistiche “sballino”.
Altra nota riguardo al cambiamento del document.domain via javascript, in quanto anche il channel file deve avere lo stesso document.domain per poter funzionare.
Channel File
Intesys TalkPagina 29
Per ottenere i permessi ad accedere ai dati dell’utente dobbiamo utilizzare la funzioneFB.login (Callback function, options):
FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) { console.log('Logged out.'); }); }); } else { console.log('User cancelled login or did not fully authorize.'); } }, {scope: 'email'});
Questa funzione non solo autentica l’utente sulla nostra app, ma ci permette di chiedergli a quale delle sue informazioni vogliamo accedere, tramite l’opzione scope.
Questa funzione aprirà il classico popup di facebook contenente la lista dei permessi che vogliamo ottenere dall’utente.La procedura avviene tramite il protocollo OAuth, dal 13 Dicembre passato alla versione 2.0 .Altre funzioni possibili sono: FB.logout, FB.getLoginStatus (asincrona – ci dice lo stato attuale dell’utente) e FB.getAuthResponse (sincrona – ci restituisce il record creato al momento dell’autenticazione contenente la signed_request, l’access_token e l’ID dell’utente.
Autenticazione e Autorizzazione JS
Intesys TalkPagina 30
Accedere ai dati dell’utente è molto semplice, si utilizza la funzione FB.api(‘URL’, callback function).
FB.api('/me', function(response) {alert('Your name is ' + response.name);
});
Si può anche utilizzare FQL (Facebook Query Language) per eseguire query via REST.
FB.api( { method: 'fql.query', query: 'SELECT name FROM user WHERE uid=me()' }, function(response) { alert('Your name is ' + response[0].name); });
Chiamate alle API
Intesys TalkPagina 31
L’SDK PHP mette a disposizione una serie di funzionalità per accedere alle API server-side.E’ scaricabile da GitHub(https://github.com/facebook/php-sdk).
Spesso usato per operazioni di gestione del profilo (modifiche alle foto, video, ecc.) , elimina la necessità di gestire “manualmente” l’autorizzazione degli access_token.
Per prima cosa si dovrà inizializzare l’SDK per mezzo dei dati ottenuti durante la creazione dell’app.
PHP SDK
Intesys TalkPagina 32
Una volta scaricato il file zip contenente l’SDK da GitHub, si devono copiare i file della cartella src all’interno della cartella che ospiterà tutta l’app.Successivamente si istanzia l’oggetto Facebook con i 2 dati principali ricavati al momento della creazione (app_id e app_secret).
require_once("facebook.php");
$config = array();$config[‘appId’] = 'YOUR_APP_ID';$config[‘secret’] = 'YOUR_APP_SECRET';$config[‘fileUpload’] = false; // optional
$facebook = new Facebook($config);
L’opzione fileUpload autorizza o meno l’SDK ad effettuare l’upload di file sul proprio server.Ovviamente dovrà essere attiva questa configurazione anche sul server.
Installazione e inizializzazione
Intesys TalkPagina 33
Per effettuare le operazioni di autenticazione ed autorizzazione, l'SDK PHP mette a disposizione alcuni metodi statici:
Login$params = array( 'scope' => 'read_stream, friends_likes', 'redirect_uri' => 'https://www.myapp.com/post_login_page');$loginUrl = Facebook::getLoginUrl($params);
Logout$params = array( 'next' => 'https://www.myapp.com/after_logout' );$logoutUrl = Facebook::getLogoutUrl($params);
Retrieve User$uid = Facebook::getUser();
Autenticazione e autorizzazione
Intesys TalkPagina 34
Per effettuare una chiamata alle API ed avere accesso ai dati dell'utente ci viene in soccorso il metodo Statico: Facebook::api(/* Polymorphic*/)
Un breve esempio:<?php// […] Installazione e inizializzazione SDK$user_id = $facebook->getUser();if($user_id) { try { $user_profile = $facebook->api('/me','GET'); echo "Name: " . $user_profile['name']; } catch(FacebookApiException $e) { $login_url = $facebook->getLoginUrl(); echo 'Please <a href="' . $login_url . '">login.</a>'; error_log($e->getType());error_log($e->getMessage()); } } else { $login_url = $facebook->getLoginUrl(); echo 'Please <a href="' . $login_url . '">login.</a>';}?>
Chiamate alle API
Intesys TalkPagina 35
- Access Token Tool
- Test Users
- Platform Status
- Debugger
- Graph API Explorer
- Javascript Test Console
Tools
Intesys TalkPagina 36
E' un utile strumento per ottenere gli access_token dalle applicazioni che si sono create ed avere informazioni utili sulle proprie apps.
Access Token Tool
Intesys TalkPagina 37
Facebook mette a disposizione la possibilità di impostare alcuni utenti come tester dell'applicazione.Si possono usare utenti esistenti ed aggiungerli tramite il pannello di gestione dell'app, nella sezione Edit Roles oppure esiste la possibilità di crearne di nuovi solo per la fase di testing
attraversole Graph API.
https://graph.facebook.com/APP_ID/accounts/test-users? installed=true &name=FULL_NAME &permissions=read_stream &method=post &access_token=APP_ACCESS_TOKEN
(*) installed : imposta se l'utente di test ha già installato l'app oppure no
Test Users
Intesys TalkPagina 38
Facebook mette a disposizione una pagina pubblica in cui è possibile vedere lo stato aggiornato in tempo reale di tutta la piattaforma.
Platform Status
Intesys TalkPagina 39
Un altro utile strumento è il debugger, una pagina che presenta un campo di test in cui inserire le pagine contenente i metatag per opengraph, oppure il link per il Like Button o per i Social Plugins.
Debugger
Intesys TalkPagina 40
Lo strumento più utile di tutta la suite messa a disposizione da Facebook è il Graph API Explorer.Permette di fare tutti i test del caso con le API per andare a capire quale API andare ad utilizzare.
Graph API Explorer
Intesys TalkPagina 41
La Javascript Test Console è un tool che permette di andare a testare tutte le funzionalità dell'SDK Javascript. Sono presenti già molti esempi di codice da lanciare per vedere il funzionamento dell'SDK.
Javascript Test Console
Intesys TalkPagina 42
- FQL
- Dialogs
- Credits
- I18N
- Chat API
Funzionalità avanzate
Intesys TalkPagina 43
FQL è un linguaggio, molto simile a SQL, creato da Facebook per interrogare la vaste base dati inmaniera facile.Ad esempio la query: SELECT uid FROM user WHERE is_app_user = 1 AND uid IN (SELECT uid FROM friend WHERE uid1 = $app_user)ritorna tutti gli id degli utenti amici dell'utente che sta utilizzando l'app.Un altro esempio per recuperare nome,cognome e avatar dell'utente che sta usando l'app.function getQuery() { FB.api('/me', function(response){ var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where
uid={0}', response.id); query.wait(function(rows) { $('#fql-data').html('Il tuo nome:' + rows[0].name + "<br/>" +'<img src="' + rows[0].pic_square + '" alt=""/>' + "<br/>"); }); });}
La chiamata si divide in 2 fasi:1 - l'esecuzione della query2 - l'attesa dei risultati tramite query.wait() che poi popola un div html.FQL è molto utile perchè permette di utilizzare funzionalità avanzate che con le Graph API sarebbero impossibili, ad esempio inserire chiamate multiple in una singola chiamata.Per approfondire si rimanda alla documentazione ufficiale: http://developers.facebook.com/docs/reference/fql/
Facebook Query Language (FQL)
Intesys TalkPagina 44
I popup tipici di Facebook(dialogs) mantengono la grafica di facebook senza necessitare di permessi degli utenti per essere usati, in quanto i popup stessi necessitano dell'interazione dell'utenteal suo interno.
Possono essere usati in qualsiasi tipo di applicazione, su Facebook, su un sito o su un app mobile.
Si possono utilizzare tramite la costruzione di un URL o utilizzando uno degli helper dei vari SDK.
Ogni dialog è si compone di un metodo ed alcuni parametri.L'URL inizia con "http://www.facebook.com/dialog", seguito dal metodo e dai parametri.
Ad esempio il popup per inserire un post sulla propria bacheca. http://www.facebook.com/dialog/feed? app_id=123456789101112& redirect_uri=http://www.example.com/response/
Dialogs
Intesys TalkPagina 45
Facebook credits è un sistema di pagamento che permette agli sviluppatori di applicazioni Facebook di guadagnare in maniera semplice e veloce.
Utilizzare Facebook Credits è utile perchè:- gli utenti sono già fidelizzati con Facebook e si fidano ad effettuare pagamenti per mezzo della piattaforma- Facebook supporta più di 80 metodi di pagamento in 50 paesi ed è in continua espansione
I vari flussi di pagamento vengono effettuati attraverso un set di API messe a disposizione della piattaforma.Un esempio di come questo metodo di guadagno è stato vantaggioso è Farmville.Gioco in flash che conta circa 29 milioni di utenti attivi ed un sistema di pagamento effettuato tramiteFacebook Credits e Paypal.Poi quotata in borsa (la prima azienda ad essere quotata in borsa per la venditadi beni virtuali) è arrivata ad essere valutata circa 5 miliardi di dollari.
Ovviamente Facebook offrendo il bacino di utenti più grande del mondo vuole anche qualcosa in cambio, si parla di circa il 30% delle transazioni effettuate tramite la piattaforma.
Facebook Credits
Intesys TalkPagina 46
Facebook è disponibile in più di 70 lingue grazie ad un particolare framework che permette alla comunità stessa di tradurre le etichette. L'elenco di tutte le lingue disponibili si trova all'interno di un file XML(http://www.facebook.com/translations/FacebookLocales.xml).Le lingue sono codificate tramite i codici standard ISO e il codice del paese separate da un'underscore (it_IT, en_US).Per determinare la lingua da utilizzare più opportunamente, basta esaminare la signed_request di un utente
eandare ad interpretare il valore della variabile locale.
Le varie localizzazioni vengono fatte attraverso l’SDK Javascript, al momento dell’inclusione://connect.facebook.com/it_IT/all.js
Facebook mette a disposizione un app, per effettuare il translating della propria seguendo alcuni semplici passi descritti qui: https://developers.facebook.com/docs/internationalization/
Internazionalization
Intesys TalkPagina 47
Una cosa molto utile che ha fatto Facebook è stato di mettere a disposizione le API della chat per dare la possibilità di integrare un sistema di instant-messaging sul proprio sito/app.Le API si basano sugli standard XMPP (Extensible Messagging Presence Protocol).Sono molto semplici da implementare, e la documentazione è molto ricca(https://developers.facebook.com/docs/chat/), intanto un breve elenco di funzionalità e limitazioni.
Funzionalità messe a disposizione:- Autenticazione sulla piattaforma tramite SASL (Simple Authentication and Security Layer)- Autenticazione dell’utente tramite Username/Password con Digest-MD5- Messaggi inviati e ricevuti in plain-text- Invio delle notifiche di stato (sto scrivendo, online, offline) sullo standard XEP-0085 (sempre XMPP)- Ricezione di vCard sullo standard XEP-0054 (semper XMPP)- Ricezione delle foto dagli amiciLimitazioni imposte:- non si inviano/ricevono messaggi in HTML- La rimozione degli utenti dalla chat-room non avviene secondo gli standard XMPP- Non c’è nessun controllo sui messaggi inviati (parolacce, insulti, ecc.)- Altre funzionalità che non rispettono gli standard XMPP
Chat API
Intesys TalkPagina 48
Potete trovare altro materiale relativo allo sviluppo di applicazioni Facebook:
Online- Documentazione ufficiale (https://developers.facebook.com/docs/)- BigThink (http://www.bigthink.it/)
Cartaceo- IoProgrammo (ne parla in svariati numeri)- Creare applicazioni per Facebook (
http://www.hoepli.it/libro/creare-applicazioni-per-facebook/9788882339920.asp)
Prossimamente online sul mio blog:- www.good2know.it
Fonti