Haishi's Blog

Tutorial: knockoutjs MVVM for XAML programmers – sprint 1

2011-12-16T19:36:00.001-08:00

The goal of this series of posts is to help XAML programmers to transit to HTML + JavaScript world, while carrying best practices such as MVVM pattern over to the new world. In this series, we’ll build a simple but fully functional website that manage customers from different countries. We’ll also build CRUD operations on customer orders.

Series prerequisites:

Know basic MVVM pattern concepts.
Know basics of knockoutjs. I’ll go through some “recipes” of using knockoutjs, but you should have at least browsed through the wonderful tutorials they provided.
Know basics of writing JavaScript in OO style.
Know basics of HTML markups.
Know basics of CSS.
Know jQuery.
Know a server side technology that serve JSON objects, such as ASP.Net MVC, PHP, etc. We won’t need it until the last sprint.

Sprint 1 backlog:

Get organized! We don’t want to create a big JavaScript file that does everything. Instead, we’ll create a folder structure to holder smaller scripts for different purposes. This will also improve code-reuse as we go along.
Create a simple county repository that serves up list of countries (id and name)
Create initial view model
Create initial view with only one dropdown box to display list of countries.

Tools required for Sprint 1:

knockoutjs
A text editor such as Notepad
A browser

Without further ado, let’s roll! (Link to download source of sprint 1 is at the end of this post)

1-1 Create folder structure

The following picture and table show the folder structure I’m going to use. Obviously this is not the only way to get things organized. But if you’d like to follow along, I recommend you use the same folder structure to avoid confusions. And if you are familiar with ASP.Net MVC, you may find this folder structure has some resemblances with ASP.Net MVC folder structure – this is intentional so that later on it will be easier for us to merge this into a ASP.Net MVC project (if we choose to, of course).

Picture 1-1: Folder structure

Folder	Purpose
Content	Hold static assets such as style sheets and images.
Scripts	Hold various JavaScript files for example jQuery files and knockoutjs files will be under this folder.
Scripts \Formatters	Scripts that are used to format data. Think them as IValueConverter implementations in you XAML project.
Scripts \Repositories	Scripts that serve as client-side repositories. Client-side repositories hide service-invocation details. In the initial sprints we’ll use a mock repository that is not connected to any services at all. Later on we’ll switch to a real repository without impacting any other client code.
Scripts \SharedTemplates	Data templates. Think them as your XAML user controls, control templates and data templates.
Scripts \ViewModels	View models. No surprises here. They correspond to VM classes you would create with C# (or VB).
Views	HTML files.

1-2 Prepare the folder

Drop knockoutjs scripts to Scripts folder. I’m using 1.3.0 beta version for this series, but other versions should also work.
Create a new Index.html file under Views folder. This will be our view for now.

1-3 Create mock country repository

