Sdk javascript di facebook, come integrarli in un sito web (parte 2)

Nell’ultimo articolo abbiamo visto come integrare gli SDK javascript di Facebook in un nostro sito una pagina o un profilo. Oggi vedremo come intercettare lo stato dell’utente ed effettuare il login.

<script type="text/javascript">
window.fbAsyncInit = function() {
     // init the FB JS SDK
     FB.init({
       appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
       channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
       status     : true,                                 // Check Facebook Login status
       xfbml      : true                                  // Look for social plugins on the page
     });
     // Additional initialization code such as adding Event Listeners goes here
   };
   // Load the SDK asynchronously
   (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Questo era l’ultimo esempio di codice scritto. Andiamo ad aggiungere le funzionalità a noi necessarie. Inseriamo delle variabili in cui archivieremo le nostre informazioni globali:

<script type="text/javascript">
    var pageId = 'YOUR_PAGE_ID';
    var appId = 'YOUR_APP_ID';
    var channelUrl= '//WWW.YOUR_DOMAIN.COM/channel.html';
    var facebook;
    var at;
    var uid;

    function initFacebook() {
        window.fbAsyncInit = function () {
            FB.init({
                appId: appId, // App ID
                channelURL: channelUrl, // Channel File
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                oauth: true, // enable OAuth 2.0
                xfbml: true  // parse XFBML
            });
...

In particolare, oltre alle variabili che vanno a sostituire quelle che prima erano stringhe costanti, pageId, appId e channelUrl, andiamo a dichiarare tre variabili che utilizzeremo per archiviare, per tutto il ciclo di vita della nostra pagina:

  • facebook, dove archivieremo il nostro oggetto Facebook SDK;
  • at, dove archivieremo l’access token restituito dal login;
  • uid, dove archivieremo lo user id di facebbok.

Queste variabili verranno utilizzate in altre funzioni che ora andremo ad inserire.

    function checkLoginStatus() {
        facebook.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                // utente connesso
                if (response.authResponse) {
                    //archivio i valori dell'utente
                    at=  response.authResponse.accessToken;
                    uid = response.authResponse.userID;
                }
            } else {
                //utente non connesso
            }
            //imposto il testo della pagina home
        }, true);
    }

Questa funzione incapsula getLoginStatus() degli sdk, serve, come dice il nome, a verificare lo stato dell’utente.
La risposta della funzione è un oggetto di questo tipo:

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

I possibili valori della proprietà “status” sono:

  • connected
  • not_authorized
  • unknown

Analizzando la risposta ricevuta dalla funzione getLoginStatus() potremo decidere che azioni intraprendere all’interno del nostro sito. In particolare possiamo utilizzare la funzione di login per l’autenticazione del visitatore della nostra pagina:

    function login() {
        facebook.login(function (response) {
            if (response.authResponse) {
                //facciamo eseguire di nuovo l'operazione di check dopo che l'utente ha effettuato il login per poter controllare le autorizzazioni ed archiviare l'access_token.
                checkLoginStatus();
            } else {
                //visualizza solo la parte pubblica del sito
            }
        }, {
            scope: 'LOGIN_SCOPE'
        });
    };

Ora abbiamo tutti gli elementi per verificare un utente sulla nostra pagina web tramite il login di Facebook. Non ci resta altro che integrare tutto assieme:

<html>
<head>
<title>Pagina di prova</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><script type="text/javascript">
var pageId = 'YOUR_PAGE_ID';
var appId = 'YOUR_APP_ID';
var channelUrl= '//WWW.YOUR_DOMAIN.COM/channel.html';
var facebook;
var at;
var uid;

