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.