Facebook e Twitter API: integrare i social network nelle applicazioni 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 è 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 - 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 - 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 - Pulsante di login di Facebook
Attenzione: Questo articolo contiene un allegato.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Usare le collection expression per inizializzare una lista di oggetti in C#
Applicare un filtro per recuperare alcune issue di GitHub
Generare velocemente pagine CRUD in Blazor con QuickGrid
Triggerare una pipeline su un altro repository di Azure DevOps
Usare un KeyedService di default in ASP.NET Core 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Implementare l'infinite scroll con QuickGrid in Blazor Server
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
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
- Recuperare App Service cancellati su Azure
- Utilizzare la classe Lock per acquisire un lock
- Escludere alcuni file da GitHub Secret Scanning
- Creare una libreria CSS universale - Rotazione degli elementi
- Aggiornare a .NET 9 su Azure App Service
- Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub