Tutorial for restful_authentication on Rails with Facebook Connect in 15 minutes

Back in June 2007 I wrote a popular tutorial on writing Facebook platform applications with Ruby On Rails. Time has moved on since and Facebook has launched Facebook Connect which allows you to integrate Facebook into your own sites allowing authentication, registration, friend connecting, and Facebook feed posting in the context of your application. Mashable has a great post on 10 great implementations of Facebook Connect including Joost, Vimeo and Disqus.

At Made By Many we are fans of the possibilites of Facebook Connect for lowering barriers of registration, extracting social graph and injecting your social media functions into the daily online life of users. There is little point trying to create a “new” facebook on your site. Your unique social proposition lies elsewhere with your content, community and tools.

People have found the integration of Facebook Connect tricky and while great libraries like facebooker handle the API part, actually getting the profile linking and integration flow is harder. So I’ve written this tutorial to integrate the most often starter plugin for authentication and registration in Ruby On Rails restful_authentication with Facebook Connect to allow your users to login and register through Connect.

First of all lets state what this integration is going to achieve.

• As a user I can register to the site through entering my details so I can access all that great functionality
• As a user I can login to the site through my entered username and password
• As a user I can register to the site through Facebook Connect so I don’t have to fill in that form
• As a user I can login to the site through Facebook Connect so I don’t have to remember two passwords
• As a user I can connect my existing site user with my Facebook Connect user so I can later login through Facebook Connect

We also have some constraints we need to consider

• As a user if I register a user through entering my details and later login through Facebook Connect I want to make sure I retain my old user account

So read on and i’ll have you Connected in 15 minutes.

We will first create a standard restful_authentication Rails application. I’m going to user mysql for this example

rails -d mysql connect_tutorial

Install restful authentication

git clone git://github.com/technoweenie/restful-authentication.git restful_authentication
cd ../..
./script/generate authenticated user sessions

Create our database

rake db:create
rake db:migrate

Move include AuthenticatedSystem from the Sessions Controller to the Application Controller

Start the server and browse to http://localhost:3000/signup. Bingo, Restful Authentication in 3 minutes. Don’t create any users yet we need to make to add some fields to connect up our accounts

script/generate migration add_users_fb

def self.up
  add_column :users, :fb_user_id, :integer
  add_column :users, :email_hash, :string
  #if mysql
  execute("alter table users modify fb_user_id bigint")
end

def self.down
  remove_column :users, :fb_user_id
  remove_column :users, :email_hash
end

rake db:migrate

We need two extra columns for our users. One to store the facebook user id in fb_user_id and another to store a special hash of our users email address which we can use to later match new Facebook users to existing accounts to take care of our constraint.

For the facebook connect we are going to use the facebooker plugin. This will handle the API level communication for us.

script/plugin install git://github.com/mmangino/facebooker.git
script/generate xd_receiver

The last line creates a cross-domain receiver file for Facebook Connect to callback on.

You are now going to have to create a Facebook Application on Facebook to get your API key and secret. Head over to http://www.facebook.com/developers/createapp.php

(Enter your own application name)

Take a note of the api_key, secret and callback url and add these to config/facebooker.yml

development:
  api_key: {YOUR_KEY}
  secret_key: {YOUR_SECRET}
  canvas_page_name:
  callback_url: http://localhost:3000/
  pretty_errors: true
  set_asset_host_to_callback_url: true
  tunnel:
    public_host_username:
    public_host:
    public_port: 4007
    local_port: 3000

We need to initialise the Facebook Connect on every page. Basically this consists of 3 things. Adding a namespace decleration for FBML, adding the Facebook Connect Javascript and initialising the Javascript. Luckily rfacebooker can do this for us, so we create a generic layout index.html.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<%= javascript_include_tag :defaults%>
</head>
<body>
<%= fb_connect_javascript_tag %>
<%= init_fb_connect "XFBML"%>
<%=yield%>
</body>

And add the following to ApplicationController

layout 'index'
before_filter :set_facebook_session
helper_method :facebook_session

You are now ready to roll with some Facebook Connect tags. Add the following to the bottom of sessions/new.html.erb

<p>or login with Facebook connect</p>
<%= fb_login_button('window.location = "/users/link_user_accounts";')%>

And the following to users/new.html.erb

<p>or register with Facebook connect</p>
<%= fb_login_button('window.location = "/users/link_user_accounts";')%>

We also add another registration field for name

<p><%= label_tag 'name' %><br/>
<%= f.text_field :name %></p>

These are going to create FBML tags which the Facebook connect Javascript will render as our Connect buttons

