Integration of Facebook Connect With ASP.NET MVC

Posted by Ahmad Barirani in Blog

Aug
28

If you are a Facebook Application developer working classical ASP.NET, you are probably familiar with the Facebook Developer Toolkit. This tool comes with a great set of server side controls that ease a lot of the developer’s job. But if you are like me and that you want to enjoy ASP.NET MVC, then you cannot use those server side controls that easily, so MVC Addon project might be of great help. The MVC Addon will help overcome differences in the rendering and resource requesting differences between classical ASP.NET and ASP.NET MVC.

But when it comes to integrating Facebook Connect with ASP.NET MVC, a few things need to be changed from steps explained in classical ASP.NET tutorials. This article is about overcoming those difficulties. So lets get started.

First, you will need to add the following code to your Site.Master file:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
    type="text/javascript">
</script>
 
<script src="/Scripts/fbconnect.js" type="text/javascript"></script>
 
<script type="text/javascript">
    FB.init("YOU_API_KEY", "xd_receiver");
</script>

Then, you should create a new controller called ‘xd_receiver’ and add the following code to its Index View (which should not derive from the master page):

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>

Finally, you should add the following code to render the Facebook Connect login button:

<fb:login-button onlogin="facebook_onlogin_ready();"></fb:login-button>

We’re done! When the user clicks on the Facebook Connect button, the Facebook login window pops up. After the user has entered the login information, the pop up closes and your website’s browser window will refresh. From here you can start reading the cookie for the user information and other stuff.

12 Comments to “Integration of Facebook Connect With ASP.NET MVC”

May 13, 2011 at 1:06 am
Aura Cleanmax says:

Thank you for explanations

Reply
January 20, 2011 at 5:23 am
Hasan Jaffal says:

not working on ie8
it works well on FF

Reply
November 17, 2010 at 8:27 am
Eyal says:

Hi,

I’ve followed your post, and I’m running into a problem:
The login window does not close!

I get the login prompt in a new window, I enter username & password, and then I’m re-directed to the xd_receiver page, with a lot of info in the url, but that does not close!

Any ideas?

Reply
October 31, 2010 at 1:30 pm
Dofs says:

I get the error ‘facebook_onlogin_ready is not defined’. Is it in the facebook framework or is it a method you created yourself?

Reply
- November 4, 2010 at 8:28 am
  Ahmad Barirani says:
  
  I guess you’re missing fbconnect.js in your script section.
  
  Reply
September 16, 2010 at 2:38 pm
Nagareddy says:

Apart from having fbconnect.js , please make sure you have

FB.init(“YOU_API_KEY”, “xd_receiver”);

NOT ” xd_receiver.htm”

Reply
November 5, 2009 at 4:54 pm
Anup says:

Yes, so after the login goes away I am signed in. When I go to http://www.facebook.com it automatically takes it to my home page.

Out of curiosity, where exactly would you put the Cookie handling code?

My guess is that if I was handling cookies incorrectly, it would show up on subsequent refreshes.
If there anything I need to do to change the login button after I log in?

Once logged in, if I click the fb Login button again, it just refreshes my page which also means that according to it I am already logged in.

Any help would be very appreciated.

Thank You,
Anup

Reply
- November 5, 2009 at 5:45 pm
  Ahmad Barirani says:
  
  Cookie handling should be done in your Home/Index action which is the action for http://www.yousite.com. When user authorizes your application, the login window closes and your homepage refreshes (you must have fbconnect.js). This is when cookie handling code is to be called.
  
  Reply
November 5, 2009 at 3:39 am
Anup Marwadi says:

I think you need to setup the base location in the Facebook connect to the base of your website.com

I was facing a similar problem.
however, I am in a situation where i know I get logged in, but the Cookie is null for some reason. No matter what I do, I can not read the cookie information. any help?

thanks!

Reply
- November 5, 2009 at 8:50 am
  Ahmad Barirani says:
  
  One way to find out if you are truly connected is to go to facebook.com. If you’re logged in, then it means that authentication process worked and that the cookie is there. You need to verify signature.
  
  If you get null, it most probably means that your code tries to read the cookie before it is set! It might have something to do with how you handle xd_receiver.
  
  I hope it helps.
  
  Reply
October 25, 2009 at 7:44 am
Saad Sawari says:

Ahmad, I am able connect through facebook connect, but the pop up windows does not close and it renders the site again. I am not sure what did I miss.

- my fbconnect.js is in (“Content/js”) folder
- My controller name is xd_receiverController
- My xd_receiver view is (“xd_receiver/Index.aspx”)

Reply
- October 25, 2009 at 8:46 am
  Ahmad Barirani says:
  
  You are most probably missing fbconnect.js.
  
  Reply