Facebook login for Windows Store apps

Facebook login for Windows Store apps

  • Comments 10
  • Likes

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:

 

Facebook login page

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:

Facebook login sample page

 

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).
    edit app button
    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.

    Windows Store ID
    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).

    edit sample
    Figure 3

  4. This brings you to the app details page. Once on this page, click Services (Figure 4)
    services sample
    Figure 4

  5. On the next page, click Live Services (Figure 5).
    Screen shot showing the Live Services link to click
    Figure 5

  6. On the next page, click Authenticating your service (Figure 6).
    Page showing the Authenticate your service link
    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.

    App Security Identifier page
    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
  9. From:

    https://www.facebook.com/dialog/oauth?client_id=<Your Facebook App ID>&display=popup&response_type=token&redirect_uri=www.facebook.com/connect/login_success.html

    To:

    https://www.facebook.com/dialog/oauth?client_id=<Your Facebook App ID>&display=popup&response_type=token&redirect_uri=ms-app://<Your Windows Store Application SID>/

    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)

10 Comments
You must be logged in to comment. Sign in or Join Now
  • Mithuna
    0 Posts

    Hi Sanjeev,

    This flow works for some FB ID's and not for others. Once logged in ,the dialog is stuck at authorize step "OK"/"Skip" and never returns to the app. However in FB I can see the app's permission is updated under security settings.

    This seems to be happening with random accounts ( frequently though).  For the same account if the callback URI is anything other than the app SID ( example: www.facebook.com/connect/login_success.html) then it works.

  • Minu_M
    0 Posts

    How to logout from the application and sign in as different user after implementing SSO. It is always displaying the first logged in user with the meesage "You have already authorized..."

  • On windows phone I also receive the same error as Minu_M

    "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

    Is there something else other than Windows Store ID or Windows Phone Store ID [BETA] which needs to be entered while configuring the App in Facebook? Please advice.

  • 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 appdev.microsoft.com/storeportals and follow the rest of the steps listed below.

    Web Design Oakland

  • Also, there was a system message about not to use display=popup. If I change to display=touch I get pass the authorize dialog and I am logged in, but that is not a nice experience.

  • TommyOv
    0 Posts

    Hi Sanjeev. I have posted a questing with sample code here:

    stackoverflow.com/.../cannot-get-facebook-single-signon-with-windows-8-1-to-work

    I have now gone back to using the "old way" of authenticating with having a facebook web app and the good, old www.facebook.com/.../login_success.html callback url. At least it works.

  • Minu_M
    0 Posts

    Hi, I followed the steps mentioned above for Facebook SSO in my win8.1 store app -Copied the app SID to Facebook, replaced the redirect_uri with the windows store application SID and used the two parameter version of authenticate async. But I am getting a message like

    "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

    Can someone please help on this?

  • Hi Tommy, we have tested the scenario and the Ok button does indeed work. Can you please paste sample code for your login? The message warning you not using display=popup is simply an artifact of you being a developer on the Facebook AppID. It will not be shown to normal users.

  • Hope that Candy Crush Saga comes to Windows 8, at last!

  • TommyOv
    0 Posts

    I'm trying to implement this in my app. It does NOT work. After logging in, the dialog says I have already authorized the app, but the  Okay and Skip buttons does not respond and AuthenticateAsync() never returns. Also, there was a system message about not to use display=popup. If I change to display=touch I get pass the authorize dialog and I am logged in, but that is not a nice experience. This is a C#/XAML winrt app for Windows 8.1. Please fix this.