Create a countryRepository.js file under Scripts\Repositories folder. The mock repository defines one method: ListAllCountries, which returns a fixed set of countries:
```
function MockCountryRepository(){
    this.ListAllCountries = function () {
        return [{"id":1, "name": "Belgium"},
                {"id":2, "name": "Canada"},
                {"id":3, "name": "China"},
                {"id":4, "name": "United States"}];
    }
};
```
Test the repository. We’ll modify the Index.html code to add some testing logics for now. This is to make sure there’s no errors before we move forward. The code creates a new instance of MockCountryRepository, invokes its ListAllCountries method, and append result to a div (“#testCanvas”):
```
<html>
    <head>
        <title>KOMVVM</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script src="../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
        <script src="../Scripts/Repositories/MockCountryRepository.js" language="javascript" type="text/javascript"></script>
    </head>
    <body>
        <div id="testCanvas" />
        <script type="text/javascript">
            var countryRepository = new MockCountryRepository();
            var countries = countryRepository.ListAllCountries();
            for (var i = 0; i < countries.length; i++)
                $("#testCanvas").append(countries[i].id).append(":").append(countries[i].name).append("<br/>");
        </script>
</body>
</html>
```
Open Index.html in browser. If you see a warning of blocked content, allow blocked content (JavaScript) to execute. if everything is fine, you should see an output similar to this:

OK, repository is working! Now let’s create the view model.

1-4 Create view model

Create a IndexPageViewModel.js under Scripts\ViewModels folder. This will be our main View Model for the page.

function IndexPageViewModel(countryRepository) {
    this.countryRepository = countryRepository;
    this.Countries = ko.observableArray([]);
    this.CurrentCountry = ko.observable("");
    var self = this;
    this.initialize = function () {
        var def = $.Deferred();
        $.when(countryRepository.ListAllCountries())
        .done(function (countries) {
            self.Countries(countries);
            def.resolve();
        });
        return def;
    };
}

OK, I admit it, there’s quite a jump here. What happened here are several things:

the view model takes a country repository in constructor. In other words here we are injecting a country repository implementation. You’ll see later on how swapping repository implementation allows us to connect to real services without needing to worry about code changes in any view models or views.
the view model has a Countries property, which is a knockoutjs observableArray type – think it as ObservableCollection in your XAML/C# world.
the view mdoel has a CurrentCountry property, which is a knockoutjs observable type – think it implements INotifyPropertyChanged interface from C# world.
the view model has an initialize method, which return a jQuery.Deferred() object. This is not necessary for now. But later on when we invoke multiple web requests to initialize, we need this promise mechanism so that data binding occurs only when we tell knockoujs that we are ready (by calling def.resolve()).

1-5 Modify the view

Now we add a dropdown list to the view and bind it to list of countries:

<html>
    <head>
        <title>KOMVVM</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script src="../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
        <script src="../Scripts/Repositories/MockCountryRepository.js" language="javascript" type="text/javascript"></script>
        <script src="../Scripts/ViewModels/IndexPageViewModel.js" language="javascript" type="text/javascript"></script>
    </head>
    <body>
        <div id="testCanvas" />
        <select data-bind="options: Countries(), value:CurrentCountry, optionsText: 'name'">
        </select>
        <script type="text/javascript">
            var viewModel = new IndexPageViewModel(new MockCountryRepository());
            viewModel.initialize().done(ko.applyBindings(viewModel));
        </script>
</body>
</html>

First let’s see what’s happening in the <script> element: we created a new instance of IndexPageViewModel, providing a new instance of MockCountryRepository. Then we invoke initialize method on the view model, and when it’s finished we tell knockoutjs to perform data-binding (ko.applyBindings() call).

Under our test <div> we added a <select> element, which is bound to Countries property of the view model – no surprise here. If you don’t understand the syntax, read about knockoutjs again.

After the changes, reload the view and you should see something like this.

This concludes sprint 1! If you’d like to get source code of this sprint, you can download here.

ASP.NET MVVM with ASP.NET MVC 3 and knockout.js

2011-12-13T18:47:00.001-08:00

There’s continuously increasing attention to separating presentation layer (HTML + javascript) and business layer (ASP.NET, PHP, etc.) in web development. More and more developers are seeking for supports of MVVM pattern in their web projects. Among various offerings that exist today, knockoutjs is one of the most promising ones. It’s simple, it’s clean, and it has many core concepts of MVVM covered. On the server side, ASP.NET MVC 3 (and soon MVC 4) has gained great popularity in .Net communities. The purpose of this article is to explore a possible architecture that combines benefits of ASP.NET MVC 3 and knockoutjs and to provide a MVVM design pattern for common web project.

MVVM –> Entities + Views + View Models + (Repositories) + Services –> EVVMRS pattern

Before we go further, let’s reflect on what VM means in the MVVM pattern. In theory VM is an abstracted View, however in reality we often see VM contains other things such as business entities, entity repositories, and logics to invoke services. So here I’d like to make an explicit distinction: to get repositories and services out of VM and make them separate entities in the architecture. And here are the roles under this EVVM(R)S pattern:

E: Business entities. These are the entities you manage. Note the entities don’t contain business logics (well, maybe some basic data validations can be allowed).
V: Views. These are the UI presentations.
VM: View Models. These are the logical views that handles view interactions such as commanding, notifications, etc.
R: Repositories. These are where VMs get business entities. Repositories can also serve as the abstraction layer between VMs and Services.
S: Services. These are where business logics are encapsulated. Note the Services can be either local or remote. Repository layer provides a location-agnostic abstraction to VMs.

With this pattern, the architecture of a common web-based application can be illustrated as:

Where are Business Entities? Business Entities flow through this diagram and transform into different forms as they go. Specifically:

From Database to Service: Services need to interact with databases with database-specific APIs. It can be ADO.Net, Entity framework, cloud storage, or other data-access APIs. Services convert these records into Business Entities. And all business logics should be built on top of these entities.
From Services to Repositories: in the case that Services are local, Repositories can share the same Business Entity types with the Services. For remote Services, however, Repositories often don’t have direct access to Business Entity types defined on the Services. Instead, they’ll use some proxy types (such as the types you get when you add service references by using service metadata), or they’ll use totally different presentations such as XML or JSON objects (often seen in REST-ful calls). Although there are frameworks and tools that allow you to “share contracts” between your clients and servers, but the entities types on each side are still different physical types.
From Repository to View Modes. Usually View Modes share the same Business Entity types with Repositories.
From View Models to Views. View Models annotate Business Entities with change notification properties and supply annotated entities for UI binding to Views.

How to fit ASP.NET MVC 3 and knockoutjs into above pattern

Component	Role
HTML	View: screen markups and templates that knockoutjs can bind View Models to.
javascript “class”	View Models: knockoutjs defines View Models as javascript classes.
javascript	Repository: this part is up to you to define & construct. Repositories should encapsulate Service invocations.
JSON objects	Business Entities: JSON are used when Services return data to client/Repositories.
C# objects	Business Entities: These can be POCO types or Entity Framework types that are used in Service layer.
ASP.Net MVC Controller	Services: REST-ful services that return JSON objects.

Under this pattern, MVC Controller will also provide “hook-up” for Views – they return Views to browser. However under this pattern they’ll simply return “untyped” views:

public ActionResult Index()
{
   return View();
}

In parallel MVC Controller provides Service APIs to client. For example, to supply Business Entities as JSON objects:

public JsonResult lisCustomers()
{
      return Json(dataContext.ListCustomers(), JsonRequestBehavior.AllowGet);
}

The corresponding view (.cshtml if you are using razor) contains standard HTML and javascripts only. You’ll not use @model directive anymore. (Of course in the future Microsoft may as well get everything combined!) Instead, you’ll use knockoutjs and jQuery template syntax to create views and binding templates. I won’t go into details here as there are abundant resources on the web.

Entity Framework TPT Performance Quick Tips

2011-12-02T15:41:00.001-08:00

When using model-first, choose TPH over TPT when possible.
When using database-first, remove navigation properties from corresponding entities. Obviously there’s a tradeoff here, but to get TPT to a reasonable performance the sacrifice is necessary.
Create views of corresponding tables and create entities on the views.

Azure Toss!

2011-10-30T15:17:00.001-07:00

Visit CodePlex page today: http://toss.codeplex.com/

Overview

With the booming of personal devices (such as iPad and Windows 8 tablets) and cloud-based services (such as Azure and iCloud), we are entering an era of highly connected yet very loosely coupled applications and services. As ISVs and application developers, you’ll find your applications need to communicate with many other applications and services in a “non-binding” way - there are no hard commitments among the applications and services to work together. Instead, services and features are discovered and consumed on an “as needed” basis. Azure Toss provides an integration platform that allows your services and applications to work together more easily and more reliably without any binding contracts. There are three levels of “tossing” under Azure Toss, which I shall explain one-by-one:

Level 1 – Simple Toss.

In case you haven’t noticed, there’s a universal application integration mechanism on virtually all platforms – the clipboard. By allowing simple Ctrl + C and Ctrl + V (or Command C and Command V for Mac) key strokes, many applications are able to share information among them without even knowing each other. There’s no data contract negotiation, there’s no fixed binding, applications simply try to work with the data they get through clipboard. Azure Toss Level 1 gives you a cloud-based clipboard with additional features such as publish-subscribe pattern, access control and multi-cast. Your applications and services will be able to “toss” information over the cloud to other parties without any committed contracts.

Level 2- Semantic Fields.

Let’s consider a very simple integration scenario among applications – to send a picture to another application. This was not a problem in the old days when your application only needed to talk to a handful of other applications. You need to study the APIs provided by the other applications and to code for these interfaces. However, imagine you’ll need to interact with hundreds of application, many of which are not written yet! To satisfy the needs to all those interface requirements is just infeasible. The problem is that traditional data contracts and APIs define only syntax of data, not semantics of data. The picture APIs don’t say “I need a picture, in .png or .jpg format” (although the names of functions may suggest that to humans)”. Instead, what they are really saying is “I need a byte array with an associated utf-8 encoded string”. Without a business context, that contract can mean anything. Azure Toss semantic fields allow you to describe your data and API needs with actual semantic meanings. Your application will be able to say, “Hey, I can give you a .png image if you want.” And other applications can still reliably integrated with your application because they will clearly know what they are going to get is indeed a png image.

Level 3 – Semantic service discovery and consumption

Imagine you are writing a chat client that automatically translates chat messages to different languages of the participants, and you want to use an online translation service for the purpose. What you need to do nowadays is to search around for such services, study their licensing, pricing, capabilities and APIs, and pick a service to work with. This is a one-way commitment – you are committed to the service but the service is not committed to you (or even knows you). When the service changes, your application breaks. Azure Toss will help you to avoid making such commitment. You application will simply say, “I need A translation service that translates between English and Chinese.” And Azure Toss will take care of the rest. Of course you can be much more specific on your needs: “I need a translation service that is free, with a rating higher than 4, within my trusted service providers”. Yet you still don’t need to worry about any details, Azure Toss will find the service for you. And if you chose to, Azure Toss can even invoke the service for you and return you the result. With the help of semantic fields, Azure Toss will be able to tell you, “Your request of translating text from English to Chinese has been fulfilled, and here’s the result text, in Chinese language”.

Silverlight Quick Tip: High CPU usage of Bing map control running in OOB

2011-07-25T18:29:00.001-07:00

If you are experiencing high CPU usage when using Bing map control in an OOB Silverlight application, try to disable GPU acceleration. In my case changing the setting brought CPU usage from 70% to 2%.

p.s. To quickly identify which UI part is causing the most rendering cycles, enable redraw regions:

Application.Current.Host.Settings.EnableRedrawRegions = true;

This will make your screen blink a lot. The most flashing areas are the ones that hogging CPU cycles.

Also, with VS 2010 SP1, you can use Analyze->Launch Performance Wizard to profile your Silverlight application to identify high CPU users.

Tutorial–ASP.Net MVC 3, claim-based architecture and Windows Azure ACS (5)

2011-05-14T12:16:00.001-07:00

Finally we are ready to implement our final scenario. Again, the goal is to allow users to logon to our ASP.Net MVC 3 service site using either a local id, or any supported ids (Google, Windows Live, and Yahoo! to start with). And our service site should be shield from most of the complexity of federating with multiple identity providers.This part involves quite some changes in the STS code, as we are extending the STS project to serve as both a FP and a STS. However, the service project remains intact. There’s even no configuration updates. As far as the service project concerns, it’s talking to a trusted FP, and it doesn’t need to worry about anything else.

Part I: Relocate local STS.

In this part we’ll move the Default.aspx page to a sub-folder, and set up the sub-foder to use form authentication to preserve local STS functionality.

In STS project, create a new “STS” folder.
Move Default.aspx page into this folder and remove the file to TokenPoster.aspx. Renaming an ASP.Net page is a little tricky, you need to manually verify if all class names in both code-behind and aspx page are updated correctly. And you may have to reload the project to eliminate some confusions of Visual Studio.
Add a new Default.aspx page to the root folder of STS project. This page displays two options for user to pick from a local STS or ACS.
Add two buttons to the page:
```
<asp:LinkButton Text="Use Local STS" runat="server" ID="btnLocalSTS" 
            onclick="btnLocalSTS_Click" /><br />
<asp:LinkButton Text="Use Azure ACS" runat="server" ID="btnACS" 
            onclick="btnACS_Click" />
```

In code-behind, put in the following code:

protected void Page_Load(object sender, EventArgs e)
{
     if (!string.IsNullOrEmpty(Request.QueryString[WSFederationConstants.Parameters.Action]))
        ViewState["F-Action"] = Request.QueryString[WSFederationConstants.Parameters.Action];
     if (!string.IsNullOrEmpty(Request.QueryString["wtrealm"]))
        ViewState["F-wtrealm"] = Request.QueryString["wtrealm"];
}
protected void btnLocalSTS_Click(object sender, EventArgs e)
{
    try
    {
        Response.Redirect("STS/TokenPoster.aspx?wa=" + ViewState["F-Action"].ToString() + "&wtrealm=" + ViewState["F-wtrealm"].ToString().Replace(":", "%3A").Replace("/", "%2F"));
    }
    catch (Exception exception)
    {
        throw new Exception("An unexpected error occurred when processing the request. See inner exception for details.", exception);
    }
}

Modify web.config to put STS folder under form authentication protection:
```
<configuration>
  ......
  <location path="STS">
    <system.web>
      <authorization>
        <deny users="?"/>
      </authorization>
    </system.web>
  </location>
  <system.web>
    ......
    <authentication mode="Forms">
      <forms loginUrl="Login.aspx"/>
    </authentication>
    ......
```
Also, we need to disable default FAM redirecting by setting passiveRedirectEnabled="false"

After these modifications you should be able to use the local STS to logon. The code in step 6 is straightforward – it saves logon request when page is loaded, and it forwards the request to TokenPoster.aspx (former Default.aspx) when user clicks on the local STS link in the new Default.aspx page.

Part II: Re-enabling ACS.

In step 7 above we disabled FAM default redirecting. To put FAM back to work again, we’ll need to trigger the authentication process in the code. Modify code-behind of Default.aspx page:

protected void Page_Load(object sender, EventArgs e)
{
   if (!string.IsNullOrEmpty(Request.QueryString[WSFederationConstants.Parameters.Action]))
        ViewState["F-Action"] = Request.QueryString[WSFederationConstants.Parameters.Action];
    if (!string.IsNullOrEmpty(Request.QueryString["wtrealm"]))
        ViewState["F-wtrealm"] = Request.QueryString["wtrealm"];
        
    var fam = FederatedAuthentication.WSFederationAuthenticationModule;
    if (fam.CanReadSignInResponse(Request, true))
    {
        string url = fam.GetSignInResponseMessage(Request).Context;
        SignInRequestMessage requestMessage = (SignInRequestMessage)WSFederationMessage.CreateFromUri(new Uri(url + "?wa=wsignin1.0&wtrealm=" + url.Replace(":", "%3A").Replace("/", "%2F");));
        if (User != null && User.Identity != null && User.Identity.IsAuthenticated)
        {
            SecurityTokenService sts = new CustomSecurityTokenService(CustomSecurityTokenServiceConfiguration.Current);
            SignInResponseMessage responseMessage = FederatedPassiveSecurityTokenServiceOperations.ProcessSignInRequest(requestMessage, User, sts);
            FederatedPassiveSecurityTokenServiceOperations.ProcessSignInResponse(responseMessage, Response);
        }
    }
}

protected void btnACS_Click(object sender, EventArgs e)
{
    var fam = FederatedAuthentication.WSFederationAuthenticationModule;
    var signIn = new SignInRequestMessage(new Uri(fam.Issuer), "http://localhost:4011/ZerodistWeb_STS/");
    signIn.Context = ViewState["F-wtrealm"].ToString();
    Response.Redirect(signIn.WriteQueryString());
}

When ACS button is clicked, a sign in request is generated and forwarded to ACS. After authentication, ACS redirects back to the Default.aspx page (as configured in ACS). Then, in the Page_Load event, we examine if we can read a response message. If so, we’ll use our STS to issue a security token back to the MVC application.

Part III: Test run.

Compile and launch.
Type in http://127.0.0.1:81/Portal in address bar.
You’ll see the new selection page:
Click on “Use Azure ACS” link. You’ll be redirected to another IDP selection page:
Pick an IDP and log in. You’ll be redirected back to Portal page with granted access:
You can repeat the steps to try out Admin page with different IDPs. It should all work fine. Optionally you can also change the STS to grant Admin role to more user names (currently we only grant Admin role to user with name “Admin”).

What’s next?

Congratulations! You’ve made this far. That’s something, isn’t?

However, our quest is far from over. We still need to enable HTTPS, to enable token encryption, to extend STS to do actual authentication/authorization, to deploy everything on to Azure platform … so, keep tuned!

Tutorial–ASP.Net MVC 3, claim-based architecture and Windows Azure ACS (4)

2011-05-14T11:26:00.001-07:00

(Previous parts: part 1, part 2, part 3)

In this part we’ll implement the Azure ACS path in our architecture. We’ll temporarily disable the Local STS path. We’ll combine the two paths in part 5 of this post. In this part, our STS project takes over FP responsibility from the MVC 3 app and itself will morph into a combination of STS and FP in part 5. Of course we could have created separate services for the two roles, but for simplicity we’ll keep them together in the STS project.

Part I: Configure trust relationship on ACS

Here I assume you’ve got your Windows Azure account activated, have subscribed to ACS, and have created your ACS namespace. The steps in this section covers necessary settings to be performed on Windows Azure Portal –> Access Control Service page.

Click on “Identity providers” link and add Windows Live ID, Google, and Yahoo! as IDPs. Accept all default settings.
Click on “Relying party applications” link. Then click “Add” to add our STS project (NOT our web project) as RP.
Enter the following settings (accept default settings for unmentioned fields) and save:
- Name: [name of your choice]
- Realm: http://localhost:4011/MyWebApp_STS
- Return URL: http://localhost:4011/MyWebApp_STS/Default.aspx
- Error URL: (leave empty)
- Token format: SAML 1.1
- Token encryption policy: None
- Token lifetime: 600
Click on “Rule groups” and click the auto-generated role group. Click on “Generate” button to generate default set of rules. Note in this set of rules Windows Live ID doesn’t output “name” claim. This will cause problems in our STS, but we’ll leave it for now and come back later to fix.
At last, click on “Application integration” link and note done “WS-Federation metadata” URL.

Part II: Establish federation with ACS

Right-click on the STS project and select “Add STS Reference…”
Same as before, ignore the https warning and continue with the wizard.
Select “Use an existing STS” option, and paste in your ACS WS-Federation metadata URL, which you got from the last step in part I:
Select “Disable certificate chain validation” and click “Next”:
Select “No encryption” and click “Next”:
Accept all default settings and finish the wizard.

Part III: Test run

Compile and run. You should see the default page as before.
Type in http://localhost:81/Portal in address bar.
This time you’ll see an IDP selection page instead:
Pick either Google or Yahoo! (remember Windows Live ID is not working yet – we’ll fix next) and logon using your credentials.
And you’ll be granted access to the portal page with your user name displayed:

Part IV: Fix Windows Live ID logon

We couldn’t use Windows Live ID because it didn’t generate the name claim (http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name). Fortunately, ACS, as a FP by itself, allows us to define claim transformation rules. We’ll use a transform rule to translate the nameidentifier claim (http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier) into the name claim:

On Windows Azure portal, open the rule group we’ve reviewed before and click “Add” to add a new rule.
Use the following settings for the rule and save it:
- Claim issuer: Identity Provider - Windows Live ID
- Input claim type: Select type – http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier
- Input claim value: Any
- Out claim type: Select type – http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name
- Output claim value: Pass through input claim value
Now re-launch the solution and you should be able to logon with Windows Live ID now – the user name is a weird-looking string because it’s a direct copy of nameidentifer claim.

Part V: Switch between local STS and ACS

Switching back and forth between local STS and ACS only requires a couple of configuration change. To revert back to the scenario in part 3 of this post series, just modify the web.config file or the STS project and change passiveRedirectEnabled to false, and system.web authentication mode to Forms.

What’s next

In the next post we’ll finally complete the original design. Users will have choice to logon using a local id, or using any ids supported by trusted identity providers.

Tutorial–ASP.Net MVC 3, claim-based architecture and Windows Azure ACS (3)

2011-05-12T00:21:00.000-07:00

Part 1 and part 2 of this post series got use started with an ASP.Net MVC 3 application using claim-based architecture for identity management needs. In this post we’ll implement finer authorization controls by using role-based security. In this post, we’ll add a new administrative page and permit only users with “Admin” role accessing it.

Part I: Extend STS and AuthenticateAndAuthorizeAttribute

Modify CustomSecurityTokenService.cs in the STS project. We’ll put the user in “Admin” role if the user name is exactly “Admin”
```
protected override IClaimsIdentity GetOutputClaimsIdentity( IClaimsPrincipal principal, RequestSecurityToken request, Scope scope )
{
    ......
    outputIdentity.Claims.Add( new Claim( System.IdentityModel.Claims.ClaimTypes.Name, principal.Identity.Name ) );
    if (principal.Identity.Name == "Admin")
        outputIdentity.Claims.Add( new Claim( ClaimTypes.Role, "Admin" ) );
    else
        outputIdentity.Claims.Add(new Claim(ClaimTypes.Role, "User"));
    return outputIdentity;
}
```
Modify AuthenticateAndAuthorizeAttribute.cs in the web project. We’ll add a new Roles attribute where we can specify which role (for now we only support one role in the string) is required to authorize a user. Then, we’ll change authenticateUser to handle multiple realms (Portal and Admin). At last, we’ll give an easy implementation of authorizeUser to check against specified roles:
```
public string Roles { get; set; }
private void authenticateUser(AuthorizationContext context)
{
    var fam = FederatedAuthentication.WSFederationAuthenticationModule;
    var signIn = new SignInRequestMessage(new Uri(fam.Issuer), fam.Realm + context.HttpContext.Request.FilePath);
    context.Result = new RedirectResult(signIn.WriteQueryString());
}
private void authorizeUser(AuthorizationContext context)
{
    if (!string.IsNullOrEmpty(Roles) && !context.HttpContext.User.IsInRole(Roles))
       context.Result = new HttpUnauthorizedResult();
}
```

Part II: Add new Admin page.

Add a new AdminController to web application’s Controllers folder. Note how the controller is decorated with additional role requirement:
```
[AuthenticateAndAuthorize(Roles = "Admin")]
public class AdminController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}
```
Add a Admin folder to web app’s Views folder. Then add a new Index.cshtml as before:
```
<h1>Hi there, @this.Context.User.Identity.Name!</h1>
<h2> @this.Context.User.IsInRole("Admin")</h2>
```

Part III: Modify web.config

Now we change the web.config file to add Admin path as allowed audience. We’ll also change the realm definiation because we’ll dynamically append page path in AuthenticateAndAuthorizeAttribute class:

<microsoft.identityModel>
    <service>
      <audienceUris>
        <add value="http://localhost:81/Portal" />
        <add value="http://localhost:81/Admin" />
      </audienceUris>
      <federatedAuthentication>
        <wsFederation passiveRedirectEnabled="false" issuer="http://localhost:4011/MyWebApp_STS/" realm="http://localhost:81" requireHttps="false"  />
        ...

Part IV: Test run

Launch the browser. You can go to Portal page as before. However, when you try to access Admin page, unless you entered “Admin” as user name, you’ll get 401 error:

HTTP Error 401.0 – Unauthorized

Only after you entered “Admin”, you’ll be greeted to the Admin page:

What’s next?

Next we’ll chain up our FP with Azure ACS to work with other IDPs over internet such as Windows Live ID, Google ID, etc.

Tutorial–ASP.Net MVC 3, claim-based architecture and Windows Azure ACS (2)

2011-05-11T16:22:00.000-07:00

In this post we’ll continue with our scenario (see Part 1). We’ll set up WIF and ASP.Net MVC 3 so that only certain pages are protected by the claim-based architecture.

(Note: this series of post use simplified version of sample codes provided by MSDN.

Part I: Add a new controller and a new view

Add a new PortalController to web application’s Controllers folder:
```
public class PortalController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}
```
Add a Portal folder to web app’s Views folder. Then add a new Index.cshtml:

<h1>Hi there, @this.Context.User.Identity.Name!</h1>

Part II: Open up website to public access

First, turn off WIF’s built-in redirection of unauthenticated sessions by modifying web.config file:
```
<microsoft.identityModel>
    <service>
        ......
        <federatedAuthentication>
            <wsFederation passiveRedirectEnabled="false"
            ......
```
Then, we’ll allow all users to access the site:
```
<system.web>
    <authorization>
        <allow users="*"/>
    </authorization>
    ......
```

Part III: Protect Portal page

Add an AuthenticateAndAuthorizeAttribute.cs to web application (we’ll handle authorization in later steps):

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class AuthenticateAndAuthorizeAttribute: FilterAttribute, IAuthorizationFilter
{
    public void OnAuthorization(AuthorizationContext filterContext)
    {
        if (!filterContext.HttpContext.User.Identity.IsAuthenticated)
            authenticateUser(filterContext);
        else
            authorizeUser(filterContext);
    }
    private void authenticateUser(AuthorizationContext context)
    {
        var fam = FederatedAuthentication.WSFederationAuthenticationModule;
        var signIn = new SignInRequestMessage(new Uri(fam.Issuer), fam.Realm)
        {
            Context = getReturnUrl(context.RequestContext).ToString()
        };
        context.Result = new RedirectResult(signIn.WriteQueryString());
    }
    private void authorizeUser(AuthorizationContext context)
    {
    }
    private Uri getReturnUrl(RequestContext context)
    {
        var request = context.HttpContext.Request;
        var reqUrl = request.Url;
        var wreply = new StringBuilder();

        wreply.Append(reqUrl.Scheme);
        wreply.Append("://");
        wreply.Append(request.Headers["Host"] ?? reqUrl.Authority);
        wreply.Append(request.RawUrl);

        if (!request.ApplicationPath.EndsWith("/", StringComparison.OrdinalIgnoreCase))
        {
            wreply.Append("/");
        }

        return new Uri(wreply.ToString());
    }
}

Mark PortalController with attribute [AuthenticateAndAuthorize]
Update web.config file to update audienceUri and realm:
```
<microsoft.identityModel>
    <service>
        <audienceUris>
            <add value="http://localhost:81/Portal" />
        </audienceUris>
        <federatedAuthentication>
            <wsFederation passiveRedirectEnabled="false" issuer="http://localhost:4011/MyWebApp_STS/" realm="http://localhost:81/Portal" requireHttps="false"  />
             ......
```

Part IV: Test run

Compile and run. You can now browse to home view without authentication. Note user name is not filled yet.
Now go to http://127.0.0.1:81/Portal.
Because you are not authenticated yet, you are redirected to STS logon page. Logon as normal and you’ll gain access to portal page this time.

And here’s a breakdown of what happened:

User opens home page. Because the site is not protected, and WIF auto-redirection has been disabled, user is able to access the home page with no problem.
Now user enters address to portal page. The request is routed to PortalController by MVC. Because the controller is decorated with an IAuthorizationFilter attribute, ASP.Net MVC invokes the OnAuthentication method on the interface before controller method is invoked.
In OnAuthentication method, if user has not been authenticated, authenticateUser method is called, which generate a redirection result to FP.
Browser is redirected to FAM (our FP), then in turn FP triggers logon process as in previous scenario.
After FAM gets the token back, it again parse the claims and prepare an IClaimsPrincipal object for the application.

What’s next?

Next we’ll further extend the current web application to include an administrative page, which requires user to be in “Admin” role to access.

Tutorial–ASP.Net MVC 3, claim-based architecture and Windows Azure ACS (1)

2011-05-11T00:27:00.001-07:00

In this series of posts, I’ll present a step-by-step tutorial to build and deploy an ASP.Net MVC 3 application on Windows Azure platform. The application uses claimed-based architecture to allow users from different realms to logon to the site. In addition, the application also uses a local STS that manages users directly registered with the site. The overall architecture is as shown in the following diagram:

In this first post we’ll build the web application, a local STS, and a local Federation Provider:

I assume you’ve already got necessary software, including WIF SDK, ASP.Net MVC, Azure SDK etc. installed on your machine.

Part I: Set up basic project structure

Create a new Windows Azure Project. Don’t add any roles to it. We’ll add ASP.Net MVC 3 web role later.
Add a new ASP.Net MVC 3 empty project.
Add the ASP.Net project as a Web Role of the Azure project.

Part II: Add a MVC controller and a view

In ASP.Net project, add a HomeController.cs to Controllers folder:
```
public class HomeController: Controller
{
    public ActionResult Index()
    {
        return View();
    }
}
```
Add a Home folder under Views folder, then add a simple MVC 3 View Page (Razor) – Index.cshtml to the Home folder:
```
<h1>Hi there!</h1>
```
Compile and run. You should see “Hi there” message in browser. Note down the port number shown in browser address (it’s often 81).

Part III: Add local STS and establish federation between STS and the web application.

Right-click the web project, and select “Add STS reference…”. This will launch Federation Utility. Enter “http://localhost:81/” as “Application URI” (note the port number may differ on your machine):
Click “Next”. Ignore the https warning for now.
In next screen, select “Create a new STS project in the current solution” option, and click “Next”:
Click “Finish” to complete the wizard.

Part IV: Update web configuration and consume the claim.

Edit ASP.Net project web.config file. Add validateRequest=”false” attribute to <system.web><pages> element. And add <httpRuntime requestValidationMode=”2.0” /> to <system.web> element:
```
<system.web>
    ....
    <httpRuntime requestValidationMode="2.0" />
    <pages validateRequest="false">
    ....
```
Add a reference to Microsoft.IdentityModel. Set “Copy Local” to “True” and “Specific Version” to “False”. We don’t need to do this now, but the reference is required to package and deploy the application correctly to Azure server.
Modify index.cshtml to use claim:
```
<h1>Hi there, @this.Context.User.Identity.Name!</h1>
```

Part V: Test run

Compile and run. You’ll be prompted to enter a user name – any user name will work, and you can leave the password empty:

Click “Submit”, and you’ll be redirected to your home page with user name claim filled:

Wonderful! But what happened behind the scenes? Here is a breakdown of each step:

User opens web browser and navigate to the website (http://localhost:81/), which is Service Provider in the context of identity management.
The web.config file loads two addition HTTP modules: WSFederationAuthenticationModule (FAM) and SessionAuthenticationModule (SAM). These two modules serve as our local Federation Provider.
FAM detects unauthorized session by listening to AuthenticateRequest event and redirects user to configured identify provider. Examine the following segment of web.config. You can see the web application is configured to trust locally hosted STS (http://localhost:4011/MyWebApp_STS/), and it requires a name claime and a role claim:
```
<microsoft.identityModel>
    <service>
        <audienceUris>
            <add value="http://localhost:81/" />
        </audienceUris>
        <federatedAuthentication>
            <wsFederation passiveRedirectEnabled="true" issuer="http://localhost:4011/MyWebApp_STS/" realm="http://localhost:81/" requireHttps="false" />
            <cookieHandler requireSsl="false" />
        </federatedAuthentication>
        <applicationService>
            <claimTypeRequired>
                <claimType type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name" optional="true" />
                <claimType type="http://schemas.microsoft.com/ws/2008/06/identity/claims/role" optional="true" />
            </claimTypeRequired>
            ......
```
Now the user is redirected to STS logon page. The STS application is another ASP.Net application that is set to use form authentication to protect all the pages. So user is redirected to Login.aspx to logon.
The Login page doesn’t do much other than set the authentication cookie for whatever user name entered by user. Then the browser is redirect to the default.aspx page.
In default.aspx page, a RST (Request for Security) is sent to configured STS.
After the STS returnes RSTR, FederatedPassiveSecurityTokenServiceOperations.ProcessSignInResponse is invoked to write the security token to response stream.
FAM get the security token, verify it, parses claims in the token and uses HttpContext.User.Identity property to present an IClaimsPrincipal object to the application.
Now the MVC routing over, and because Home controller is the default controller and Index is the default action, our index view is eventually loaded.

What’s next?

Next, before we introduce more components, we’ll turn the routing flow around to allow only selected controller/action to be protected. This is a common scenario as you usually don’t need to authenticate user on home page, but only to ask user to logon when she tries to access some protected features.

A word of caution for C# (and C++) developers using Python: to declare a class member variable

2011-04-06T12:03:00.001-07:00

Consider the following Python code

class A:
    __dic = {}
    def populate(self):
        self.__dic["A"] = "a"
        self.__dic["B"] = "b"
    def dump(self):
        print self.__dic

a1 = A()
a2 = A()
a1.populate()
a2.dump()

What’s the result of the code? Well, it’s “{‘A’:’a’, ‘B’:’b’}” instead of empty dictionary as you may have expected.

It turns out that when you use above syntax __dic is actually defined as a static member of the class so it’s actually shared by all instances! To properly define an instance variable, you need to declare the variable within __init__() method of the class and prefix your variable with “self.”, as shown below:

class A:
    def populate(self):
        self.__dic = {}
        self.__dic["A"] = "a"
        self.__dic["B"] = "b"
    def dump(self):
        print self.__dic

a1 = A()
a2 = A()
a1.populate()
a2.dump()

What’s confusing is that simple types such as strings and numbers seem to have a different behavior:

class A:
    __val = "ABC"
    __num = 12345
    def populate(self):
        self.__val = "DEF"
        self.__num = 45678
    def dump(self):
        print self.__val
        print self.__num

a1 = A()
a2 = A()
a1.populate()
a1.dump()
a2.dump()

In above code, both __val and __num act as instance variables because dump of a1 shows “DEF” and “45678” while dump of a2 shows “ABC” and “12345”.

Slicing files dynamically: C# implementation

2011-03-21T16:47:00.001-07:00

This implementation is based on this paper by Athicha Muthitacharoen et. al (A Low-bandwidth Network File System). The main goal of the algorithm is to slice a file into different chunks so that changes to parts of files affect as less chunks as possible. For example, with a fixed chunk size, inserting one character at the beginning of a file will change all the chunks. With this algorithm, however, very often only the first chunk is detected as changed while remaining chunks are unchanged. A rolling Rabin signature of 48 bytes is used to detect boundaries of chunks.

class Program
{
    static void Main(string[] args)
    {
        Compare("46M.txt", "46M 2.txt", 0x1FFF);
    }
    static void Compare(string file1, string file2, ulong boundary)
    {
        string A = "";
        string B = "";
        using (StreamReader r = new StreamReader(file1))
        {
            A = r.ReadToEnd();
        }
        using (StreamReader r = new StreamReader(file2))
        {
            B = r.ReadToEnd();
        }
        Stopwatch watch = new Stopwatch();
        watch.Start();
        var listA = Slice(A, boundary);
        watch.Stop();
        long timeA = watch.ElapsedMilliseconds;
        watch.Reset();
        watch.Start();
        var listB = Slice(B, boundary);
        watch.Stop();
        long timeB = watch.ElapsedMilliseconds;
        int i = 0;
        Console.WriteLine(string.Format("Chunks in file '{0}'\t: {1}", new FileInfo(file1).Name, listA.Count));
        Console.WriteLine(string.Format("Chunks in file '{0}'\t: {1}", new FileInfo(file2).Name, listB.Count));
        Console.WriteLine("\n--------MATCHED CHUNKS--------\n");
        int matchCount = 0;
        foreach (string s in listA)
        {
            if (listB.IndexOf(s) >= 0)
            {
                Console.WriteLine("{0:D4}<-->{1:D4}  (size:{2:D8} bytes)", i, listB.IndexOf(s), s.Length);
                matchCount++;
            }
            else
                Console.WriteLine("{0:D4}    *     (size:{1:D8} bytes)", i, s.Length);
            i++;
        }
        Console.WriteLine("\n------------------------------\n");
        Console.WriteLine("Matched blockes {0} (out of {1})", matchCount, listA.Count);
        Console.WriteLine("Time used to process file '{0}'\t:{1:f3} (sec)", new FileInfo(file1).Name, timeA / 1000.0);
        Console.WriteLine("Time used to process file '{0}'\t:{1:f3} (sec)", new FileInfo(file2).Name, timeB / 1000.0);
    }
    static List<string> Slice(string s, ulong boundary)
    {
        List<string> ret = new List<string>();
        ulong Q = 100007; //Use a much large prime number in your code!
        ulong D = 256;
        ulong pow = 1;
        int windowSize = 48;
        for (int k = 1; k < windowSize; k++)
            pow = (pow * D) % Q;
        ulong sig = 0;
        int lastIndex = 0;
        for (int i = 0; i < windowSize; i++)
            sig = (sig * D + (ulong)s[i]) % Q;
        for (int j = 1; j <= s.Length - windowSize; j++)
        {
            sig = (sig + Q - pow * (ulong)s[j - 1] % Q) % Q;
            sig = (sig * D + (ulong)s[j + windowSize -1 ]) % Q;
            if ((sig & boundary) == 0)
            {
                if (j + 1 - lastIndex >= 2048)
                {
                    ret.Add(s.Substring(lastIndex, j + 1 - lastIndex));
                    lastIndex = j + 1;
                }
            }
            else if (j + 1 - lastIndex >= 65536)
            {
                ret.Add(s.Substring(lastIndex, j + 1 - lastIndex));
                lastIndex = j + 1;
            }
        }
        if (lastIndex < s.Length - 1)
            ret.Add(s.Substring(lastIndex));
        return ret;
    }
}

The core algorithm implementation is in Slice() method. To test the code, you’ll need a large text file (in my case I used a file named “46M.txt”, which has, well, 46M in size). Make a copy of the file and insert some new texts randomly at different locations and name the new file “46M 2.txt”. The code generated the following outputs with my test data:

As you can see the code successfully matched 1962 out of 1968 chunks despite of the random changes made in the second file. Because the code reads all contents into memory, it doesn't handle very large files. However extending the code to directly work off a stream should be an easy task for interested readers.

Karp-Rabin string matching algorithm: C# implementation

2011-03-18T17:39:00.001-07:00

static void Main(string[] args)
{
    string A = "String that contains a pattern.";
    string B = "pattern";
    ulong siga = 0;
    ulong sigb = 0;
    ulong Q = 100007;
    ulong D = 256;
    for (int i = 0; i < B.Length; i++)
    {
        siga = (siga * D + (ulong)A[i]) % Q;
        sigb = (sigb * D + (ulong)B[i]) % Q;
    }
    if (siga == sigb)
    {
        Console.WriteLine(string.Format(">>{0}<<{1}", A.Substring(0, B.Length), A.Substring(B.Length)));
        return;
    }
    ulong pow = 1;
    for (int k = 1; k <= B.Length - 1; k++)
        pow = (pow * D) % Q;
            
    for (int j = 1; j <= A.Length - B.Length; j++)
    {
        siga = (siga + Q - pow * (ulong)A[j - 1] %Q) % Q;
        siga = (siga * D + (ulong)A[j + B.Length - 1]) % Q;
        if (siga == sigb)
        {
            if (A.Substring(j, B.Length) == B)
            {
                Console.WriteLine(string.Format("{0}>>{1}<<{2}", A.Substring(0, j), 
                                                                 A.Substring(j, B.Length), 
                                                                 A.Substring(j + B.Length)));
                return;
            }
        }
    }
    Console.WriteLine("Not found!");
}

Complete Tutorial: Host WordPress on Windows and host Silverlight on WordPress (Part 2 of 2)

2011-02-25T11:56:00.001-08:00

Part 1

Set up Silverlight Plug-in for WordPress

Download Silverlight WordPress plug-in from here.
Extract the silverlight.php file in this package to your WordPress wp-content\plugins folder.
Go to http://localhost:81/wordpress/wp-admin. Log in as administrator. Then click on “Plugins” link to the left.
You should see “Sliverlight for WorPress” listed as one of the plugins. Click on “Activate” link below it:

Create Hello World! Silverlight Application

Create a new Silverlight Application, and let’s name it SilverWordPress. You don’t need to create a web host because we are hosting the application on WordPress (it doesn’t hurt to create one either).
Add something simple such as a TextBlock showing “Hello World”:

<TextBlock FontSize="60" VerticalAlignment="Center" HorizontalAlignment="Center">Hello World!</TextBlock>

Compile the solution. What we need is the SilverWordPress.xap file, which will be under your project’s Bin\Debug folder by default.

Hosting Silverlight Application on WordPress

Copy the XAP file you’ve got to your WordPress root folder. This is the default location where the plug-in looks for the file. You can change this location in plug-in settings.
Edit any page in HTML view and add tag:

[silverlight: SilverWordPress.xap]

Save the page and load it up!
The plug-in support additional parameters to adjust application size and initialization parameters – read its readme.txt for details.

Complete tutorial: Host WordPress on Windows and host Silverlight on WordPress (Part 1 of 2)

2011-02-24T15:43:00.001-08:00

This is the first part of two-part tutorial that provides detailed steps of setting up WordPress on a Windows system, and how to enable Silverlight applications on WordPress pages. The first part focuses on how to set up WordPress on a Windows system from scratch. You’ll be setting up Apache, MySQL, WordPress, and finally create your first locally-hosted page. In the next part I’ll guide you through the process of enabling Silverlight plugin and creating your first Silverlight application on WordPress.

Install Apache 2.2.17

Download Apache from official site. On the page, look for “Win32 Binary including OpenSSL…” link under “Apache HTTP Server (httpd) 2.2.17 section. Click on the link to download. Sometimes the mirror site might be down. Try some other mirror sits under “Mirror” section if that happens.
Launch the MSI and follow the wizard to complete installation. You can accept all default settings.
If you see error “could not bind to address 0.0.0.0:80”, most likely you have another service (maybe IIS) that is already listening port 80. You can assign a new port to Apache server:
1. Edit c:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf file. Change line “Listen 80” to some other port such as “Listen 81”.
2. Restart Apache2.2 service from Control Panel or use command “httpd –k restart” under C:\Program Files\Apache Software Foundation\Apache2.2\bin folder. You should see an Apache icon with a green arrow on your task bar if everything is fine
Launch your browser and go to http://localhost:81/ (or the port you’ve chosen). It should say “It works!”

Install PHP

Download PHP Windows installer here. I chose to use version 5.3.5, VC9 x86 Thread Safe version.
Follow the wizard to complete installation. When asked “Web Sever Setup” options, choose the first option – “Apache 2.2.x Module”.
In the next screen, browse to the folder that contains Apache httpd.conf file (default is at C:\Program Files\Apache Software Foundation\Apache2.2\conf).

Install MySQL

Download MySQL Community Server from here. I chose to use 5.5.9 Windows (x86, 32-bit) installer. You need to register a user id before you can download.
Follow the installation wizard. At the end of wizard select to launch Server Instance Configuration Wizard.
In Server Instance Configuration Wizard, select “Standard Configuration”. In next screen, check “Include Bin Directory in Windows PATH”. Then in the next screen specify a root password. Finish the wizard.

Download WordPress

This official instruction page contains very detailed instructions of installing WordPress. Follow the instructions on the page to complete this part. Or, you can following the instructions below, which are tailored specifically for Windows users.

Download WordPress from this download page. It’s a zip file that you can unzip the wordpress folder to C:\Program Files\Apache Software Foundation\Apache2.2\htdocs.

Now you can go to http://localhost:81/wordpress/wp-admin/install.php and to examine if PHP is working. If you see PHP source code is displayed, it means your PHP is not configured properly with Apache. In this case, you should examine httpd.conf file under C:\Program Files\Apache Software Foundation\Apache2.2\conf folder. Specifically, you should have these two lines at the end of the file:

PHPIniDir "c:\Program Files\PHP"
LoadModule php5_module "c:\Program Files\PHP\php5apache2_2.dll"

Make sure the settings match with your environment. Update the file if necessary, and restart Apache server then try again. If you see a page with “Create a Configuration File”, your PHP is working! Don’t click on the button yet, we’ll do that in a bit. While you are on this file, change the default page of Apache as well. This will allow your WordPress to load correctly as you navigate to the page URL. Find this line:

DirectoryIndex index.html

And append index.php to the end of the line. The modified line looks like:

DirectoryIndex index.html index.php

Create WordPress database and user

Launch a command-line prompt. If you’ve added bin directory in Windows Path (step 3 in “Install MySQL), you should be able to use MySQL commands right away. Otherwise you’ll need to go to the bin folder of your MySQL installation first.
The following is a screenshot of commands you use, as well as MySQL’s responses, to create your WordPress database. The highlighted parts are the parts you may want to change: “WordPressDB” can be any database name of your choice; “wpuser” can be any user id of your choice; and “password” can be any password you choose for that user.

Configure WordPress

Go to http://localhost:81/wordpress/wp-admin/install.php. Note the exact port and folder may differ depends your choices in above steps. If everything is fine, you’ll see this page:
Click on “Create a Configuration File” button. On next page, click “Let’s go!” button.
Enter MySQL database info you created above, and click on “Submit” button.
If everything is entered correctly, you should see the following page. Click “Run the install” button to continue:
Pick site title, administrator user name, password, and e-Mail. Then click “Install WordPress” button to install:
Success!

Consuming anonymous types across function boundaries

2011-02-15T11:51:00.001-08:00

As I was reading ASP.Net MVC 3 introduction, I noticed how HTML helper constructs an action link and provides parameters to the link. For example:

@Html.ActionLink(“Edit”, "Edit", new { id =123, name = "some name" })

Note the last parameter is an anonymous type. This makes sense because HTML helper can’t anticipate the exact information layouts to be passed. The anonymous type gives us flexibility of passing arbitrary key-value pairs using a simply syntax (after all a full-scale Dictionary could have been chosen but that doesn’t resonate with Razor’s simply-flow philosophy). However, as the anonymous type has method boundary, the parameter will be passed as an object to the consuming method. How to use the values contained by the anonymous type across function boundaries? There are several options, as presented below. Note that you don’t need to do any of the following when using ASP.Net MVC 3. The following is a generic discussion of different possible ways of consuming anonymous types across function boundaries.

Use reflection. The anonymous type is a real type, you can use regular reflection methods to retrieve its properties:

static void Main(string[] args)
{
  Test(new { id = 123, name = "ABC" });
}
static void Test(object val)
{
  Type type = val.GetType();
  foreach (var prop in type.GetProperties())
    Console.WriteLine(prop.Name + "=" + prop.GetValue(val,null));
}

Use a cast. This method uses the fact that two separately declared anonymous types are considered compatible types if they had same property layout:

static void Test(object val)
{
  var dict = Cast(val, new { id = 0, name = "" });
  Console.WriteLine("id=" + dict.id);
  Console.WriteLine("name=" + dict.name);
}
static T Cast<T>(object o, T type)
{
  return (T)o;
}

Use dynamic type. Dynamic type gives us the simplest syntax to consume a anonymous type passed in as an object, as shown in the following modified Test() method (with the price of losing compile-time type check):
```
static void Test(object val)
{
  dynamic dict = val;
  Console.WriteLine("id=" + dict.id);
  Console.WriteLine("name=" + dict.name);
}
```

Modifying global variables in a Python script

2011-02-11T11:46:00.001-08:00

Reading the following simple Python script, can you tell if the final output is ‘abc’ or ‘def’?

a = "abc"
def f():
    print(a)
def main():
    a = "def"
    f()
if __name__ == "__main__":
    main()

The result maybe surprising – it’s ‘abc’. Although the main() method explicitly set the global variable ‘a’ to value ‘def’ before calling the f() method, the value assignment took no effect.

Why? This is because the variable namespace. When you say a = ‘def’ in main() method, Python thinks you’ve declared a new local variable with name ‘a’. So ‘def’ is assigned to this new local variable instead of the global variable. To change the global variable ‘a’, you’ll need to add:

global a

before the assignment. The statement informs Python that the variable ‘a’ referred in the method is indeed a global variable, not a local variable.

Logging Python method calls using method decorators

2011-02-07T18:44:00.001-08:00

Python decorator is not necessarily the easiest concept to understand. This post provides a complete sample of using Python method decorator to control how method calls are logged. I hope you can use this sample as a reference while trying to understand the decorator concept. In the code I defined a class “C” that has three methods, “Func1”, “Func2”, and “Func3”. Each function is decorated by one of the two decorators, “tracing” and “logging”, defined in the code. “tracing” decorator logs method calls before and after a method is invoked; and “logging” decorator controls logging behaviors by returning different callables based on the Level parameter.

def tracing(F):
    def wrapper(*args):
        print("\nBefore calling '{0}'".format(F.__name__))
        F(*args)
        print("After calling '{0}'\n".format(F.__name__))
    return wrapper

def logging(Level):
    def actualDecorator(F):
        if Level =="Verbose":
            return tracing(F)
        else:
            return F
    return actualDecorator

Log_Level = "Verbose"

class C:
    @logging(Log_Level)
    def Func1(self):
        print("Calling Func1")
    @logging("None")
    def Func2(self):
        print("Calling Func2")
    @tracing
    def Func3(self):
        print("Calling Func3")

c = C()
c.Func1()   #Func1 is logged when global Log_Level is set to “Verbose”
c.Func2()   #Func2 overrides global flag with “None”
c.Func3()   #Func3 is logged always as it skips log level checks

Above code outputs this when executed:

>>>

Before calling 'Func1'
Calling Func1
After calling 'Func1'

Calling Func2

Before calling 'Func3'
Calling Func3
After calling 'Func3'

>>>

Two key points to take away:

In Python, a decorator is a callable that returns a callable.
A parameterized decorator is a callable that returns a decorator (so it’s a callable that returns a callable that returns a callable).

Setting up Python on IIS 7

2011-02-01T11:00:00.001-08:00

(This instruction is based the post here, with added details).

Make sure Python is installed properly (I’m using Python 2.7.1 in this example).
If you don’t have IIS CGI module installed, you can go to Control Panel->Programs and Features, and then click on “Turn Windows features on or off”. Then, in “Windows Features” window, make sure Internet Information Service->World Wide Web Services->Application Development Features->CGI is checked (IMG 1). Click “OK” to apply changes.
Launch IIS Manager (Control Panel->Administrative Tools->Internet Information Services (IIS) Manager).
Right click on “Default Web Site” and select “Add Application…”.
Enter an application Alias, and specify a local path where you’ll put your Python scripts (IMG 2). Click “OK”.
With the new application node selected, double-click on “Handler Mappings” in the middle panel. Then, click “Add Script Map…” link in “Actions” box to the right.
In “Add Script Map” window, enter “*.py” as Request Path, and your python.exe as Executable. Note two parameters (-u %s) are added to the command line. Give the mapping a name (such as “Python”) and then click “OK”.
Create a new Python script in your script folder in step 5. Note that you’ll need to return complete HTTP header for your script to work:
print "Status: 200 OK"
print "Content-Type: text/plain;charset=utf-8"
print
print "Hello Python!"
Launch browse and navigate to the script (http://localhost/PythonApplication/HelloPython.py) to see the result.

IMG 1: IIS CGI Module

IMG 2: Application settings.

IMG 3: Python mapping.

Quick Tip: Enum types in WCF DataContract - Enum value '0' is invalid for type …

2010-12-15T13:24:00.001-08:00

I’ve seen people proposing different solutions, which include:

1) Add value ‘0’ as one of the values of your enum type.

2) Set the enum value in the constructor of the containing type.

Neither is desirable in all cases and sometimes they don’t work anyway. What I’ve found working is to add IsRequired attribute on the enum types in your data contracts:

[DataContract]
public class SomeItem 
{
   [DataMember(IsRequired=true)]
   public ItemType ItemType { get; set; }
   …

Quick Tip: Show taskbar icon context menu at correct position

2010-12-10T16:56:00.001-08:00

There isn’t a straight-forward public method on either NotifyIcon or ContextMenuStrip that allows you to show taskbar icon context menu at correct position, however there is a “ShowContextMenu” private method on NotifyIcon that brings up its context menu at correct position:

MethodInfo methodInfo = typeof(NotifyIcon).GetMethod("ShowContextMenu", BindingFlags.Instance | BindingFlags.NonPublic);
methodInfo.Invoke(notifyIcon, null);

A simple model to measure customer perceived software quality by number of support calls

2010-11-17T00:43:00.001-08:00

This post proposes a simple probability-based model to estimate customer perceived software quality by measuring number of support calls. This model is suitable for measuring existing deployment base with active users. It’s not designed to predicate number of support calls, nor does it work well during active roll-out phase of a software product. Instead, the model uses non-intrusive measurements that are often collected by software vendors for various purposes to calculate how well the product is received by customers.

Perceived software quality

Many factors contribute to customer perceived software quality, including UI attractiveness, number of crashes, or level of complexity, etc. In this post we’ll use a simple measurement – the probability of an end user to notice a software defect. This is a very straightforward measurement because users are mostly discouraged by software defects. The more defects the users encounter, the lower customers’ satisfaction with the product will be. And, because bug-fixing usually takes up a major portion of engineering efforts, the measurement can also be correlated to engineering efforts required to improve software quality. At last, the measurement covers a variety of situations as it doesn’t assume the nature of the defects. The defects can be UI design problem, work flow problem, software bugs, or other defects such as documentation problems. This kind of abstraction matches well with the inclusive nature of customer perceptions.

Model of support calls

Assume during a certain period of time a software is shipped to X number of customers and the company receives Y number of support calls as results of software defects. The relation between X and Y can be described by this model (Y equals X multiple by a series of probabilities):

Where the list of probabilities is the set:

P1=Probability of installation (installation ratio)
P2=Probability of active usage
P3=Probability of the user to notice a software defect
P4=Probability of the user to report the defect

Obviously, a company usually has good ideas about value X and Y. If we can reasonably infer value P1, P2, and P4, then our measurement (P3) can be simply calculated by:

Now the question is how to figure out values of P1, P2, and P4.

P1: For a software that is sold separately, this value is usually 1 or very close to 1, except for the exceptional event when a user purchased your software and just put on the shelf.

For a software is purchased by download, you can calculate the ratio by dividing number of installations (if you trace the value by, for instance, number of active licenses) by number of total downloads.

For a software that is bundled with hardware or other software products, this number is a little hard to come by. You’ll need to contact your partners to collect number of sold units in total, and then use it to divide number of installations.

P2: Commonly this value is close to 1, and the reason is simple: if a user installs a software, she’s usually intended to use it. However, the assumption doesn’t always hold. Sometimes a user may have been motivated to install the software (for instance, lured by promotion or forced by company policy) but doesn’t actually need to use it. You should adjust the value to match with the specific situation of your software. On the other hand, if your software is equipped with user activity tracking capabilities (such as by a central license server or by phone-home reports), you can collect the probability from those data as well.

P4: 0.15, which means once a user sees an error, there’s 15 percent of chance for her to report the error back to the vender. This is a number provided by a product manager based on his experiences and previous studies. However, the number may be affected by other facts such as ease of reporting an error, if the product is mission-critical, etc. The value here is based on experiences on a small size end-user product only. If you, the reader, can contribute some numbers from existing study results I’d be much obliged.

A sample scenario

A company sells software that is bundled with a hardware device. The hardware vender sold 1 million copies of units in the course of 6 months, and the company has traced that 30% of users had installed the software, and most of the users (90%) who installed the software are active users. The company receives 30 support calls per day on average during the same period. From our model we can calculate that customer perceived quality is:

Which means roughly 1 out of 10 users will observe software defects while using the product. 10% is not necessarily too bad, but a value above 30% clearly indicates serious quality issues in the product.

Create a complex custom list view that supports data binding using Windows Form (C#)

2010-11-15T15:36:00.001-08:00

Out-of-box Windows Form provides only basic list box views that can display a list of texts or a list of check boxes. If you want to display richer content per list item you’ll need to use custom user controls or third-party controls. I’ve seen several different implementations of such list boxes, and here’s my suggested implementation. This list box supports:

Complete data binding. You can bind a list directly to the control and the control reflects list changes automatically. This behavior fits well in MVVM pattern.
Minimum custom code. There’s no custom paint or any convoluted control manipulation, the code is straight and simple.
No third-party dependency. Everything is plain .Net framework.

The Entity to be bound to the UI.

Our list box can be bound to a list of objects. Here I’ll use a very simple class, which contains only one “Name” field, as an example. As you can see, the class (named “A”) needs to implement INotifyPropertyChanged interface. The interface defines one PropertyChanged event that needs to be triggered whenever interested properties on the class instance are changed:

    public class A: INotifyPropertyChanged
    {
        private static int mCount = 0;
        private string mName;
        public string Name
        {
            get{ return mName; }
            set 
            {
                mName = value;
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs("Name"));
            }
        }
        public A()
        {
            Name = mCount.ToString();
            mCount++;
        }

        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        #endregion
    }

(The static private member “mCount” is for the purpose of generating a new name whenever an instance of “A” is created).

The UserControl to display a single instance of class “A”.

We’ll create a new UserControl (named "ADisplay") to display content of an “A” instance. The control provides an item view within our final list presentation, and of course you are free to use any supported controls and layouts to design this view. In this example, however, we’ll just create a UserControl with a single Label, which is used to display the “Name” property of "A". Bind the “Text” property of this Label to A.Name using DataBinding dialog. The object-based project data source is named “aBindingSource” in the following example.

Then, define a “A” property on the UserControl and set it as data binding source when the property is set:

        public A A
        {
            set
            {
                aBindingSource.DataSource = value;
            }
        }

That’s all we have to do for the item display. We’ll work on the list display next.

The list box with custom item display.

Our list box is a simple container that inherits from System.Windows.Form.Panel. We’ll set it’s AutoScroll property to “True” so we can get automatic scroll-bars as we add more items to the list. The following is the complete code of this custom control:

public class ComplexList : Panel
    {
        BindingList<A> mAs;
        public BindingList<A> As
        {
            get
            {
                return mAs;
            }
            set
            {
                mAs = value;
                if (mAs != null)
                {
                    mAs.ListChanged += new ListChangedEventHandler(mAs_ListChanged);
                    resetList();       
                }
            }
        }
        void resetList()
        {
            this.Controls.Clear();
            for (int i = 0; i < mAs.Count; i++)
            {
                this.Controls.Add(new ADisplay() { A = mAs[i], Dock = DockStyle.Top });
                this.Controls.SetChildIndex(this.Controls[this.Controls.Count - 1], 0);
            }
        }
        void mAs_ListChanged(object sender, ListChangedEventArgs e)
        {
            switch (e.ListChangedType)
            {
                case ListChangedType.ItemAdded:
                    this.Controls.Add(new ADisplay() { A = mAs[e.NewIndex], Dock = DockStyle.Top });
                    this.Controls.SetChildIndex(this.Controls[this.Controls.Count - 1], 0);
                    break;
                case ListChangedType.ItemDeleted:
                    this.Controls.RemoveAt(this.Controls.Count - 1 - e.NewIndex);
                    break;
                case ListChangedType.Reset:
                    resetList();
                    break;
            }
        }
    }

The code is straightforward – we declare a BindingList<A> property on the control. When the property is set, we’ll reset the list by removing all existing controls and create a new item view for each list member (resetList method). At the same time we’ll subscribe to ListChanged event and respond to different list changes to make UI reflect those changes. A couple of pointers:

I’m using DockStyle to dock the controls so that I don’t need to manually maintain controls’ positions. However since docking order is affected by control index, I need to shift control indexes by calling SetChildIndex() method.
For same reason, the removal index is reversed so correct item view can be deleted.

Drop the custom list box to a Form, create a new BindingList<A> list and bind the list to the control. Then, you can add, edit, remove list items and see the UI automatically refreshed.

CardSpace, Windows Phone 7 and cloud services

2010-11-04T21:44:00.001-07:00

CardSpace is a good concept and has been included in latest Windows systems. However, the adoption of CardSpace doesn’t seem to have picked up yet after several years since CardSpace had been first released. I think part of the reason is because CardSpace lacks of mobility. On one hand, users don’t really get the experience of pulling out a card from their wallets and swap it on a machine.On the other hand, users need to import their cards on all the machines they want to use, and this is very undesirable especially on public machines.

What if, we put cell phone into the picture? Users’ cards will be installed onto their phones so users can literally carry them around. When user click on CardSpace icon on a website, a notification is sent to the phone, and user will use the phone to pick and submit a matching card. Then the card is presented back to the website to finish logon process. This process solves both of above problems by providing a very intuitive and consistent logon experience, as shown in the following mockups:

1. User access a website protected by CardSpace. User clicks CardSpace icon to logon.

2. (Modified) Card selector is invoked. The selector prompts user to enter a cell phone number to forward logon request to.

3. A notification is pushed to phone. In case of Windows Phone 7, user may see a new logon request on her home screen as shown below:

4. User picks a matching card. The selected card is forward back to the Card selector on PC.

5. Finally the card is used to logon to the site.

During the process a couple of cloud-based services are required. The first one is a notification service that pushes logon requests to phones. The second one is a deliver service that security deliver the card from cell phone back to the card selector running on PC. Obviously the first service exists (and free by Microsoft). The second service is easy to make – it just needs to pass a xml payload securely. A public service on Azure can be provided to all such requests (hint hint).

I do intend to actually build such a prototype but I have too much work at hand. So, I’m providing the idea here instead. And I'll update the post if I ever get around to do it. Hope this can provide some foods for thoughts. And if you’d like to build a commercial solution based on this idea, I’d like to know as well :).

Tutorial – use ASP.Net membership provider with Azure table storage and Windows Phone 7 (2)

2010-11-04T08:45:00.001-07:00

Part 1

To continue with the previous post, we’ll enable Windows Phone 7 users to log on from their phones.

First, we’ll modify AccountController in TestRole project to introduce a new log on method for the phone users. The method takes user name and password as parameters, and returns log on result as a simple string. Note that we force to enable persistence cookie here because the phone clients will provide the authorization cookie back as security token when they try to invoke protected methods:

public ActionResult SimpleLogOn(string userName, string password)
{
     if (MembershipService.ValidateUser(userName, password))
    {
        FormsService.SignIn(userName, true);
        return Content("OK");
    }
    else
        return Content("The user name or password provided is incorrect.");
}

The next step is to create the phone application:

Add a new Windows Phone project to the solution.
In MainPage.xml, Replace the default “ContentPanel” Grid with a stack panel that contains a user name text box, a password box, and a logon button:

<StackPanel Grid.Row="1">
    <TextBox x:Name="txtUserName" />
    <PasswordBox x:Name="txtPassword" />
    <Button x:Name="btnLogon" Content ="Logon" Click="btnLogon_Click" />
</StackPanel>

Implement the button’s click event handler. We’ll use a HttpWebRequest to send the request. The cookie container is assigned to a page-level instance:

CookieContainer cookieJar = new CookieContainer();
private void btnLogon_Click(object sender, RoutedEventArgs e)
{
    HttpWebRequest request = HttpWebRequest.CreateHttp("http://127.0.0.1:81/Account/SimpleLogon?UserName=" + txtUserName.Text + "&password=" + txtPassword.Password);
    request.CookieContainer = cookieJar;
    request.BeginGetResponse(new AsyncCallback((result) =>
    {
        HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);
        using (StreamReader sr = new StreamReader(response.GetResponseStream()))
        {
            string res = sr.ReadToEnd();
            this.Dispatcher.BeginInvoke(() => MessageBox.Show(res));
        }
    }), null);
}

Set both the phone application and TestService project as solution start up projects. Then compile and run the solution. After the Azure web role has been initialized and running, use the phone to logon.

Now the scenario is complete, let’s verify if we really logged on.

Add a new method “DoSomething” to HomeController and mark it with [Authorize] attribute:

[Authorize]
public ActionResult DoSomething(string payload)
{
    return Content("Payload is " + payload);
}

This is a protected method that can’t be called without logging in first. If you type in “http://127.0.0.1:81/Home/DoSomething?payload=Test” in your IE address bar, you’ll be redirected to logon page. And only after you log on, you can invoke the method successfully. Now let’s modify the phone client to call this method.

Add a couple of more UI elements to the phone:

<TextBlock>Protected Call</TextBlock>
<TextBox x:Name="txtPayload" />
<Button x:Name="btnCall" Content="Call method" Click="btnCall_Click" />

Handle btnCall click event:

private void btnCall_Click(object sender, RoutedEventArgs e)
{
    HttpWebRequest request = HttpWebRequest.CreateHttp("http://127.0.0.1:81/Home/DoSomething?payload=" + txtPayload.Text);
    request.CookieContainer = cookieJar;
    request.BeginGetResponse(new AsyncCallback((result) =>
    {
        HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);
        using (StreamReader sr = new StreamReader(response.GetResponseStream()))
        {
            string res = sr.ReadToEnd();
            this.Dispatcher.BeginInvoke(()=>MessageBox.Show(res));
        }
    }), null);
}

Note I’m using the same cookie container, which is populated by previous successful logon requests. Now launch the solution again. If you click on “Call method” button directly you’ll see a long error page content displayed as text in a message box. After logon, however, you should be able to call the method and get expected result:

To recap what we’ve just done: We’ve switched to a new membership provide that uses Azure table as identity storage, and we’ve enabled Windows Phone client to logon and to consume protected methods. Both the phone and the website are protected by the same membership provider.