|
- 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.
IL CODICE LATO-CLIENT 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.
IL CODICE LATO-SERVER 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.
|
|||
| << INDIETRO | by VeNoM00 | ||