1
2
3
4
5
6

Using the Facebook Developer Toolkit With Windows Phone 7

A couple of people have noticed that the Facebook Developer Toolkit doesn't work on the current release of Windows Phone 7. The primary reason is that it has a dependency on System.Windows.Browser - a library which isn't in the WP7 runtime (Silverlight isn't hosted in a browser on the phone).

I took the source from the Facebook Developer Toolkit and hacked at it until I got it to work on the phone. Here is a quick demo showing it working in the WP7 emulator:

(click 'read more' for more on how this was done..)

Modifying the Silverlight Version of the Facebook Developer Toolkit
First, you'll need to download the latest release of the Facebook Developer Toolkit, extract it, and open the Facebook.Silverlight solution. Next, remove the reference to System.Windows.Browser. Then, make the following changes:

BrowserSession.cs

  • Comment out the using line for System.Windows.Browser
  • Find the 'Script Helpers' and 'Helpers' regions and comment both regions out
  • Comment out the contents of the Login() and Logout() methods
  • In the BrowserSession constructor comment out the following three lines:
    HtmlPage.RegisterScriptableObject("FacebookLoginControl", this);
    InvokeScriptCall("facebook_init", ApplicationKey);
    InvokeScriptCall("isUserConnected");

RestBase.cs
Replace two lines of:
queryBuilder.Append(System.Windows.Browser.HttpUtility.UrlEncode(kvp.Value));
with:
queryBuilder.Append(Uri.EscapeDataString(kvp.Value));

Once you have made these changes you should be able to build the project successfully. The Facebook.Silverlight.dll now being built no longer carries a dependency on System.Windows.Browser. Note that the changes above in RestBase.cs may cause some side effects depending on what is being encoded, but I believe it is the best comparable function in WP7 currently.

Hooking up a WP7 application to the modified Facebook Developer Toolkit

By removing the logic in the BrowserSession.cs we broke how the Facebook Developer Toolkit normally gets a session setup with Facebook. To fix this we are going to setup the BrowserSession ourselves - once the BrowserSession is setup then using the rest of the Facebook API should be exactly the same as a normal Silverlight application.

The screencast in this blog entry has a general overview of the code, so please refer to that and the attached project for details, but this is the basic way this will work:

  • Host a WebBrowser control in your app and navigate it to your application specific Facebook Connect login URL
  • Listen to all WebBrowser.Navigate() events - these will occur when the user is redirected after trying to log in
  • Look for "auth_token=" in the WebBrowser's URL when the Navigate() event fires
  • Call Facebook.Rest.Auth.GetSessionAsync() and pass in the auth_token
  • Create a BrowserSession object and store the 'session_key' and 'secret' values turned from GetSessionAsync() into it
  • Use the BrowserSession object like normal for the Facebook Developer Toolkit

If you are going to try and do Facebook integration on the device I highly suggest you do your work in a normal Silverlight application before moving on to try on a modified version of the Facebook Developer Toolkit. Keep in mind that to do anything with Facebook Connect or their APIs you'll have to register an application and get an application key and a secret key. You can find the modified library named 'Facebook.SilverlightWP7.dll' in the attached sample project built off of the 3.01 source drop.

AttachmentSize
FacebookConnectWindowsPhone.zip453.06 KB

Comments

hi. i got a System.UnauthorizedAccessException was unhandled error during debugging. how can i fix it?


Hi Roger,

I'm running your example project, but the MainBrowser control's Source property never seems to contain an auth_token value.

Is this something you've come across yourself and if so do you know of a way to get that value back?

Thanks,

Ashley.


Unfortunately I haven't done any facebook work since about the time this was posted. My only suggestion would be to try and do this with a regular Silverlight app first - and once you have it working there, then try to move to the phone. If/when i get a chance to play around with Facebook again I'll see what's up. In the mean time i would try the standalone Silverlight app route, and check out the Facebook forums.

sorry i couldnt be more help.


I've been trying to get this to work also and it seems like some differences between the new Beta toolkit as well as the OAuth 2.0 protocol are creating problems.

Since the Windows Phone auth experience is closer to that on the Desktop, I did this first in WPF instead of Silverlight -- however since the auth_token is not returned on a redirect URL in the WebBrowser.Source (as it appears it was in your example) and instead is in the Document of the final response it appears that it is inaccessible (which is what it sounds like Ashley encountered). In WPF the WebBrowser has a Document property which can be used to extract the token. This property doesn't exist in the Windows Phone Silverlight WebBrowser Control.

I'm also encountering a bug with the WebBrowser control where it doesn't navigate forward when you press the "log in" button in the authorization page. Is anyone else seeing this?

Please let me know if you figure out a solution to either of these issues, if you are able to connect to Facebook in the current build or if you find any resources online for dealing with this. Thanks!

Nathan


Hi, just to follow up -- I found when I downloaded the source, and used the mobile auth URL that is used in the example project that I do in fact get an auth_token back on the URL of the landing page for that request (as opposed to the one that is recommended in the Facebook Graph API).

Here's the line that made the difference:
private const string FACEBOOK_CONNECT_URL_FORMAT = "http://m.facebook.com/tos.php?api_key={0}&v=1.0&next={1}&cancel={2}";

I haven't gotten far enough to see if this will work with the graph, or if it is only valid with the old REST API (which I thought was being shut down at the end of July) but it works better so far :)

Nathan


I'm trying to run your project and can't load symbols so therefore can't debug. Seems to be something to do with the "Facebook.SilverlightWP7.dll" you included. Any insights very much appreciated.


This is a great example, thanks! I if want to post to a users status update on their behalf how do I show the extended permissions dialog? Is there another way of doing this without showing a dialog? Thanks!