Tag Archives: Facebook

Facebook Connect Auto-Login Solution for Windows Phone

The Current Problem with Using Facebook Login on Windows Phone

One of the really nice things about developing for iPhone or Android is the ability to use the Facebook SDK to expedite your app’s account creation process.  By using the Facebook SDK on these platforms, users do not need to re-enter their Facebook email and password.  So long as they have signed into Facebook on the phone at some previous point in time, all the user has to do is grant permissions to your app using a dialog similar to the one displayed here:

fb

Unfortunately, there is no official Facebook SDK for Windows Phone and it seems unlikely one will be released anytime soon.  As a result, Windows Phone developers have resorted to displaying the Facebook mobile web login page within a WebBrowser control in their apps.  This approach works, but due to the fact that the WebBrowser control keeps the browser cookies isolated to that particular app, it requires any new user of your app to always login to Facebook.  This significantly reduces the effectiveness of using Facebook login to expedite your app’s account creation process.

The Solution

Part 1: Initiate login from the mobile app

To solve this problem, I take advantage of the fact that the phone’s standalone web browser does save Facebook session cookies.  Rather than show the Facebook mobile web login page within a WebBrowser control, I open it using the standalone browser using the WebBrowserTask class:

Microsoft.Phone.Tasks.WebBrowserTask browserTask = new WebBrowserTask();
browserTask.Uri = new Uri("https://www.facebook.com/dialog/oauth?client_id=<APP ID>&scope=<PERMISSIONS>&response_type=code&display=touch&redirect_uri=<URL ON YOUR SERVER>");
browserTask.Show();

If the user already was logged into Facebook from their phone’s web browser, they will by-pass the login screen and be taken directly to the screen for authorizing your app’s permissions, just as on iPhone or Android.

Part 2: Handle login result on web server

As the login request’s redirect_uri I pass the address to a resource on my web server.   This server-side page processes the result of the login request and exchanges the login code for an access token using Facebook’s server-side authentication flow.  The code required to perform this is quite lengthy and outside the scope of this blog post.  It has been extensively documented in Facebook’s API documentation though.

Part 3: Using a Custom Protocol to send access token to app

After exchanging the code for an access token, the following Javascript is written to the response stream:

window.location = '<YOUR APP’S CUSTOM PROTOCOL>:FacebookConnect?token=<ACCESS TOKEN>';

The app needs to have declared the custom protocol within the app’s WMAppManifest.xml file.  You then need to create a subclass of UriMapper to handle the app’s launch.  Here is an example of the class you will need to create:

public class CustomUriMapper : UriMapperBase
    {
        public override Uri MapUri(Uri uri)
        {
            string tempUri = System.Net.HttpUtility.UrlDecode(uri.ToString());
            if (tempUri.Contains("FacebookConnect?token="))
            {
                string token = tempUri.Substring(tempUri.IndexOf("token=") + "token=".Length);
                // Save token or something
                return new Uri("/Pages/HomeScreen.xaml", UriKind.Relative);
            }
            return uri;
        }
    }

Limitations

  • If the user has never logged into Facebook using their phone’s web browser, they will still need to login, but the flow will still function.
  • Only works with Windows Phone 8 and higher due to requirement for custom protocol.
  • Requires a lot of work to set everything up properly.  Unless you expect to have a LOT of users it probably isn’t worth the effort.

You can see this functionality for yourself by downloading the WNM Live app.  I added this approach to the WNM Live app a few months ago and it has been working reliably.

Tagged , ,