- Il pulsante "Accedi con Facebook" in ASP .Net -
 
COSA SERVE PER QUESTO TUTORIAL
Download | Chiedi sul FORUM | Glossario cognizioni basiche di VB .Net
Come implementare il pulsante di login tramite Facebook

COME FUNZIONA
Il login del web 2.0.

Nessuno più ha oramai voglia di effettuare quotidianamente registrazioni a siti web, forum e altro, anzi spesso se l'iscrizione è necessaria si forniscono dati falsi per non perdere tempo. Per questo oggi ci occuperemo di come possiamo facilitare l'interazione degli utenti con il sito tramite il login di Facebook. Sostanzialmente Facebook permette di utilizzare le informazioni di registrazione in suo possesso, se l'utente acconsente, indirizzo e-mail incluso da parte di un sito: non si deve far altro che inserire uno script nella propria pagina che mostrerà il classico pulsante blu di Facebook per il login, e una volta che l'utente avrà confermato la sua volontà di iscriversi, viene impostato un cookie contenente un token (codice) di accesso tramite il quale è possibile interrogare le Graph API e quindi ottenere tutte le informazioni che ci interessano.
Premettiamo che per poter realizzare ciò si deve prima di tutto creare un'applicazione Facebook, alla quale verrà associato un ID univoco che utilizzeremo nel codice per farci identificare da Facebook.

IL CODICE LATO-CLIENT
Il pulsante di login tramite uno script di Facebook.

La cosa più semplice e intuitiva per far accedere un utente tramite Facebook è usare il pulsante che il social network stesso offre tramite il suo XFBML, ovvero un'insieme di tag da inserire nel proprio codice HTML che acquistano valore grazie ad uno script apposito di Facebook:

		
<head>
    <title>Login with Facebook</title>
    <script src="http://connect.facebook.net/it_IT/all.js"></script>
</head>

Il tag da utilizzare è il seguente:


<fb:login-button perms="email"></fb:login-button>
<div id="fb-root"></div>
<script type="text/javascript" language="javascript">
    // Inizializziamo le API di Facebook lato client attivando XFBML
    // che trasformerà il tag <fb:login-button> in un vero e proprio
    // bottone
    FB.init({appId: '<% =strAppId %>', status: true, cookie: true, xfbml: true});
    
    // Questo evento viene richiamato quando l'utente ha accettato
    // di connettersi con Facebook o appena si carica la pagina
    // se l'utente ha già accettato in precedenza e quindi
    // Facebook ha creato il cookie direttamente
    FB.Event.subscribe('auth.sessionChange', function(response) {
        if (response.session) {
            window.location.reload(true);
        }
    });
</script>

