Facebook e Twitter API: integrare i social network nelle applicazioni ASP.NET

di Matteo Casati, Marco Consolini, in ASP.NET,

L'integrazione delle applicazioni con i social network diventa sempre più un'esigenza del mercato poiché permette di diffondere su larga scala i propri contenuti (ad esempio per intraprendere azioni di "viral marketing"), sfruttando l'interconnettività e la relazione tra gli utenti. Tra le diverse piattaforme disponibili hanno riscosso un particolare successo Facebook e Twitter: il primo è oggi praticamente sinonimo di social network, mentre il secondo, caratterizzato da immediatezza e semplicità, rappresenta un fenomeno già molto diffuso a livello mondiale e in crescita anche in Italia.

Nel corso dell'articolo avremo modo di vedere come accedere da ASP.NET alle API esposte da Facebook e Twitter, anche attraverso una serie di esempi concreti mirati a mostrare come integrare l'autenticazione dei due social network nelle nostre applicazioni: accedere alle informazioni di un utente, creare e condividere nuovi contenuti in modo automatico.

Facebook

Facebook è sicuramente il social network più conosciuto ed utilizzato in Internet e non ha certo bisogno di presentazioni. Il suo bacino di utenza è impressionante (si parla di oltre 600 milioni di iscritti) e, per questo, sempre più attività legate al mondo della comunicazione sul web sfruttano la piattaforma per cercare di raggiungere il maggior numero di persone possibile. Per farsi un'idea, è sufficiente pensare alle sempre più numerose "Fan Page" di aziende e marchi ed alle applicazioni di grande successo come Farmville.

Al di là dell'uso di Facebook come normali utenti, possiamo integrare il social network anche in applicazioni esterne attraverso le Facebook Graph API (vedi il sito dedicato), un insieme di funzionalità esposte pubblicamente via HTTP, che permettono di interrogare la piattaforma per interagire direttamente con gli utenti e i loro contenuti.

Di seguito andiamo a vedere nel dettaglio come è possibile integrare in una delle nostre applicazioni le API di Facebook, descrivendo alcuni dei casi d'uso più interessanti.

Creare un'applicazione in Facebook

Prima di poter interagire con Facebook attraverso l'uso delle API, dobbiamo creare un'applicazione in Facebook. Ecco come fare.

Passo 1

Registrazione come sviluppatore di Facebook: effettuare l'accesso a Facebook con il proprio account, quindi autorizzare l'applicazione "Developer" ("Sviluppatore" nella versione italiana).

Passo 2

Creazione dell'applicazione: possiamo creare un'applicazione personale premendo "Crea una nuova applicazione", come mostrato nella figura 1.

Figura 1
Figura 1 - Creazione dell'applicazione in Facebook

Attenzione: se l'account utilizzato non risultasse "verificato", potrebbe essere richiesto di indicare il proprio numero di telefono o il numero di una carta di credito.

Passo 3

Configurazione dell'applicazione: il primo passaggio per la creazione dell'applicazione richiede di inserire il nome dell'applicazione e di acconsentire all'accettazione dei termini di Facebook, dopo di che possiamo accedere al pannello di configurazione. I parametri più importanti da definire sono la "Url del sito" e il "Dominio del sito", presenti nella sezione "Sito Web" (vedi figura 2).

Figura 2
Figura 2 - Configurazione dell'applicazione in Facebook

In questo tab vengono visualizzati anche l'ID e il Codice Segreto dell'applicazione che dovranno essere usati per l'accesso alle Facebook API.

Autenticazione e richiesta delle autorizzazioni in Facebook

