Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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);
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
Anonymous
August 21, 2014
Hello, I'm trying your code, but I can't understand how to obtain use the "result" object ThanksAnonymous
August 21, 2014
The comment has been removedAnonymous
October 20, 2014
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 advanceAnonymous
October 20, 2014
@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.Anonymous
October 21, 2014
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!Anonymous
October 22, 2014
@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.Anonymous
October 22, 2014
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!Anonymous
October 22, 2014
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?Anonymous
October 22, 2014
@John: Yes, there are different types of service tickets that you can request with SSO which give access to our many different services.Anonymous
January 04, 2015
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-d0485122Anonymous
January 04, 2015
@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.Anonymous
November 02, 2015
Great article Rami!Anonymous
January 26, 2016
The comment has been removed