Technology & Robotics

Using the Facebook Developer Toolkit (Facebook SDK), you can quickly get started building applications of any kind that integrates with the social networking service, Facebook.

I’m currently using this for the coming version of InTheBoks, which will from now on use Facebook Connect for authentication. While working on this integration, I realized that the Facebook Developer Toolkit never raises any events back to the Silverlight application when it loads the first time and tries to look for a persistent cookie. Learn how you can extend the toolkit so you can improve the user experience of your Silverlight applications that integrates with Facebook.

This post does not describe how to get started with the Facebook Developer Toolkit and Silverlight, this is just a quick way you can improve the authentication processes with Silverlight.

Requirements

First you need to get the source code for the Facebook Developer Toolkit. We need this so we can extend the BrowserSession.cs file.

BrowserSession

Start by extending the BrowserSession class with an event handler and one method that will be executed from the fblogin.js JavaScript file. Since we are editing an existing framework, we don’t want to change any existing implementations of code so we’ll add an extra event handler like this:

public event EventHandler NotAuthenticated;

The next step is to add an method that is called from JavScript:

[ScriptableMember]
public void NotLoggedIn()
{
    if (NotAuthenticated != null)
    {
        NotAuthenticated(this, EventArgs.Empty);
    }
}

fblogin.js

Open the fblogin.js file that is included with the Facebook Developer Toolkit and should be at the root of your web application that hosts your Silverlight app.

Find the function isUserConnected, which should look like this:

function isUserConnected() {
    FB.ensureInit(function () {
        FB.Connect.get_status().waitUntilReady(function (status) {
            var plugin = document.getElementById(‘_sl_facebookapp’);
            facebook_getSession();
        });
    });
}

Replace the above function with this updated one:

function isUserConnected() {

    FB.ensureInit(function () {
        FB.Connect.get_status().waitUntilReady(function (status) {

            var plugin = document.getElementById(‘_sl_facebookapp’);

            switch (status) {
                case FB.ConnectState.connected:
                    facebook_getSession();
                    break;
                case FB.ConnectState.appNotAuthorized:
                case FB.ConnectState.userNotLoggedIn:
                    plugin.Content.FacebookLoginControl.NotLoggedIn();
            }
        });
    });
}

That’s all you need to change to enable a way to get a callback when the JavaScript have checked if the user is authenticated or not.

Notes on the UI

With this additional event, you can now hook up to three events to update your UI. Here is the code from the constructor in my ViewModel.

_session = new BrowserSession(ApplicationKey, new Enums.ExtendedPermissions[] { Enums.ExtendedPermissions.offline_access });
LoginButtonText = "Loading…";
_session.NotAuthenticated += new EventHandler(Session_NotAuthenticated);
_session.LoginCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(Session_LoginCompleted);
_session.LogoutCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(Session_LogoutCompleted);

I have a single HyperLinkButton that have it’s content bound to a string property named LoginButtonText. This is displaying “Loading…” when the app is loading, then depending on which event is raised, I change the LoginButtonText to “LOGIN” if the NotAuthenticated event is raised, “LOGOUT” if the LoginCompleted is raised and back again to “LOGIN” if the user logs out.