L'autenticazione di Facebook si basa sul protocollo OAuth 2.0 (vedi la draft in formato PDF) che permette di gestire la verifica delle credenziali mediante l'utilizzo di un token di accesso. Semplificando, possiamo descrivere il processo di autenticazione come segue:

  • l'applicazione richiama un indirizzo HTTP esposto dal provider di autenticazione, indicando le proprie credenziali e l'URL a cui dovrà essere inviato il codice di autenticazione dell'utente;
  • il provider si occupa di effettuare tutte le operazioni necessarie per verificare l'identità dell'utente e richiedere il consenso per l'accesso, eventualmente accordando autorizzazioni specifiche;
  • il provider invia il codice di autorizzazione dell'utente all'applicazione;
  • l'applicazione richiede al provider la conferma di autenticità del codice di autorizzazione ricevuto inviando nuovamente le proprie credenziali, il codice stesso e l'URL di callback;
  • il provider, verificati i parametri in ingresso, risponde all'indirizzo specificato fornendo l'access_token necessario per poter effettuare programmaticamente operazioni per conto dell'utente corrente.

Facebook implementa questo processo in due modalità differenti che permettono l'integrazione sia lato server che lato client. La differenza tra le due tipologie di integrazione consiste, in ultima analisi, nel modo con cui viene restituito l'access_token: attraverso l'uso di un parametro in querystring (?access_token=...) oppure, in alternativa, utilizzando URI fragment (#access_token=...). Per maggiori dettagli sulla modalità di autenticazione utilizzata da Facebook, rimandiamo alla documentazione online presente in Facebook.

Oltre all'autenticazione, il processo descritto in precedenza è in grado di gestire le autorizzazioni (Authentication Permission) da richiedere, così da definire il livello e le modalità di interazione tra l'applicazione e l'utente: accesso ai dati del profilo, accesso a dati sensibili specifici (come l'indirizzo e-mail), la possibilità di utilizzare le credenziali dell'utente anche in modalità offline, ecc.

Tuttavia è bene sottolineare il fatto che le autorizzazioni vanno scelte con accortezza e che vanno indicate esclusivamente le autorizzazioni effettivamente necessarie all'applicazione poiché, statisticamente, il numero di utenti che autorizzano l'accesso ad una applicazione è inversamente proporzionale al numero di autorizzazioni richieste.

Integrare l'autenticazione di Facebook

Il primo passo dello sviluppo di un'applicazione integrata con Facebook consiste nell'autenticare l'utente e ottenere il relativo access_token. Vediamo come effettuare questa operazione utilizzando la libreria JavaScript SDK fornita e consigliata da Facebook.

Per utilizzare la libreria è sufficiente inserire il riferimento al file JavaScript nella sezione HEAD della pagina e un elemento di tipo DIV con l'attributo id="fb-root" nella sezione BODY:

<html>
<head>
  <script src="http://connect.facebook.net/it_IT/all.js"></script>
</head>
<body>
  <div id="fb-root"></div>
</body>

L'elemento DIV "fb-root" viene utilizzato dalla libreria come segnaposto per iniettare gli elementi che gestiscono l'iterazione con l'utente.

Una volta creata la pagina, dobbiamo inizializzare la libreria con i dati della nostra applicazione e con la configurazione che più si adatta alle nostre esigenze:

FB.init({
  appId  : '[FACEBOOK_APP_ID]',
  status : true, // controlla lo stato di login
  cookie : true, // abilita i cookie per consentire al server di accedere alla sessione
  xfbml  : true  // abilita i tag FBML
});

Impostando il parametro xfbml al valore true, possiamo inserire nel markup i tag FBML (Facebook Markup Language), una serie di controlli pronti all'uso e perfettamente integrati con lo stile grafico di Facebook. Utilizzando FBML possiamo, per esempio, aggiungere il pulsante di login a Facebook in modo molto semplice:

<fb:login-button perms="email,user_checkins">Login with Facebook</fb:login-button>

e otteniamo come output quanto mostrato nella figura 3.

Figura 3
Figura 3 - Pulsante di login di Facebook

4 pagine in totale: 1 2 3 4

Attenzione: Questo articolo contiene un allegato.

Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

I più letti di oggi

In evidenza

Misc