In sostanza quando viene eseguito FB.init l'elemento fb:login-button (che non fa parte in alcun modo dello standard HTML e che il browser inizialmente ignora) viene trasformato nel pulsante blu di accesso. Quando l'utente cliccherà su di esso si aprirà un popup che gli chiederà di confermare di voler accedere con Facebook e se intende fornire il proprio indirizzo e-mail al sito (dato che è stato specificato per l'attributo params il valore email). Una volta che l'utente ha confermato il tutto, viene seguito il codice dell'evento auth.sessionChange in cui semplicemente verifichiamo di essere connessi e ricarichiamo la pagina. Lo script di Facebook imposterà (per il dominio corrente) un cookie chiamato fbs_id-applicazione contenente alcune informazioni tra le quali il token (codice) d'accesso alle API Graph. Ricaricando la pagina possiamo accorgerci della creazione del cookie sul versante server ed agire di conseguenza.
Nota: strAppId è l'ID della vostra applicazione Facebook che in realtà abbiamo deciso di memorizzare lato server (come vedremo tra poco).

IL CODICE LATO-SERVER
Come interrogare le API Graph di Facebook.

Vediamo infine come è fatto il codice lato-server:


'ID dell'applicazione
Dim strAppId As String = "id-applicazione"

'Controlliamo se c'è il cookie di Facebook e se abbiamo un token d'accesso
If Request.Cookies("fbs_" & strAppId) IsNot Nothing AndAlso _
    Request.Cookies("fbs_" & strAppId).Value.Contains("access_token") Then

    'Rimuoviamo le virgolette iniziali e finali dal cookie
    'ed estrapoliamo il token che ci permetterà di usare le 
    'API di Facebook (access_token)
    Dim strAccessToken As String = _
        HttpUtility.ParseQueryString(Request.Cookies("fbs_" & strAppId).Value.Trim(""""c)).Item("access_token")

    'Creiamo un WebClient per eseguire le richieste verso
    'i servizi Graph di Facebook
    Dim wbcGraph As New System.Net.WebClient()
    
    'Effettuiamo la richiesta e mettiamo il responso (che 
    'è in formato JSON) in una stringa
    Dim strJsonResponse As String = wbcGraph.DownloadString( _
        "https://graph.facebook.com/me?access_token=" & System.Uri.EscapeDataString(strAccessToken))
        
    'Creiamo il parser JSON
    Dim jspParser As New JsonParser(New StringReader(strJsonResponse), True)

    'Leggiamo il contenuto del responso JSON e lo trasformiamo
    'in una sorta di dizionario
    Dim jsoUserInfo As JsonObject = jspParser.ParseObject()
    
    %>Bentornato <% =DirectCast(jsoUserInfo("name"),JsonString).Value %> 
    (<% =DirectCast(jsoUserInfo("id"),JsonString).Value %>)<br>
    
    <% 
    'L'indirizzo e-mail potrebbe non essere dispobile se l'utente
    'non ha dato il permesso
    If jsoUserInfo.ContainsKey("email") 
    %>
        <% =DirectCast(jsoUserInfo("email"),JsonString).Value %>
    <% End If %><br>
    <a href="javascript:void()"
        onclick="document.cookie='fbs_<% =strAppId %>=;expires=' + (new Date()).toGMTString() + ';path=/')">
        Cancella cookie
    </a>

<% Else %>

<!-- ... -->

Per prima cosa dichiariamo la variabile strAppId, che già ci è servita ma ancora ci servirà. Quindi controlliamo se esiste un cookie chiamato fbs_id-applicazione e se contiene la parola access_token, così da essere sicuri di essere realmente in grado di utilizzare le API di Facebook. Il cookie contiene una serie di coppie chiave-valore disposte come nelle query degli URL (la parte dopo il punto interrogativo) e quindi, grazie alla funzione HttpUtility.ParseQueryString possiamo estrapolare il valore di access_token e memorizzarlo.
A questo punto, tramite un WebClient, facciamo una richiesta HTTP all'URL https://graph.facebook.com/me, ovvero il web-service di Facebook. "/me" indica che vogliamo reperire informazioni sull'utente che ha fatto la richiesta, quali nome, ID su Facebook e se possibile indirizzo e-mail; sarebbe anche possibile fare una richiesta del tipo "/id-utente-facebook" e molto altro ancora, ma per ulteriori informazioni sulle altre richieste possibili rimandiamo alla documentazione ufficiale delle API Graph. Al servizio di Facebook passiamo come parametro access_token il token che abbiamo ricavato dai cookie, così che Facebook ci dia accesso ai dati dell'utente che si è registrato, dei suoi amici e così via.
Il responso di questa richiesta è del codice JSON che, in .Net 2.0, non è supportato nativamente, dunque per poterlo interpretare comodamente dobbiamo servirci di una semplice libreria esterna, allegata al progetto e da posizionare nella cartella /bin del sito. Creiamo quindi un JsonParser che ci permette di trasformare il codice JSON in un dizionario di valori su cui potremo poi lavorare senza difficoltà. Ad esempio tramite jsoUserInfo("id") possiamo ottenere l'ID dell'utente, tramite jsoUserInfo("name") il nome, e così via. Per una lista completa dei dati disponibili riferirsi anche in questo caso alla documentazione, oppure provare a stampare la stringa strJsonResponse, dato che comunque JSON è interpretabile anche ad occhio.
Infine inseriamo un controllo per vedere se è disponibile l'indirizzo e-mail poiché l'utente potrebbe aver rifiutato il consenso e mettiamo un link che cancella il cookie per facilitare i test del codice.

 

<< INDIETRO by VeNoM00