Nei vari app stores possiamo trovare un numero sempre più grande di applicazioni che integrano il login di Facebook al proprio interno per dare la possibilità all’utente di effettuare l’accesso molto più comodamente e velocemente, evitando di costringerlo ad iscriversi ad un nuovo servizio, con tutti i rischi che tale operazione comporta (come per esempio perdere una grande fetta di utenti).

Per aggiungere questa funzionalità nei miei progetti da pubblicare come applicazioni ibride (mobile app in HTML5 “inglobate” all’interno di app native), ho sempre utilizzato il plugin Phonegap “Phonegap Facebook Plugin“, che utilizza una combinazione dei “moduli” nativo e javascript messi a disposizione dall’SDK di Facebook.

Grazie al Facebook Plugin di Phonegap è quindi possibile “manovrare” il login nativo mediante delle semplici API javascript.

 

In fondo è proprio questo lo scopo dei plugin per Phonegap, ed anche un dei vantaggi di sviluppare mobile app in HTML5: quello di riuscire ad accedere alle funzionalità native del dispositivo direttamente da codice Javascript.

Tuttavia questa strada porta alcuni svantaggi, come quello di dover comunque dipendere da un plugin di terze parti, oppure quello di non poter essere utilizzato nel caso in cui non volessimo distribuire la nostra applicazione HTML5-CSS3-Javascript sotto forma di app ibrida (compilandola quindi con strumenti come Xcode o Eclipse), ma volessimo renderla accessibile in remoto, collegandosi semplicemente ad una pagina web (come per esempio hanno fatto Financial Times e Forecast.io con le loro HTML5 mobile app, vedi immagine seguente).

 

Le applicazioni HTML5 ottimizzate per mobile di Financial Times e Forecast.io

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: una strada alternativa

In questo articolo ti voglio mostrare una risorsa molto interessante, che ho trovato utilissima  per poter implementare un Facebook mobile login su di un’HTML5 mobile app senza necessariamente utilizzare dei tools nativi, come il plugin per Phonegap sopra citato.

Si tratta di una micro-libreria Javascript realizzata da Christophe Coenraets, brillante sviluppatore professionista che lavora per Salesforce.com (ti consiglio vivamente di seguirlo, se sei interessato a come creare un app in HTML5, CSS3 e Javascript), il cui lavoro è principalmente focalizzato sullo sviluppo di applicazioni mobile web-based ( quindi single-page-application).

La libreria si chiama OpenFB e risulta molto utile per poter implementare il Facebook mobile login sulla propria applicazione, senza affidarsi necessariamente a dei componenti nativi.

Coenraets, che avendo la necessità di implementare questa funzionalità in uno dei suoi lavori ha pensato di adattarla in una soluzione standard in modo tale che tutti potessero usufruirne, ha dato la possibilità a chiunque di inserire facilmente il login di Facebook nel proprio progetto.

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: come si usa la libreria OpenFB

Utilizzare la libreria si presenta piuttosto semplice, vediamo come funziona:

Semplice Login:

openFB.login(scope, successHandler, errorHandler);

Riprendere la lista degli amici dell’utente:

openFB.api({path: '/me/friends', success: successHandler, error: errorHandler});

Pubblicare un post nella bacheca dell’utente:

openFB.api(
{
     method: 'POST',
     path: '/me/feed',
     params: {
          message: 'Messaggio di prova per le API di Facebook'
     },
     success: successHandler,
     error: errorHandler
});

Facebook mobile login: primi passi

Per integrare la risorsa nei tuoi progetti hai solamente bisogno di:

1. Creare un’applicazione Facebook da associare al tuo progetto recandoti a questo link
2. Copiare l’ID dell’applicazione Facebook appena creata ed usarlo come primo parametro della funzione di inizializzazione della libreria OpenFB posta nella pagina principale della tua Single Page Application (index.html): openFB.init().
3. Eseguire la pagina index.html da un indirizzo che corrisponda a quello inserito al momento della creazione dell’applicazione Facebook, in corrispondenza del parametro “Valid OAuth redirect URIs” situato nella scheda “Settings”.

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: conclusioni

Come vedi il funzionamento è piuttosto semplice, e chiunque può facilmente integrarlo nella propria applicazione, app che non deve essere necessariamente distribuita sotto forma di app ibrida/nativa ma che può essere benissimo pubblicata online.

Infatti l’autore della libreria mette a disposizione anche la demo di un’applicazione-base che puoi consultare per capire meglio come integrare OpenFB nella tua Single Mobile Application; la demo che funziona anche se visualizzata con un normale browser, sia mobile che desktop.

In particolare, la libreria è stata pensata per fare in modo che il Facebook mobile login funzioni sia nel caso in cui il progetto preveda l’utilizzo di Phonegap (quindi nel caso di un’applicazione ibrida), sia nel caso di applicazioni “browser-based“: se eseguita con Cordova essa sfrutta una web view nativa, mentre se eseguita su browser, il login sarà mostrato attraverso una finestra di popup.

Io l’ho già implementata in una mia applicazione, e la trovo molto utile.

Ma mi piacerebbe sapere il tuo parere: cosa ne pensi?

Fammelo sapere nei commenti!

PS. Quasi dimenticavo: ecco il link all’ottimo ed utilissimo articolo originale di Coenraets, ai sorgenti e alla demo: