This article explains how to achieve seamless implementation of login-logout using Facebook Connect with Ruby on Rails.
Motivation-
In an effort to add Facebook Connect to my Rails website, I referred to various online resources. I found out that there were several tutorials that helped in setting up a facebook application and configuring the settings to the point that one could display a Facebook Connect Login Button (eg. the Facebook Developers website), but had a hard time figuring out how to proceed thereon and implement the complete login-logout logic. This article describes the approach I took, and my motivation for sharing it is to help first-timers get a seamless login-logout working easily, as well as to invite suggestions for improvement in this approach.
Assumption-
You were able to create a <fb:login-button>. If not, please refer to- http://www.facebook.com/video/video.php?v=630563174283?
Demonstration-
Working application (and a good destination for buying laser printers, by the way): www.laserprinterhub.com
Procedure-
Step1: Login processing
Step2: The logout button
Step3: Logout processing.
Step 1: Login processing
We want that when the login button is clicked, first the user should be authenticated to facebook, then a controller method should get called (where we can perform some user sign-in processing) and then the user should be directed back to the page s/he logged in from.
In the view file, my login-button looks like-
loginpage.html.erb:
<fb:login-button onlogin=”window.location.href=’/login/do_login’;”> </fb:login-button>
Here’s what my do_login method looks like:
login_controller.rb
def do_login
# Retrieve the user’s facebook user id
fbid = cookies[$AppKey +"_user"] # $AppKey is a global constant that stores the value of the application key
# Perform sign-in operations
# …
redirect_to request.referer
end
The redirect_to at the end of the method redirects the user back to the page that s/he logged in from.
Step 2: The logout button
For logout, I display a simple logout link. This link should be visible whenever the user is logged in. So, we modify the view (where we displayed the login button) so that we first check whether or not the user is logged in and accordingly display the logout or login button as follows:
loginpage.html.erb:
<% if !cookies[$AppKey +"_user"].nil? %>
<!– if user is logged in, display user name and logout link –>
<fb:name uid=’loggedinuser’ useyou=’false’ firstnameonly=’true’></fb:name>
<a href=”#” id=”linkUserLogout”> logout </a>
<% else %>
<fb:login-button onlogin=”window.location.href=’/login/do_login’;”> </fb:login-button>
<% end %>
Step 3: Logout processing
We want that when the user clicks on the logout link, a controller method should get called where we can perform some session related operations, then the user should be logged out of our application and facebook, and finally the user should get redirected to some page. To achieve this, we create an AJAX call that makes a GET request to the controller method as follows:
public/application.js
$(document).ready(function() {
$(”#linkUserLogout”).click(function(){
$.get(’/login/do_logout’);
FB.Connect.logoutAndRedirect(”/homepage”);
return false;
});
});
When the logout button is clicked, this AJAX method gets called that makes a GET request to the do_logout method of login controller. In this method we can perform any session related tasks that we wish. After this method returns, the FB.Connect.logoutAndRedirect() method terminates the facebook session and redirects the user to the homepage, and finally the “return false” instructs javascript not to follow the ‘href’ attribute of the logout link.
Conclusion-
This is just one of the several ways in which a login-logout mechanism can be achieved. I am still learning a lot about Ruby on Rails, so my approach might not be the best one. Questions and improvements are most welcome. I hope you find it useful.
