Facebook Single sign-on on Windows Phone 8 with Windows Azure Mobile Services

Using Facebook single sign-on on Windows Phone 8 applications allows user very easy way to register/login to your application without filling forms. But it still requires user to enter Facebook login credentials to your application or Facebook web form. To avoid this you can use Facebook SSO (Single Sign On) which basically means that when you want to do authentication against Facebook on your application. You just redirect user to Facebook Windows Phone application where user can simply accept your application and whole authorization is done.

To use this feature you need to prepare your application with these steps:

1. Create a new Windows Azure Mobile Service and follow this guide
2. Open the visual studio project that you downloaded and edited on step 1
3. Open WMAppManifest.xml on Code View
4. Edit WMAppManifest by adding the Extensions and Protocol. Protocol name should be same as your ProductID without dashes and with msft- prefix

   	<?xml version="1.0" encoding="utf-8"?>
   	<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2012/deployment" AppPlatformVersion="8.0">
   	<DefaultLanguage xmlns="" code="en-US" />
   	<App xmlns="" ProductID="{3002e0ca-d005-4d93-bca4-e23e83ddd847}" Title="tapanilanet"
   	RuntimeType="Silverlight" Version="1.0.0.0"
   	Genre="apps.normal" Author="tapanilanet author" Description="Sample description"
   	Publisher="tapanilanet"
   	PublisherID="{7997efcb-3c27-4ade-94e0-950ebe5c1043}">
   	<IconPath IsRelative="true" IsResource="false">Assets\ApplicationIcon.png</IconPath>
   	<Capabilities>
   	<Capability Name="ID_CAP_NETWORKING" />
   	<Capability Name="ID_CAP_MEDIALIB_AUDIO" />
   	<Capability Name="ID_CAP_MEDIALIB_PLAYBACK" />
   	<Capability Name="ID_CAP_SENSORS" />
   	<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
   	</Capabilities>
   	<Tasks>
   	<DefaultTask Name="_default" NavigationPage="MainPage.xaml" />
   	</Tasks>
   	<Tokens>
   	<PrimaryToken TokenID="tapanilanetToken" TaskName="_default">
   	<TemplateFlip>
   	<SmallImageURI
   	IsRelative="true"
   	IsResource="false">Assets\Tiles\FlipCycleTileSmall.png</SmallImageURI>
   	<Count>0</Count>
   	<BackgroundImageURI
   	IsRelative="true"
   	IsResource="false">Assets\Tiles\FlipCycleTileMedium.png</BackgroundImageURI>
   	<Title>tapanilanet</Title>
   	<BackContent>
   	</BackContent>
   	<BackBackgroundImageURI>
   	</BackBackgroundImageURI>
   	<BackTitle>
   	</BackTitle>
   	<LargeBackgroundImageURI>
   	</LargeBackgroundImageURI>
   	<LargeBackContent>
   	</LargeBackContent>
   	<LargeBackBackgroundImageURI>
   	</LargeBackBackgroundImageURI>
   	<DeviceLockImageURI>
   	</DeviceLockImageURI>
   	<HasLarge>
   	</HasLarge>
   	</TemplateFlip>
   	</PrimaryToken>
   	</Tokens>
   	<Extensions>
   	<Protocol Name="msft-3002e0cad0054d93bca4e23e83ddd847"
   	NavUriFragment="encodedLaunchUri=%s" TaskID="_default" />
   	</Extensions>
   	<ScreenResolutions>
   	<ScreenResolution Name="ID_RESOLUTION_WVGA" />
   	<ScreenResolution Name="ID_RESOLUTION_WXGA" />
   	<ScreenResolution Name="ID_RESOLUTION_HD720P" />
   	</ScreenResolutions>
   	</App>
   	</Deployment>

   view raw WMAppManifest.xml hosted with ❤ by GitHub
5. Open Package Manager Console
6. Run Install-Package Facebook.Client -pre
7. Create new class called CustomURIMapper
8. Here's all the code for the class

   	class CustomUriMapper : UriMapperBase
   	{
   	public override Uri MapUri(Uri uri)
   	{
   	//If URI is callback from facebook then go ot MainPage.xaml
   	//If it's not then just go whereever the URI is pointing
   	return !AppAuthenticationHelper.IsFacebookLoginResponse(uri) ?
   	uri : new Uri("/MainPage.xaml", UriKind.Relative);
   	}
   	}

   view raw CustomURIMapper.cs hosted with ❤ by GitHub
9. Open App.xaml.cs and edit InitilizationPhoneApplication() method

   	private void InitializePhoneApplication()
   	{
   	if (phoneApplicationInitialized)
   	return;
   	// Create the frame but don't set it as RootVisual yet; this allows the splash
   	// screen to remain active until the application is ready to render.
   	RootFrame = new PhoneApplicationFrame();
   	RootFrame.Navigated += CompleteInitializePhoneApplication;
   	RootFrame.UriMapper = new CustomUriMapper();
   	// Handle navigation failures
   	RootFrame.NavigationFailed += RootFrame_NavigationFailed;
   	// Handle reset requests for clearing the backstack
   	RootFrame.Navigated += CheckForResetNavigation;
   	// Ensure we don't initialize again
   	phoneApplicationInitialized = true;
   	}

   view raw App.xaml.cs hosted with ❤ by GitHub
10. Edit MainPage.xaml.cs

    	public MainPage()
    	{
    	InitializeComponent();
    	}
    	protected async override void OnNavigatedTo(NavigationEventArgs e)
    	{
    	CheckUri(e.Uri);
    	}
    	private void Authenticate()
    	{
    	while (user == null)
    	{
    	var fb = new FacebookSessionClient("502318916553840");
    	fb.LoginWithApp("basic_info");
    	}
    	}
    	private async void CheckUri(Uri uri)
    	{
    	if (AppAuthenticationHelper.IsFacebookLoginResponse(uri))
    	{
    	FacebookSession session = new FacebookSession();
    	try
    	{
    	session.ParseQueryString(HttpUtility.UrlDecode(uri.ToString()));
    	var token = JObject.FromObject(new
    	{
    	access_token = session.AccessToken,
    	});
    	user = await App.MobileService
    	.LoginAsync(
    	MobileServiceAuthenticationProvider.Facebook,
    	token);
    	MessageBox.Show(string.Format("You are now logged in - {0}", user.UserId));
    	}
    	catch (Facebook.FacebookOAuthException exc)
    	{
    	MessageBox.Show(exc.Message);
    	}
    	}
    	else
    	{
    	Authenticate();
    	}
    	}

    view raw MainPage.xaml.cs hosted with ❤ by GitHub
11. Go to Facebook developers and insert your windows phone application product ID without dashes into "Windows Phone Store ID" field

Now when user opens the app he will be redirected to Facebook for authenticating the app. Once he’s done he will be back into the application and authentication is done. If the user doesn’t have Facebook application installed he will be redirected to Windows Phone store to install it.

Complete solution can be found from Github

Any questions or comments?