L'SDK JavaScript di Facebook dispone di un'API specifica per il login con questo social network. Vediamo più in dettaglio come implementare un semplice login utilizzando questa caratteristica di Facebook.
Per prima cosa occorre creare un'app nella sezione Developer di Facebook. L'app necessita di un URL di base per poter funzionare. Una volta creata l'app otteniamo da Facebook un ID della nostra app, ad esempio 124912923142553.
Quindi creiamo un file HTML chiamato channel.html con il seguente contenuto:
<script src="//connect.facebook.net/en_US/all.js"></script>
A questo punto, nella pagina dove vogliamo inserire un pulsante di login, inseriamo il seguente codice di base preso da Facebook subito dopo l'inizio dell'elemento body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '124912923142553', // ID della app
channelUrl: 'http://miosito.it/channel.html', // L'URL del file channel.html
status: true,
cookie: true,
xfbml: true
});
function doAPI() {
FB.api('/me', function(response) {
// Gestisce l'oggetto response con i dati dell'utente
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
// l'utente è autenticato
doAPI();
} else {
// non è autenticato
}
}, {
scope: 'email'
});
}
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connesso
} else if (response.status === 'not_authorized') {
// non autorizzato
} else {
// errore sconosciuto
}
});
};
(function(d) {
var js, id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
La funzione doAPI() gestisce l'oggetto response che contiene tra le sue proprietà i dati rilevanti dell'utente, come ad esempio l'e-mail, le sue note biografiche, il nome, il cognome e così via.
Ad esempio per conoscere la sua e-mail possiamo scrivere:
function doAPI() {
FB.api('/me', function(response) {
// Gestisce l'oggetto response con i dati dell'utente
var userEmail = response.email;
console.log(userEmail);
});
}
Il nostro codice può essere eseguito all'interno del wrapper FB.login() perché solo in quel contesto l'oggetto di risposta è disponibile. Per impostazione predefinita Facebook non mostra tutti i dati dell'utente, ma possiamo modificare questo comportamento utilizzando l'opzione scope.
In questo caso abbiamo aggiunto l'e-mail dell'utente alle informazioni disponibili dopo la richiesta. Non ci resta che collegare l'azione di login delle API al nostro pulsante. Possiamo usare jQuery per questo:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connesso
} else if (response.status === 'not_authorized') {
// non autorizzato
} else {
// errore sconosciuto
}
});
$(function() {
$('#fb-login').on('click', login);
});
Nel codice di esempio di Facebook le nostre azioni vivono nello scope della funzione globale fbAsyncInit(), ma come si può notare è possibile usare jQuery senza problemi in quanto non vi è un conflitto tra namespace.