Start the server and go to http://localhost:3000/login. You should get this, if you don’t retrace your steps you have done something wrong.

Now it’s time to integrate. We need to do 3 main things

1. When you are logged in through a Facebook session then login through restful authentication
2. Link accounts between Facebook and Restful Authentication
3. Create accounts when someone login or register with facebook.

We need to add to lib/authenticated_system.rb. Change the current_user method to

def current_user
  @current_user ||= (login_from_session || login_from_basic_auth || login_from_cookie || login_from_fb) unless @current_user == false
end

And add

def login_from_fb
  if facebook_session
    self.current_user = User.find_by_fb_user(facebook_session.user)
  end
end

This will handle the seamless login for us. Now we need to add to our User model.

#find the user in the database, first by the facebook user id and if that fails through the email hash
def self.find_by_fb_user(fb_user)
  User.find_by_fb_user_id(fb_user.uid) || User.find_by_email_hash(fb_user.email_hashes)
end
#Take the data returned from facebook and create a new user from it.
#We don't get the email from Facebook and because a facebooker can only login through Connect we just generate a unique login name for them.
#If you were using username to display to people you might want to get them to select one after registering through Facebook Connect
def self.create_from_fb_connect(fb_user)
  new_facebooker = User.new(:name => fb_user.name, :login => "facebooker_#{fb_user.uid}", :password => "", :email => "")
  new_facebooker.fb_user_id = fb_user.uid.to_i
  #We need to save without validations
  new_facebooker.save(false)
  new_facebooker.register_user_to_fb
end

#We are going to connect this user object with a facebook id. But only ever one account.
def link_fb_connect(fb_user_id)
  unless fb_user_id.nil?
    #check for existing account
    existing_fb_user = User.find_by_fb_user_id(fb_user_id)
    #unlink the existing account
    unless existing_fb_user.nil?
      existing_fb_user.fb_user_id = nil
      existing_fb_user.save(false)
    end
    #link the new one
    self.fb_user_id = fb_user_id
    save(false)
  end
end

#The Facebook registers user method is going to send the users email hash and our account id to Facebook
#We need this so Facebook can find friends on our local application even if they have not connect through connect
#We hen use the email hash in the database to later identify a user from Facebook with a local user
def register_user_to_fb
  users = {:email => email, :account_id => id}
  Facebooker::User.register([users])
  self.email_hash = Facebooker::User.hash_email(email)
  save(false)
end
def facebook_user?
  return !fb_user_id.nil? && fb_user_id > 0
end

This allows authentication to look up users either from their stored Facebook ID, or a hash of their email address. It also adds methods for our createing and linking. After any user is created we need to register them we Facebook Connect so add to the User model

after_create :register_user_to_fb

In the previous views Facebook Connect login button we added an after login javascript callback. This is to link our accounts after a user has gone through the callback process. We need to add this to the user controller

def link_user_accounts
  if self.current_user.nil?
    #register with fb
    User.create_from_fb_connect(facebook_session.user)
  else
    #connect accounts
    self.current_user.link_fb_connect(facebook_session.user.id) unless self.current_user.fb_user_id == facebook_session.user.id
  end
  redirect_to '/'
end

Don’t forget to add a route for this.

map.resources :users, :collection => {:link_user_accounts => :get}

Finally we need to have someone to go after login. Let’s create a home page under Users controller users/home.html.erb

<% if logged_in? %>
<h2>You are logged in as <%= current_user.name %></h2>
<% if current_user.facebook_user? %>
<fb:profile-pic uid="<%= current_user.fb_user_id%>" facebook-logo="true" size="thumb" ></fb:profile-pic>
<p><a href="#" onclick='FB.Connect.logoutAndRedirect("/logout")'>Logout</a></p>
<% else %>
<p>why don't you connect with your facebook account</p>
<%= fb_login_button('window.location = "/users/link_user_accounts";')%>
<p><%= link_to 'Logout', logout_path%></p>
<% end %>
<% else %>
<h2>You are not logged in!</h2>
<p><%= link_to 'Signup', signup_path%> or <%= link_to 'Login', login_path%></p>
<% end %>

And map it to root and delete public/index.html

map.root :controller => "users", :action => "home"

And its done. Stop the clock. Start the server and go to http://localhost:3000/login and press the big connect button

Login with your facebook account. Restful Authentication with Facebook Connect. Done!

Hope this helps you guys. You can find more Connect documentation on the developer wiki. I’m hoping to add to this tutorial with posting to the Feed and connecting with Friends so follow me @stueccles on twitter for updates. You can find the code for this tutorial at github.