Attraverso le Graph API di Facebook e la creazione del Open Graph Protocol è molto più semplice di prima scrivere e leggere dati da Facebook, questo ci può permettere di:
- creare un sistema di gestione utenti per la nostra applicazione evitando la procedura di registrazione e passando direttamente alla fase di login utilizzando le API di Facebook e personalizzare la navigazione utente in funzioni dei dati recuperati dal proprio profilo
- aggiungere Like button su tutti gli oggetti della nostra applicazione
- creare pagine Facebook-like dando la possibilità all'utente di scrivere sul wall dei propri amici, creare eventi, caricare foto e video, etc. in modo da promuovere la nostra attività in modo sociale
In questo articolo vi mostrerò come creare una applicazione per Facebook in ruby on rails che gestisce l'autenticazione utente.
Vedremo come metterla online gratuitamente utilizzando Heroku abilitando il support SSL che diventarà obbligatorio dal primo di Ottobre.Prima di iniziare è d'obbligo un distinguo.
Esisteno due tipologie di applicazioni Facebook:
- Canvas: app che prendono vita all'interno di Facebook e che vanno aggiunte al proprio profilo
- Web: app esterne che utilizzano le APIs di Facebook per interagire con esso.
Da ora in poi ci concentreremo sulle applicazioni Canvas che sono composte da un contenitore definito in Facebook e un'applicazione esterna che si occupa della logica, delle viste e definisce uno specifico comportamento. Essa viene connessa al contenitore creato in Facebook.In sostanza andremo a:
- creare un'applciazione in ruby on rails sul nostro localhost utlizzando le APIs di Facebook
- configurare una nuova applicazione Canvas su Facebook
- associare la nostra applicazione locale al Canvas definito su Facebook in modo da testarne le funzionalità
- deploiare la nostra applicazione su Heroku in modo da rendere accessibile la nostra applicazione a tutti gli utenti
Per chi non conoscesse Heroku possiamo definirlo come un cloud application platform che permette il deploy di app in modo veloce grazie all'utilizzo della gemma Heroku, per tutti i dettagli del caso e per come configurarlo potete dare un'occhiata a questo link: http://devcenter.heroku.com/articles/git, inutile dire che questa attività è strettamente legata all'uso di GIT.
Applicazione Ruby on Rails
Creiamo una nuova applicazionerails new YOUR_APP_NAMEOra editiamo il Gemfile aggiungendo la gemma koala https://github.com/arsduo/koala
Gemfile gem 'rails', '3.0.7' gem 'sqlite3' gem 'koala'
Koala è una nuova libreria in Ruby per Facebook che supporta le Graph API includendo il supporto per l'upload di foto, le REST API, l'autenticazione utente attraverso OAuth ed una miriade di altre funzioni, vi rimando al WIKI presente su Github per tutti i dettagli. Ho dato fiducia a questa gemma confortato dal numero di watchers e fork fatte su Github ed infatti vedrete che è vermante semplice l'integrazione con Facebook utilizzando questo wrapper.Ora generiamo un controller che si occuperà di visualizzare la pagine per il login, gestire il logout, visualizzare i dati utente ed esporre una callback usata per verificare l'avvenuta utenticazione, questo è la tipica procedura di login per tutte le applicazioni che supportano OAuth.
rails g controller facebooks index canvas
facebooks_controller.rb
def canvas
@oauth = Koala::Facebook::OAuth.new(APP_ID, APP_SECRET, root_url.chop+facebooks_callback_path+"/")
session['oauth'] = @oauth
end
def index
if session['oauth'].blank?
redirect_to facebooks_canvas_path
else
@graph = Koala::Facebook::GraphAPI.new(session['access_token'])
end
end
def logout
session['oauth'] = nil
session['access_token'] = nil
redirect_to facebooks_index_path
end
def callback
session['access_token'] = session['oauth'].get_access_token(params[:code])
redirect_to facebooks_index_path
end
generiamo per comodità le routes per il controller
routes.rb match 'facebooks/index' match 'facebooks/logout' match 'facebooks/canvas' match 'facebooks/callback'
aggiungiamo al file app/views/canvas.html.erb l'url per effettuare il login, questa sarà la prima pagina visualizzata dall'applicazione
canvas.html.erb <%= link_to 'Login', @oauth.url_for_oauth_code(:permissions => ["publish_stream","email"]) %>
e verifichiamo se la sessione è stata correttamente create, se è tale mostriamo i dettagli del profilo dell'utente che si è loggato altrimenti mostriamo il link per il login ed aggiungiamo al file app/views/index.html.erb il link per il logout ed un grezzo codice per parsare l'Hash contente i nostri dati
index.html.erb <%= link_to 'Logout', facebooks_logout_path %>
<% @graph.get_object("me").each{|k,v| %> <%= "#{k}: #{v}" %>
<% } %>
Editiamo il file config/environment.rb aggiungendo l'id della nostra applicazione su facebook, la chiave segreta e l'url della nostra applicazione che per ora è quello locale, tra un attimo andremo nella sezione Facebook Developer per creare l'applicazione ed otterremo il nostro id applicazione e la chiave segreta.
environment.rb APP_ID="id-applicazione" APP_SECRET="chiave-segreta"
Creazione applicazione Facebook
Questa è la parte facile, raggiungete l'area Facebook Developer e create una nuova applicazione
Inserite qualsiasi nome vogliate, non è importante, accettate le condizioni e create una nuova applicazione.Compilate le informazioni di base della vostra applicazione oppure traslasciate, non è necessario completare il form in tutte le sue parti, ora cliccate "su Facebook" -> "Impostazioni canvas"
- Pagina canvas: rappresenta il punto di accesso per la vostra applicazione, se per esempio avete chiamato la vostra applicazione YOUR_APP_NAME potreste inserire come valore your_app_name e al sengunte url http://apps.facebook.com/your_app_name/ verrà esposta a vostra applicazione
- Canvas url: questo è l'url della vostra applicazione web che per ora è su localhost quindi inseriremo http://127.0.0.1:3000/ al momento del deploy dell'applicazione su heroku andremo a sostutuire questo url con quello di produzione ed aggiorneremo l'url per il Secure Canvas URL che richiede il supporto SSL.
Così configurata testeremo se la funzioanlità di login utente è corretta ma non riusciremo a visualizzare l'applicazione all'url http://apps.facebook.com/your_app_name/ in quanto è ancora sul localhost.
Testing applicazione Facebook
Apriamo il borwser all'url http://127.0.0.1:3000/welcomes/canvas ed effettuamo il Login, Facebook ci chiede il consenso per esporre i nostri dati all'applicazione esterna
accettando siamo rediretti alla pagina che mostra i dettagli del nostro profilo Facebook
Modifiche pre deploy applicazione Facebook
Ora che abbiamo verificato il corretto funzionamento modifichiamo l'indirizzo del sito e il dominio per abilitare l'autenticazione nelle configurazioni di Facebook Developer sezione "Web"->"Indirizzi e dominio del sito"
indirizzo del sito: http://your_app_name.heroku.com/ dominio del sito: heroku.com
Deploy applicazione Facebook su Heroku
Ora non ci resta che caricare la nostra applicazione su Heroku, non entro nel dettaglio del deploy in quanto non è lo scopo di questo articolo, leggete il wiki di Heroku che è più che esaustivo, vi basti sapere che per caricare un'app, dopo esservi registrati su Heroku ed aver installato la gemma dovete seguire i senguentu passi:
git init git add . git commit -m "using git for heroku deployment" heroku create YOUR_APP_NAME git push heroku master heroku addons:add piggyback_ssl heroku open
Ora la nostra applicazione è raggiungibile all'indirizzo http://you_app_name.heroku.com e come per magia avrà anche il supporto SSL abilitato, provare per credere https://you_app_name.heroku.com
Configurazione Facebook
Ora ritorniamo nella pagina Facebook Developer e correggiamo questi valori nella sezione "su Facebook" -> "Impostazioni canvas"Canvas url: http://you_app_name.heroku.com/facebooks/canvasSecure Canvas URL: https://you_app_name.heroku.com/facebooks/canvascosì facendo verrà recuperata l'applicazione caricata su Heroku.
Conclusioni
Come avete visto costruire un'applicazione web sfruttando le APIs di Facebook non è poi così complicato e sfruttando Heroku come hosting andare online è estramente conveniente oltre che rapido. Non dimenticate però che Heroku offre risorse limitate ma come punto di partenza è ottimo.Come potete vedere l'applicazione è banale e non controlla se sono già presenti cookies che tengono viva la nostra sessione su Facebook e quindi mostra sempre il pulsante login, vedremo nei prossimi articoli come gestire questo aspetto.
Risorse
Full code: https://github.com/bl4d3/nerdyboku
Applicazione facebook:
Koala: https://github.com/arsduo/koala
Facebook Documentation:
Heroku come funziona? http://www.heroku.com/how