Facebook Connect using Facebooker on Heroku

Recently I had a chance to create a Facebook Connect Rails application. I did not have any public server on which I could host my application so I chose Heroku. We need to host our application on a public server so that we can listen the response of Facebook when we request its servers.

One actually does not need to use heroku or other public server to develop a Facebook application. We can open up our own development machine to internet by port forwarding ans listen the response. However I did not have much time to do all this stuff and decided to host the application on heroku.

So lets get our hands wet with code and stuff.

Goals

In this post we are going to implement user authentication mechanism in a Rails application using Facebook Connect. We would use Authlogic and authlogic facebook connect plugin. This makes life easier for us.

Create a Rails application on heroku

First create a Rails application on your machine and gitify it by running following commands.



First command creates a Rails application named katana and third one initialises a git repository and makes "First Commit".

Now we will push this application to heroku server. First create an account on heroku if you have not done it yet. Now run following commands to push your application to heroku.



First we install the heroku gem and then we upload this application to heroku servers. "$ heroku create" might ask for your heroku credentials.

Installing required Gems and plugins

Now we will install Facebooker, Authlogic gems and authlogic facebook connect plugin in our application.

Heroku requires you to use bundler for installing gems in your application. Read their documentation on gems to know how to do this.

Now create a 'Gemfile' in your application root like following.



The first line above is specific to heroku. Do read heroku documentation to know more about this. Other lines tell the application to install specific gems and use them.

Now install authlogic facebook connect plugin to your application. Give following command to install the plugin.



After the plugin is installed, make a commit and push the changes to heroku by running ':~/katna$ git push heroku master'. After doing this, you are ready to implement user authentication.

User authentication using Facebook Connect

Now create User model. Make your users table migration as following.



'facebook_session_key' and 'facebook_uid' are there to hold the facebook session key of the currently logged in user and his id at the facebook. You must have noticed that 'facebook_uid' column has its limit set to 8. This is because facebook_uid is a big int. On heroku, we have Postgres as default database engine. Postgres will bark at us if we do not provide the limit option. The default integer column in Postgres does not support big ints.

Crate your user model as following.



'acts_as_authentic' will tell authlogic to use this model for authentication purposes. 'before_connect' hook is provided to us be authlogic facebook connect plugin. It can be used to save some user data when he tries to connect to Facebook from our application.

Now create the UserSession model by running '$ script/generate session user_session' command. This 'session' generator is provided by authlogic. Make your UserSession model look like following.



Second line tells Authlogic to let a user "Sign In" and "Sign Up" using his email. By default it is 'username'.

Now add following lines to your 'application_controller.rb'.



First line will set the facebook_session for each user signed in to the application using Facebook connect. Second line adds a helper to retrieve that session.

Now create UserSessions controller and corresponding views.



When a user tries to sign in using facebook connect, 'create' action of UserSessions controller is invoked. After a successful sign in, he is redirected to 'show' action of DashboardsController.

Now create layout 'application.html.erb'.



'fb_connect_javscript_tag' will link the Facebook's JS api with your application. With this we will be able to use Javascript api function in our application.

'init_fb_connect' will tell our application to use XFBML in our application without any quirks.

Now create 'views/user_sessions/new.html.erb'



'authlogic_facebook_login_button' helper is provided by authlogic facebook connect plugin. It will put a facebook connect button on our Sign Up page. By clicking on this button, a user can Sign into our application using facebook connect.

We will now create Dashboards controller.



Following is view for 'show' action of Dashboards controller.



Now remove 'index.html from your 'public' directory and create your 'config/route.rb' to look like following.



Now run the command ':~/katana$ script/generate xd_receiver'. It will create cross domain scripting bridge between facebook and our application. It will allow both of them to communicate.

Now do a ':~/katana$ git commit' and ':~/katana$ git push heroku master' to deploy application to heroku.

Now before you go check out the application, we have to do some more important tasks to do.

Create a Facebook application

Got to Facebook developers page and set up a new application. If your application is hosted at 'http://app.heroku.com', make following edits to your facebook application.

First, on "Canvas Tab" fill in the "Canvas Page URL" as 'http://apps.facebook.com/{some_name}/'. '{some_name}' in the URL has to have at least seven characters. With this URL, the users of your application can access it on Facebook.

On "Canvas Callback URL", put 'http://app.heroku.com/'. Facebook pulls content for Canvas page from this URL for our application. Note, there has to be a trailing '/' at the end of the URL.

In the "Post-Authorize Redirect URL", put 'http://app.heroku.com/user_session/'. Facebook will POST the response when a user tries to sign into the application using facebook connect and is authenticated at the facebook server. Note, there has to be a trailing '/' at the end of the URL. Since facebook POSTs the response at '/user_session', the response will be received by 'create' action of the UserSessions controller.

Now on the in the "Connect URL" on "Connect Tab" put 'http://app.heroku.com/'. Again note the trailing '/'.

In the "Advanced Tab" make sure that the "Application Type" is "Web" and "Sandbox Mode" is "Enabled".

Now we will tell our facebooker to use this application for Facebook connect.

Facebooker configuration

Create a 'config/facebooker.yml' like following.



Replace and with the keys you got from Facebook. Notice one thing that , and other entries in 'facebooker.yml' are not strings. You just simply copy paste them from application page at facebook.

Now make a commit to the application and deploy the application to heroku. After successful deployment, run :~/katana$ heroku rake db:migrate'.

Go to your 'http://app.heroku.com' and try to sign in using facebook connect.