Monthly Archives: May 2013

Handling click event on elements within WinJS Listview ItemTemplate

Published May 29, 2013 5:26 pm

Typically – there is need to handle ‘itemInvoked’ event in a ListView. but there are some cases when you are looking for handling click event on a element defined in list view item template. Since item template is rendered multiple times for each item in the list view, how do we do this?

Let’s take an example where item template has two anchors. On click on each anchor, you want to tranverse to another page but parameter passed to the page will differ based on which anchor was clicked.

<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <h3 class="win-type-ellipsis date cell" data-win-bind="innerText: date"></h3>
        <h3 class="win-type-ellipsis hour cell" data-win-bind="innerText: hour"></h3>
        <a class="win-type-ellipsis counter1 cell" data-win-bind="innerText: counter1" ></a>
        <a class="win-type-ellipsis counter2 cell" data-win-bind="innerText: counter2" ></a>
    </div>
</div>

To do this, we need to register a wrapper itemTemplate function in code like this. That will enable us to register event handlers for counter1 and counter2 cells.

    listView.winControl.itemTemplate = this._itemTemplate.bind(this);
    _itemTemplate: function itemTemplate(itemPromise)
    {
        var self = this;
        var container = document.createElement('div');
        return itemPromise.then(function onitem(item)
        {
            return itemTemplate.winControl.render(item.data, container);
        }).then(function onrendercompete(c)
        {
            // register event listener
            var counter1Element = c.querySelector('.counter1);
            var counter2Element = c.querySelector('.counter2);
            counter1Element.onclick = self._oncounter1click.bind(self);
            counter2Element.onclick = self._oncounter2click.bind(self);
            return container;
        });
    },

In the event handler, we can use ListView.indexOfElement() method to get the item corresponding to the element clicked.

    _oncounter1click: function oncounter1click(event)
    {
        this._navigateToRequestsPage(event.currentTarget, 'counter1');
    },
    _oncounter2click: function oncounter2click(event)
    {
        this._navigateToRequestsPage(event.currentTarget, 'counter2');
    },
    _navigateToRequestsPage: function navigateToRequestsPage(itemElement, counterFlag)
    {
        var index = hourlyStatListView.winControl.indexOfElement(itemElement);
        var item = this.viewModel.items.getAt(index);
        var hour = item.date + 'T' + item.hour;
        WinJS.Navigation.navigate('/pages/itemDetails/itemDetails.html', { hour: hour, counterFlag: counterFlag});
    }

In summary, we saw how we can use wrapper item template function to register event handlers with elements declared within item template. We also saw the use and relevance of ListView.indexOfElement() function in the scenario.

Integrating your windows store app with https nodejs web service

Published May 16, 2013 12:56 pm

During development, we typically start implementing the web service as a http endpoint. At a later stage in development we need to make it a https endpoint. This is when we need to deal with SSL certificates.

Hosting the nodejs web api server at custom https endpoint like https://myapi.mywebsite.com, buying the SSL certificate for the api subdomain from a certificate authority, getting the required .pfx file from the files given by CA for the https nodejs server are interesting topics by themselves. Today, we are talking about generated a self-signed certificate for the localhost. This enables us to run the https nodejs web server on local machine and test the windows store application to consume the apis. This suffices for the development of the app & service while other things are required for taking the app to production.

I found this helpful tool through bing to generate self signed certificate for locahost, has the nice GUI and gives a pfx file as output. Saves going through the VS command line makecert details unless you already know about it.

https nodejs server is up and running given the localhost pfx file and its password.

var fs = require('fs'),
    https = require('https');

var options = {
    pfx: 'localhost.pfx',
    passphrase: 'your password',
};

https.createServer(options, function (req, res)
{
   ...
}).listen(xyz);

but when my WinJS client WinJS.xhr() calls fails to https://localhost:xyz/
This is because the certificate authority is not trusted by the localmachine – the dev box. The localhost certificate needs to be added to ‘trusted root cas’ using certificate mgr mmc. To do this:

  1. Launch mmc. Add ‘certificates’  MMC snapin. select local computer.
  2. Right click ‘Trust Root Certificate Authorities’-. Follow All Tasks->Import to import the localhost.pfx certificate here.
  3. Follow the instructions in the import wizard

Once done, WinJS client can successfully connect to the https://localhost:xyz nodejs endpoint.

Getting oauth authentication code for windows live account in windows store application

Published May 13, 2013 1:26 pm


We need to add support to login using windows live into the windows store application. The backend web service authenticates the user identity using one of the well known providers – google, facebook and now windows live.

WebAuthenticationBroker comes handy to get authentication code in the windows store app. authentication code is passed to the backend web service. sample code below:

Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync(
    Windows.Security.Authentication.Web.WebAuthenticationOptions.none,
    // redirect_uri parameter is encodeUriCcomponent('https://login.live.com/oauth20_desktop.srf')
    //  scope can be wl.basic others. refer other scope values here
    // client id is created by adding your application here
    new Windows.Foundation.Uri('https://login.live.com/oauth20_authorize.srf?client_id=&redirect_uri=https%3A%2F%2Flogin.live.com%2Foauth20_desktop.srf&response_type=code&scope=wl.emails'),
    new Windows.Foundation.Uri('https://login.live.com/oauth20_desktop.srf')).then(
       function (result)
       {
           if (result.responseStatus === Windows.Security.Authentication.Web.WebAuthenticationStatus.success)
           {
               var uri = new Windows.Foundation.Uri(result.responseData);
               var code = uri.queryParsed.getFirstValueByName('code');
           }
       }).then(null, function onerror(innerError)
       {
           // handle error
       });

Important notes:

  1. http://login.live.com/oauth20_token.srf api to get token from authentication code fails with 500 internal server error if HTTP POST is used as per documentation. HTTP GET has to be used instead. documentation is out of date. Refer this thread at msdn.

Sign in using Twitter in your app and protecting your twitter consumer secret

Published May 10, 2013 12:53 pm

Recently I am working on authentication and authorization for our backend service. The service will be integrated with some of our store apps. Obvious thing is to enable signup/signin for user using providers like facebook, google, twitter etc. I used oauth 2.0 apis to authenticate with facebook, google and added authorization functionality (to give access token for our apis) in the service.

As part of this effort, was looking at adding twitter support. Twitter oauth api requires consumer key and secret for any request. That means shipping your consumer secret with your app. quick search on net revealed that there were many other folks facing the same issue. thread 1, thread 2, etc.

Summary based on my few hours looking into this is:
1. Twitter does not support oauth 2.0 which support concept of intermediate auth code. When using this flow, way mobile client does not need to put consumer secret key in the client (app) code. Without this, consumer secret needs to be put in the client code. It can be obfuscated but risks associated with leaking your consumer secret, will not be completely mitigated.
2. I do wonder why twitter does not support oauth 2.0 yet?
3. There is likely way out if the whole authentication UI flow is moved to your app server side. client uses webview/browser to walk user through the authentication and authorization flow, starting with a page on your web site; eventually get the access token to the service. related thread

Currently – we will not support twitter sign in, and not try to move the whole signup/signin UI to server side. When the app is ported to say android, will revisit this.

Did you solve similar problem where you had a mobile app with your backend service, wanted to authenticate using well known providers but manage access token for your service apis yourself? Did you keep the signup/signin UI on your web server? Did you use azure ACS service all together to solve it for you?