Forget Login Screens! How to Add Single Sign On for Universal Windows Store Apps


Ever wonder how you can get rid of the ugly login screen and have the user jump straight into your app?

The login screen is one of the pain points of building an app and has always required detailed attention from a user experience and design perspective. The last thing a developer wants is to have the user close their app because the login screen didn’t work or it was too annoying to register. However, user authentication and security are extremely important to the success of your Windows Phone and Windows Store app.

User authentication in Universal Windows Store Apps can be achieved in multiple ways; the most flexible is to use the WebAuthenticationBroker API that lets you perform single sign on connections with a Microsoft Account or Facebook or Twitter or any other OAuth-based protocol. Take a look at the sample code here.

If all you need is to identify the user but don’t need access to his social graph (via Facebook or Twitter) or access to his OneDrive account, you can use a little mentioned method to perform authentication based off the primary Microsoft Account of the device. This technique has multiple advantages in that you can use an existing account the user has already signed into already on the device and not have to worry about OAuth or other third-party authentication services breaking down on you.

First, you will need to create an instance of the OnlineIdAuthenticator class.

OnlineIdAuthenticator onlineIdAuthenticator = new OnlineIdAuthenticator();

Secondly, you will need to prepare a service ticket request, OnlineIdServiceTicketRequest. This lets you specify the level of access to resources maintained by Microsoft cloud services. Scopes can be listed with a comma separator if multiple tickets for different resource providers are needed.

OnlineIdServiceTicketRequest serviceTicketRequest = new OnlineIdServiceTicketRequest(“wl.basic”, “DELEGATION”);

Or

OnlineIdServiceTicketRequest serviceTicketRequest = new OnlineIdServiceTicketRequest(“wl.basic wl.contacts_photos wl.calendars”, “DELEGATION”);

If there is no primary account on the device, you will be asked to login as shown in the following screenshot when you execute the following line of code. If there is a primary account on the device, you will be asked to grant privileges to the app as show in the following screenshot as well.

UserIdentity result = await onlineIdAuthenticator.AuthenticateUserAsync(serviceTicketRequest);

clip_image002clip_image004

A user who already has a primary Microsoft account and has granted access to this app will not cause any UI dialog or popup with the above code.

The results of the authentication can be retrieved as seen in the following code same. It also returns some user info such as first and last name. You can use the ticket against OneDrive to get the Windows Live basic profile if you wish.

if (result != null && result.Tickets[0].Value != string.Empty)

{

// Safe Customer ID

//result.SafeCustomerId;

}

else

{

// Error: Unable to get a ticket.

//result.Tickets[0].ErrorCode.ToString();

}

The big advantage of using the OnlineIdAuthenticator is that it truly is single sign on. Once the primary user is signed into the device (which in majority use cases, they already are), multiple apps can get tickets without requiring the user to sign in, users only need to consent once!

There you have it! Straight forward sample code to quickly authenticate a user of your app with the primary Microsoft account of the device. You no longer have to create elaborate login screens, nor worry about the user experience flow as the experience is now seamless.

Contact @ramisayar on Twitter if you have any questions, comments or suggestions.

Comments (13)

  1. Nicola says:

    Hello, I'm trying your code, but I can't understand how to obtain use the "result" object

    Thanks

  2. rami.sayar@hotmail.com says:

    Thanks for the feedback Nicola, the line of code was hidden, sorry about that. It has been fixed.

  3. Robert says:

    Should I put this code in the OnNavigatedTo method on Windows Phone 8.1? Will it work if a user has his work email configured on his cellphone? Thx in advance

  4. rami.sayar@hotmail.com says:

    @Robert, you can put it in there or attach the code to a signin button (preferred). It will work with any microsoft account configured on the device.

  5. John Archer says:

    Hi Rami,

    thanks for that post!

    I really like that but I wonder why it is not possible to do a similar thing with OneDrive. My main question (or complain) with the current situation is, that if a developer/app wants OneDrive access (e.g. to store recorded mp3 files there) I see the Microsoft account login page. But what is frightening my is: what keeps the dev back from faking that login page (which should not be hard to do) and capture my login credentials?

    Sure, I have enable 2-way-auth, nevertheless I would definitely not happy if someone else has my password.

    Hm …

    Cheers!

  6. rami.sayar@hotmail.com says:

    @John: Unless you are referring to a fishing attempt in which a whole sign-in mechanism is replicated and showing, using single sign on as shown above the developer will not get access to the password of your account. They are only given an access token to be able to access OneDrive but in no way is the password shared.

  7. John Archer says:

    Yeah, I mean you wrote "If all you need is to identify the user but don’t need access to his social graph (via Facebook or Twitter) or access to his OneDrive account …"

    This sounds to me as the way with using WebAuthenticationBroker you showed here is not applicable for getting access to the OneDrive folders and doing I/O operations there. Or do I misunderstand you?

    I am aware of the token based SSO mechanism, that's why it would be great if this could also be used to get OneDrive access, so it is never ever neccessary for an app dev to include the MS account login page (or create a fishing site).

    I hope you know, what I want to say …

    Cheers!

  8. John Archer says:

    Hi, me again!

    Guess I misunderstood you. Guess you would have to use "wl.skydrive_update" as the policy in order to get read/write access to OneDrive via SSO, right?

  9. rami.sayar@hotmail.com says:

    @John: Yes, there are different types of service tickets that you can request with SSO which give access to our many different services.

  10. Nambukarthy Raveendran says:

    Hello, but in the code i couldn't find the single sign on, it is asking me to login for all the media(facebook, twitter, flickr, google service).the below link is where i am getting redirected when i am clike the sample source code. code.msdn.microsoft.com/…/Web-Authentication-d0485122

  11. rami.sayar@hotmail.com says:

    @Nambukarthy: No, this is not like the web broker sample. This article helps you get single sign on using the Microsoft Account already existing on the device.

  12. Carl says:

    Great article Rami!

  13. Neumann says:

    Hi, I get system.exception from line

    UserIdentity result = await onlineIdAuthenticator.AuthenticateUserAsync(serviceTicketRequest);

    And "result" is null. What could cause this?