HowTo: Facebook Connect & ASP.NET MVC

image

Facebook has created a nice little service named "Facebook Connect". With this application Facebook user are allowed to login into your site with their usual facebook log-in information´s and the whole thing is secured by Facebook. In Fact it´s quite similar to OpenID but it had some more specials than just identification. But in this HowTo we are just going to talk about the identification.

Why should I use this?

Because if you spend a lot of time into building something stunning and you want other people in public to see this than it´s much easier for them to login with their already created Facebook login files than to register again on your site and remember another keyword.

image

You convinced me. What do I need?

  • your own Facebook account
  • an API key (look at the registration)
  • in best case a library which will do most of the serious work
  • 10 minutes of time

    First step: get a Facebook account

    Just register yourself here.

    image

    Not as hard as you thought, hum? ;)

    Second step: register for the Facebook Connect / Facebook Development Account

    At the bottom of the Facebook page you will found a link named “developer”. Here you need to create an application. Than you need to enter a name and a URL.

     

    Wichtig für die Entwicklung: Localhost

    The API keys of Facebook are mapped on a URL. In conclusion you need to fix the port in visual studio according to the web server (In my example it is 55555) or you use the IIS.

    Especially with localhost there is another thing to beware if you want it to work:

    Ignore the second step. I´m going to talk about this later.

    Here are the two most important API keys:

    image

    Now you are able to see your application on the “Developer dashboard“.

    That´s exactly where we have to go now. Here you will find all your former created applications. During the registration for the Connect service Facebook creates a “Base Domain” for you. That´s very useful if you are planning to use many different domains but it will not work with local host. So we need to edit the application:

    image

    Please delete the base domain in the connect tab.

    image

    Now we are ready for developing. By the way, the fight with the base domain costs me 4 entire nights ;)

    Step 3: create an ASP.NET MVC Project

    Create a new ASP.NET MVC Project…

    Step 4: Facebook Developer Toolkit

    The Facebook Developer Toolkit is a .NET OpenSource wrapper around the REST APIs from Facebook. Microsoft supports this. Unfortunately there are several other .NET APIs but for now this is the easiest way.

    We need the SDK Binaries .

    Now our project should look like this:

    image

     

     

    Of course we need to reference the 3 Facebook .DLLs.

     

     

     

    Step 5: Facebook API Key + Facebook API Secret in .config

    I add both the keys to the web.config.

      <appSettings>
        <add key="Facebook_API_Key" value="462ab423fdc4d27XXXXXXX6a085af" />
        <add key="Facebook_API_Secret" value="641ca675f280XXXXXXXXded099"/>
      </appSettings>

    Step 6: prepare the Masterpage

    Now you have to include a Facebook Javascript into the Masterpage. After that you open the “init” Function with the API key and I refer to an “xdReceiver” file which will play an important role later.

        <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/de_DE" type="text/javascript"></script>
        <script type="text/javascript">FB.init("<%this.Writer.Write(ConfigurationManager.AppSettings["Facebook_API_Key"]); %>","XdReceiver");</script>
        

    Step 7: include the Facebook Login Button into the Home/Index View

    The People of Facebook created their own Markup (FBML) for Buttons, Pictures and so on. For example the Login Button looks like this:

     

        <p>
            <fb:login-button v="2" size="medium" onlogin="window.location.reload(true);">Mit Facebook anmelden</fb:login-button>
        </p>

    To keep the HTML valid you have to integrate the XML Namespace as well

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

    Schritt 8: Die XdReceiver Datei

    Step 8: the XdReceiver file

    That´s the file facebook already offer to us during the registration. With this file you are aloud to connect via AJAX to Facebook.

     

    <%@ 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">
        <body>
            <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
        </body>
    </html>

    I stored this xdReceiver file into the home folder and I also created an xdReceiver action to render the view.

    Additionally I created a “Facebook” route into Global.asx. If a User registered successfully via facebook on your homepage he will automatically send up to “Domain/xdReceiver” via DEFAULT

                routes.MapRoute("Facebook",
                                "XdReceiver",
                                new {controller = "Home", action = "XdReceiver"});

    Step 9: the Homecontroler

    The last step is to control if the user is signed in successfully ore not.

    public ActionResult Index()
            {
                ConnectSession session = new ConnectSession(ConfigurationManager.AppSettings["Facebook_API_Key"], ConfigurationManager.AppSettings["Facebook_API_Secret"]);
                if(session.IsConnected())
                {
                    Api facebook = new Api(session);
    
                    ViewData["Message"] = "Hello, " + facebook.Users.GetInfo().name;
                }
                else
                {
                    ViewData["Message"] = "Login with Facebook!";
                }
    
                return View();
            }

    If the user is already signed in with facebook his username will be shown. Otherwise the “Log in with facebook” sign will appear.

    Result:

    start Login…

    image

    *klick*

    image

    *connect*

    image

    All in all it doesn´t take a lot of your time and the developer of facebook did a great job with their API. (excluded the base domain … if you enter this, local host won´t work)

    More Links:

    [Download Source Code]

    Read more

    HowTo: Cross Domain Ajax with JSONP and ASP.NET

    Actually it isn´t possible to send Ajax Requests to addresses which are reachable at the same domain like the site where the script is executed.The reason for this is the Same Origin Policy in JavaScript. There it is given, that the port, the protocol and the domain have to be equal to start requests. This […]

    Read more

    HowTo: Introduction in to MetaWebLog API

    This Blogspot is based on Scott Hanselmans “WeeklySourceCode”, where MetaWebLog API was the subject of today. In the Blogspot he relates that MS use the Windows Live Writer also to administrate their own websites. The tool is absolutely practical and it works with MetaWebLog API. With this tool it´s possible to create “CMS” Content with […]

    Read more

    Windows 7 RC Training Kit for Developer

    Microsoft released the Training Kit for developer yesterday. It contains presentations, Hands on Labs and democode for the new Windows 7 APIs. The Traing Kit is directed towards to C++ developers, but Microsoft offers Wrapper classen for .NET. Topics: Taskbar Libraries Multi Touch Sensors and Location Ribbon Trigger Start Services, Instrumentation and ETW Application Compatability […]

    Read more

    Visual Studio 2010 & .NET Framework 4 Training Kit – May Preview

    Microsoft released a preview Training Kit for .NET 4.0 & VS 2010: Download. It includes 28 presentations, 13 demos & 16 Hands-on Labs.   Overview The Visual Studio 2010 and .NET Framework 4 Training Kit includes presentations, hands-on labs, and demos. This content is designed to help you learn how to utilize the Visual Studio […]

    Read more

    Inside Microsoft’s home of the future

    Microsoft shows in a Video how the “home of the future” might look like. Some photos of this house could be found here. Speak recognition & “NUI“s are “key features” in this house.  

    Read more

    Free eBook: Practical .NET Unit Testing

    Nice intro to unit testing (& mocking) with .NET: – Practical .NET Unit Testing

    Read more

    Free eBook: Testing Chapter from Beginning ASP.NET MVC

    Just found an interesting eBook: – Free Chapter of Beginning ASP.NET MVC 1.0 – Testing ASP.NET MVC Applications (Blogpost)

    Read more

    HowTo: Create RSS Feeds with Linq to XML / XLinq

    It´s very easy to create an RSS using Linq to XML. In my sample I create a ASP.NET page, which offers a RSS Feed. We add also a meta tag so that users can find our RSS Feed.     Project structure: To let the user know that we offer a RSS Feed we create […]

    Read more

    HowTo: Tweet with C#

    Twitter is the internet Microblogging Service – this is my acc BTW. Twitter has an API since the beginning (and IMHO is this one big reason why twitter is so successful). The Twitter API is REST based and so you can easily create Twitter-Clients with .NET. If you don´t want to create the HTTP basic […]

    Read more

    Recent Posts

    • How to access an Azure Website with the local IIS Manager

        Since the end of February it is possible to access an Azure Website with the IIS Manager. Although the Azure Management site offers some information’s there are more details visible at the IIS Manager.   For the connection you will need an IIS Manager and the IIS Manager for Remote Administration Extension. It’s also […]

    • image1929-570x143_thumb.png
      Create and validate own Json-Web-Tokens (JWTs)

      If you are interested in web authentication you probably have heard about JSON Web tokens (JWT). What is a JWT? Maybe I’m not using the correct security termination but however: JWTs are used to exchange claims between two systems. For example: You want to log on to a service (like Facebook, Twitter, etc.) and want […]

    • Micro-Optimization: how to shrink or „embed“ pictures

        I’m currently working on the “CodeInside Dashboard” and since the page structure isn’t that difficult it should be possible to fulfill all of Google Pagespeed or Yahoos YSlow recommendations. One of the rules was to optimize the 4 PNGs that are embedded on the page.   Before – without optimization: Below you can see […]

    • image1979-570x194.png
      Move to Windows Azure – VMs, Word Press Migration, DNS changes

      Since mid January this blogs runs on a WordPress installation in an Azure VM. Because I always thought that the subject is quite complicated this blogpost offers a view behind the scenes. Why this move? So far this blog (both German and English Version) runs on a hoster somewhere in Germany. The main problem with this […]

    • Windows Azure Active Directory – CRUD for users and groups

        Windows Azure Active Directory? If you are not informed about the subject I recommend you to have a look on this Azure Info site. Which resources are there? The Azure AD contains the following entities: - Users - Groups - Contacts - Roles Access to the directory or on the “directory graph” Although the […]

    Support us