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.
This tutorial is about integrating facebook connect option in our application using facebooker gem and with basic authentication plugin restful_authentication.
Setup your Facebook Application page. Go to this page, and enter create your application.
Make note of Application ID, API Key, and Secret. You need it for facebooker.yml later.
Callback URL. They refer to a web page a user will be taken to after logging into and logging out of Facebook account. For development I used, I used “http://127.0.0.1:3000/”
I also used the same URL (http://127.0.0.1:3000) for Canvas Callback URL in Canvas section and Connect URL in Connect section.
Now we finished the app creation in facebook site.
Then install the facebooker either as plugin or gem.
ruby script/plugin install git://github.com/mmangino/facebooker.git (or) gem install facebooker
Create a yml file under config folder of your application and name it as facebooker.yml
development: api_key: [Your KEY] secret_key: [Your KEY] callback_url: http://127.0.0.1:3000/ pretty_errors: true set_asset_host_to_callback_url: false tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000 server_alive_interval: 0 production: api_key: [Your KEY] secret_key: [Your KEY] callback_url: http://www.facebook-connect-demo.com set_asset_host_to_callback_url: false tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000 server_alive_interval: 0
Now we need to create a cross-domain receiver file for Facebook Connect to callback on. Luckily, facebooker can do that for us,but make sure you have configured your facebooker.yml file correctly, or the generator will bomb out:
ruby script/generate xd_receiver
Prepare the database. Add two fields to store facebook id and hashed email so that later we can find a user by either one of the two fields.
ruby script/generate migration AddFbsToUser def self.up add_column :users, :fb_id, :integer add_column :users, :email_hash, :string end def self.down remove_column :users, :fb_id remove_column :users, :email_hash end
Run the migration
rake db:migrate
Add the following two lines right after tag in app/views/layouts/application.html.erb.
<%= fb_connect_javascript_tag %> <%= init_fb_connect "XFBML"%>
Also add the followings in the ApplicationController in app/controller/application_controller.rb. When user logs into Facebook account, :facebook_session will have all the information about the user. :facebook_session is utilized a lot.
before_filter :set_facebook_session helper_method :facebook_session
Also in ApplicationController, where I see if a user is logged in or not, I had to put additional code to see if it’s a facebook user. It’s a facebook user, if facebook_session is successfully created.
def fetch_logged_in_user if facebook_session @current_user = User.find_by_fb_user(facebook_session.user) else return unless session[:user_id] @current_user = User.find_by_id(session[:user_id]) end end
Now you can put the following line anywhere in a view, and you will get “Facebook Connect button”.
<%= fb_login_button('window.location = "/users/link_user_accounts";')%>
And it will result something link this:
When a user clicks on the button, it will bring up a popup window where user can log in. After the user is logged in, link_user_accounts action in user controller will either create a new user with Facebook credentials or recognize a user as existing user by either email hash code or facebook user id. It will be covered later.
And also make sure the following line is added to the routes in config/routes.rb.
map.resources :users, :collection => {:link_user_accounts => :get}
In User model in app/models/user.rb.
after_create :register_user_to_fb #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_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(:username => "fb_#{fb_user.uid}", :password => "", :email => "") new_facebooker.fb_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_id) unless fb_id.nil? #check for existing account existing_fb_user = User.find_by_fb_id(fb_id) #unlink the existing account unless existing_fb_user.nil? existing_fb_user.fb_id = nil existing_fb_user.save(false) end #link the new one self.fb_id = fb_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_id.nil? && fb_id > 0 end
Add the followings in the User controller in app/controller/users_controller.rb.
def link_user_accounts if @current_user.nil? #register with fb User.create_from_fb_connect(facebook_session.user) user = User.find_by_fb_user(facebook_session.user) redirect_to edit_user_path(user) else #connect accounts @current_user.link_fb_connect(facebook_session.user.id) unless @current_user.fb_id == facebook_session.user.id redirect_to playgrounds_path end end
Finally we need to have somewhere 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"
Everything is ready now. Click on the Connect button and it will redirect you to Facebook.com and return back to our site home page. And our home page will look something like this:
Related Articles
Is a very well written post….. Thanks so much for information. ….Sorry for my English
Comment by Conust — November 28, 2010 @ 5:27 pm
This really essentially a lovely stuff. An doc something like this provides precisely how deep the concept is actually realized by publisher.
Comment by 網路攝影機 — December 10, 2010 @ 10:41 pm
very nice and impressive tutorial for facebook login
Comment by Joe Chan — December 24, 2010 @ 1:45 pm
This is very helpful information, saving developers a lot of time. Thanks.
Comment by Yunjian Jiang — January 16, 2011 @ 10:21 am
Great tips I’ll be able to implement on my driving lessons website.
Comment by Richard Curran — January 23, 2011 @ 9:43 pm
[…] will get Application ID, Api Key, APP Secret. You can even refer one of my previous article “Facebook Connect in Rails using Facebooker Gem” for registering your application with […]
Pingback by Facebook Registration Plugin in Rails « Veerasundaravel's Ruby on Rails Weblog — January 27, 2011 @ 3:24 pm
but now FAcebook not providing the API KEY
So now what can we do ?? Any Body help me out plzzzzzzzzz
Comment by harish — November 14, 2011 @ 11:11 pm
Facebook changed their layout and the URL for new app creation. But still you can use this URL https://developers.facebook.com/apps to mange your existing apps and to create your new app.
Comment by Veerasundaravel — November 15, 2011 @ 9:42 am
but still u will not find the API key…try it
Comment by harish — November 26, 2011 @ 1:08 am
@Harish: Try to create a New App and you can find – App ID/API Key
Comment by Veerasundaravel — November 26, 2011 @ 11:01 am
This is exactly an excellent study in my view, Should acknowledge that you are among the perfect bloggers I ever noticed.Many thanks for publishing this particular helpful post.
Comment by Mccranie — November 18, 2011 @ 12:54 am
We loved reading your own submit. I’ve reached be honest had been the very first content material in your website I truly liked and exactly where I’d a sense of knowing, know what I am talking about? Anyway, keep up with the posting and I will be back once again.
Comment by Leitzel — November 24, 2011 @ 5:51 pm
now this blog is of no use…as facebook popup comes for login but after login popup remain open with blank page….
Comment by harish — November 26, 2011 @ 1:07 am
Have you tried in live server?
Comment by Veerasundaravel — November 26, 2011 @ 10:48 am
Hello there, simply become aware of your website through Google, and found that it is really informative. Im going to look out for the city. Ill be thankful for people who carry on this particular in future. Plenty of people will probably be benefited out of your composing. Many thanks!
Comment by 86Waring — November 30, 2011 @ 2:35 pm
Thank you so much with regard to providing people with an exceptionally unique chance to study content articles and blogs from this website. It truly is really fairly sweet and full of a great time personally and my office friends to look your site at the minimum 3 times weekly to see the most recent assistance you’ve gotten. Not to mention, we are all the time happy concerning the mind-blowing inspiring suggestions offered through you. Chosen 2 factors within this posting tend to be certainly the simplest Ive ever had.
Comment by ugg 3161 — December 2, 2011 @ 6:40 am
The actual post is absolutely fantastic! A whole lot info as well as inspiration, both of which we all need! Like in order to appreciate the time and energy you place to your blog and more information you offer! I will bookmark your website!
Comment by Hilario — December 3, 2011 @ 12:55 pm
My partner and I absolutely love your blog and find many
of your post’s to be exactly I’m looking for. Would
you offer guest writers to write content for you personally?
I wouldn’t mind producing a post or elaborating on most of the subjects you write with regards to here. Again, awesome web site!
Comment by Super Cub Dsm Rtf Upgrades — May 13, 2013 @ 11:51 pm
I’m wondering which blogging platform you’re using? I’m new to running a blog and have been thinking about using the Blogger platform. Do you consider this is a good platform to start with? I would be extremely thankful if I could ask you some questions through email so I can learn a bit more prior to getting started. When you have some free time, please contact me at: raywoodard@yahoo.de. Kudos
Comment by Ray — May 29, 2013 @ 1:12 am
I am really loving the theme/design of your site. Do you ever run into any browser compatibility problems?
A small number of my blog visitors have complained about my
blog not operating correctly in Explorer but looks great in Safari.
Do you have any suggestions to help fix this issue?
Comment by truth about cellulite private access — July 24, 2013 @ 12:45 pm
[…] Facebook Connect in Rails using Facebooker Gem … […]
Pingback by Facebook Login rails — August 5, 2014 @ 3:41 pm