function initFacebook() {
         window.fbAsyncInit = function () {
             FB.init({
                 appId: appId, // App ID
                 channelURL: channelUrl, // Channel File
                 status: true, // check login status
                 cookie: true, // enable cookies to allow the server to access the session
                 oauth: true, // enable OAuth 2.0
                 xfbml: true  // parse XFBML
             });
             facebook = FB;
             checkLoginStatus();
             // Additional initialization code here
         };
         // Load the SDK Asynchronously
         (function (d) {
             var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/it_IT/all.js";
             d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
     }
     function checkLoginStatus() {
         facebook.getLoginStatus(function (response) {
             if (response.status === 'connected') {
                 // utente connesso
                 if (response.authResponse) {
                     //archivio i valori dell'utente
                     at=  response.authResponse.accessToken;
                     uid = response.authResponse.userID;
                 }
             } else {
                 login();
             }
             //imposto il testo della pagina home
         }, true);
     }

     function login() {
         facebook.login(function (response) {
             if (response.authResponse) {
                 //eseguiamo il check del login di nuovo per archiviare l'access_token e verificare le autorizzazioni dell'utente
                 checkLoginStatus();
             } else {
                 //fai qualcos'altro es: visualizza solo la parte pubblica del sito
             }
         }, {
             scope: 'manage_pages'
         });
     };

     $(function () {
         initFacebook();
     });
</script>
<div id="fb-root"></div>

Riepilogando, il ciclo di caricamento della pagina è il seguente:

  1. render html;
  2. inizializzazione degli sdk di Facebook;
  3. verifica dello stato dell’utente;
  4. se l’utente non è connesso reirect sul login;
  5. aggiunta delle funzionalità avanzate in base alla verifica dell’utente.

In questo articolo si è scelto di utilizzare delle semplici variabili globali per archiviare i dati dell’utente, ma si sarebbero potute archiviare in molti altri modi, utilizzando coockies, local storage, database su server, ecc. Nel prossimo articolo vedremo cosa fare con le informazioni dell’utente ottenute.

Sdk javascript di facebook, come integrarli in un sito web (parte 1)

Questo è il primo di una serie di articoli in cui vedremo come sfruttare gli sdk javascript di facebook per integrare profili e pagine all’interno della nostra applicazione web. Dalla documentazione si può ottenere facilmente il codice javascript per inizializzare gli sdk. In questo articolo vedremo come integrare al meglio questa tecnologia nel nostro sito ed automatizzare il riconoscimento dell’amministratore di una pagina senza scrivere codice lato server. Creeremo un profilo facebook che utilizzeremo come back-end della nostra applicazione. Per prima cosa dobbiamo iscriverci come sviluppatori su facebook, partiamo dalla pagina dedicata https://developers.facebook.com/.

facebook-dev-page-apps

Nella sezione Apps Aggiungiamo una nuova applicazione ed impostiamo i vari parametri: titolo, descrizione, indirizzo web, tipo di applicazione, account di amministrazione ecc.. Saltiamo la descrizione su come impostare la l’applicazione, la cosa che ci interessa è ottenere lo “App ID/API Key” necessario per l’inizializzazione delle API. Il codice che si trova nella documentazione ufficiale rappresenta un esempio basilare per l’inizializzazione delle API:

<code><div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script></code>

Analizziamo ora il nostro codice: nella funzione initFacebook si fanno due cose, si passano a facebook le nostre impostazioni e configurazioni e si caricano in maniera asincrona gli SDK in italiano del famoso sito.

I parametri che passiamo alla funzione FB.init sono:

  • appId, l’id dell’applicazione creata con il nostro account nella sezione apps di https://developers.facebook.com/;
  • channelURL, l’url di una pagina creata ad hoc per migliorare le prestazioni dei nostri script;
  • status, chiediamo a facebook di verificare lo stato di login;
  • cookie, abilitiamo facebook ad utilizzare i cookie con questa pagina;
  • oauth, abilitiamo il protocollo di autentificazione OAuth 2.0;
  • xfbml, xml facebook markup language, chiediamo a facebook di fare il parse di questo standard.

Fatto ciò abbiamo caricato ed inizializzato le API javascript di facebook. Il codice suggerito nella documentazione va inserito all’interno del tag body, cerchiamo di renderlo più elegante, spostiamo tutta la dichiarazione nel tag head della pagina ed utilizziamo jQuery:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initFacebook() {
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR_APP_ID', // App ID
channelURL: '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true, // enable OAuth 2.0
xfbml: true  // parse XFBML
});

// Additional initialization code here
};

// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/it_IT/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
}

$(function () {
initFacebook();
});


</script>
</head>
<body>
	<div id="fb-root"></div>
  ...
</body>
</html>

Senza cambiare in maniera radicale il nostro codice, lo abbiamo racchiuso nel tag head della pagina, dove, in seguito, potremo unirlo ad altro codice javascript in un unico blocco, facilmente incapsulabile in un file esterno.

Nella seconda parte dell’articolo vederemo come effettuare il login in automatico, ed utilizzare facebook per automatizzare alcune operazioni all’interno del nostro sito.

See you soon folk

Primo post del programmatore

Nuovo blog per il programmatore

Nasce oggi questo mio blog, dove raccogliere le mie esperienze di programmatore e condividerle. Questo quindi è il “Primo post del programmatore” In questo sito mi occuperò soprattutto di web e mobile, trattando linguaggi come html, php, css, csharp, javascript. Se avete domande, idee, progetti che volete condividere potete contattarmi o iscrivervi a questo blog, potremo portarli avanti assieme o semplicemente condividerli.