Windows Store apps and the Authentication Broker

“The web authentication broker is the broker or facilitator between your app and authentication. It consists of a set of APIs, a broker, and a web host. Your app uses the APIs to communicate with the broker. The broker creates a new web host process in a separate app container. The broker communicates with the app, assembles the user interface (UI), and controls the lifecycle of the web authentication host. The web authentication host renders the pages from the online provider’s website.” – MSDN

I recently built a Kanban task board for windows store that uses an agile project management system as its back end, for those unfamiliar with OnTime by Axosoft I highly recommend you check it out.

http://www.ontimenow.com/

They have a great Restful API to work with and like almost any of these today makes use of OAuth. OAuth is so prevalent these days it comes built into ASP.NET MVC templates and is as simple to setup as uncommenting some lines of code and entering your tokens from the providing application. In MVC you can add an authentication provider this way as quickly as you can register your app in their portal.

The question though is how do I do this in a Windows Store application? I am going to provide a high level overview of how to make use of OAuth in your windows store application but if you would like a more in depth look at how this all works MSDN has a great article about it here.

First and foremost you will want to bring in the namespace: Windows.Security.Authentication.Web. You can add this code by the way where ever it makes sense in your application, for example if you are using MVVM you can do this in a view model. Next we need to figure out what our OAuth server is. Lets get started by heading over to http://developer.ontimenow.com/authentication/authorization-code They have provided a nice site to view their API documentation we can see that we will need a client id to get started with this.

Uri callback = WebAuthenticationBroker.GetCurrentApplicationCallbackUri();
Uri resulturi;

var authUrl = new UriBuilder("http://yourontimeurl.com");
authUrl.Path += "auth";

// Add OAuth2 parameters
authUrl.Query = string.Format("response_type=code&client_id={0}&redirect_uri={1}&scope=read%20write",
WebUtility.UrlEncode("Your client id guid"),
WebUtility.UrlEncode(callback.ToString())
);

Above I am simply formatting the URL we are going to request from. Notice the redirect_uri parameter. The auth broker is going to listen for a specific URI in its browser window so by providing the redirect in this case you tell the folks at Axosoft where to redirect with your new auth token. So

1. Request Auth, and tell me where to push your browser to when im done.
2. The browser is pushed to the URL you specified and the auth broker knows its job is done and can move on.

You need to make sure when you add these parameters to your string format you use urlencode otherwise your uri will be improperly formatted. Now that we have our request URI we get to use the auth broker.

WebAuthenticationResult result = 
   await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, authUrl.Uri);

if (result.ResponseStatus != WebAuthenticationStatus.UserCancel |
    Uri.TryCreate(result.ResponseData, UriKind.Absolute, out resulturi))
{
   var token = new WwwFormUrlDecoder(resulturi.Query).GetFirstValueByName("code");
   await Login(token);
}

Now we await our auth request while the user enters their data and allows or denies our application. Once done the provider will redirect to a given redirect URI, in the case of OnTime we are telling them where to send it in the request. One the result returns we can check the response status to make sure the user didn’t just cancel out and we can try to parse the return URI. It should contain our request token which will let us get an access token to send with our future requests to the service. That’s it, as far as the web auth broker is concerned we are done the UI portion of OAuth is complete. The user has been sent to the providers website entered their username and password and told the provider to allow our application to connect. The provider then returned to us a request token which we can use to finalize our authentication and get an access token to use for future requests.

Hope this helps!