Facebook login for Windows Store apps

Facebook Login is a great way to plug into your user’s social network, offer a more personalized experience, and accelerate viral adoption of your apps.

Today, we are excited to announce that on Windows Store apps and Windows Phone 8 apps, you can easily integrate Facebook Login. Facebook Login lets users sign in to Facebook only one time across multiple devices. If another app then wants to access the users Facebook account, the user just provides consent and doesn’t sign in again.

Let’s take a look at the user experience. The first time the user connects to Facebook they see this:

In this case, the user provides their credentials. If they check “keep me logged in” then the next time an app (which could be yours) requests access to Facebook, the user won’t need to provide their credentials again. Instead the user sees this:

The user just needs to give your app access to the specific information and capabilities provided by Facebook. When the user gives your app consent, your app can continue to access the requested information with no further prompts.

In this post, we’ll walk you through the steps on how to set up your apps for a Single Sign-On experience using Facebook.

Setting up your app

1. Log on to the Facebook developer portal (https://developers.facebook.com) and navigate to your app. Click Edit App or Create new app (Figure 1).
   
   Figure 1
   
   
2. Next, look for the following section (Figure 2) on the resulting page, which specifies the place to integrate the Windows Store app setup for Facebook Login.
   
   
   Figure 2
   
   Enter the Package Security Identifier for your Windows Store app in the Windows Store ID box. To obtain the Windows Store ID for your app, and to continue integrating the Login with Facebook using Single Sign-On, log in to your Windows Store Dashboard at https://appdev.microsoft.com/storeportals and follow the rest of the steps listed below.
   
   
3. Once you’ve logged in to Windows Store Dashboard, locate your app on the Dashboard and click the Edit (Figure 3).
   
   
   Figure 3
   
   
4. This brings you to the app details page. Once on this page, click Services (Figure 4)
   
   Figure 4
   
   
5. On the next page, click Live Services (Figure 5).
   
   Figure 5
   
   
6. On the next page, click Authenticating your service (Figure 6).
   
   Figure 6
   
   
7. On the next page, the highlighted text in Figure 7 is the Package Security Identifier or App SID that you need for the Single Sign On.
   Note:Drop the ms-app:// prefix preceding the Package SID when copying the SID to the Facebook portal.
   
   
   Figure 7
   
   
8. Finally, after you’ve obtained the Package Security Identifier (SID) and copied it over to the Facebook dev portal as specified in Step 1, you need to make the WebAuthenticationBroker.authenticateAsync call with the startUri parameter set to include your Package SID as the redirect URL. Make sure you use the two parameter version of authenticateAsync function instead of the three parameter version with the callback URI. If your app uses Login with Facebook, currently in the startURI parameter, you are likely using the redirect URI as www.facebook.com/connect/login_success.html and you need it to change to your package SID. Specifically, change the startURI in the authenticateAsync call so that it would change

From:

https://www.facebook.com/dialog/oauth?client_id=&display=popup&response_type=token&redirect_uri=www.facebook.com/connect/login_success.html

To:

https://www.facebook.com/dialog/oauth?client_id=&display=popup&response_type=token&redirect_uri=ms-app:///

It’s just that easy!

Wrapping up

Login with Facebook using Single Sign On via the WebAuthenticationBroker in Windows Store apps offers your users a simple and convenient way of logging into your apps. This enables you to easily provide rich and personalized experiences and take advantage of the viral effect of your user’s social network. To learn more, you can leverage the Facebook C# SDK for Windows Store apps and Windows Phone apps. Check out the Facebook Open Graph APIs that allow you to programmatically publish stories to a user’s Timeline to create personalized user experiences. You can also visit http://developers.facebook.com to learn more about the Facebook social platform and other ways of integrating social functionality in your apps.

--Sanjeev Dwivedi (Technical Evangelist)