Windows Live Development - Authenticating users via Windows Live ID

With so many online services out there, you nearly claim a new online identity somewhere every day. You tend to use the same username and password couple for all of them, but sometimes your preferred username is taken, or your password does not meet the sites’ password policy. I reckon I have well over 100 online identities out there – I rely on the same 3-4 combinations of username and password, and it’s really messy. In this blog post I’m going to cover how to authenticate users of an ASP.NET application against Windows Live, using the SDK for Windows Live ID. I’m going use the built-in ASP.NET Membership mechanism and go from there.

I could have gone the OpenID way, but Scott Hanselman already did an example on OpenID, so I thought I’d try out Windows Live. Jeff Atwood asked the question, if we really need another username and password in the pursuit of the best authentication model for stackoverflow.com.

Conceptual idea of using Windows Live ID

tmpF3A8Windows Live ID, is the technology you should be quite familiar with when authenticating on Microsoft web sites, and Messenger. If you want to know more about what Windows Live ID is, take a look at this video from Channel9.

When using Windows Live ID, you redirect the user to the Windows Live login-page, with a return URL specified. When the user authenticates, Windows Live will redirect the user back to your site, and delivering a user id and a token. Here’s an overview of how it looks:

image

Getting your application ID to use Windows Live ID

To get started using Windows Live ID, first of all you need an application ID. Basically you need to sign up for one, and register your application. Go to https://msm.live.com/app/default.aspx and click ‘Register an Application’. (You can find Microsoft’s guide to this here: http://msdn.microsoft.com/en-us/library/cc287659.aspx)

tmpF3F5

Leave Domain Name blank. Save your self-chosen Secret Key for later use, and submit the form. When you see the confirmation page, your application ID is shown. Copy that, as we’re going to use it later.

In the return URL field, type the URL of your application followed by a name of a page to handle the Windows Live ID communication, like http://localhost/demoapp/webauth-handler.aspx.

Download and install Windows Live ID Web Authentication SDK

Microsoft has made it quite easy for ASP.NET developers to get started, by providing an SDK. Download it here: http://www.microsoft.com/downloads/details.aspx?FamilyId=24195B4E-6335-4844-A71D-7D395D20E67B&displaylang=en and install the SDK. By default it is installed here: C:\Program Files\Windows Live ID\WebAuth

From the SDK we need a class called WindowsLiveLogin, located in the App_Code folder of the sample. Keep this file in mind for a few seconds.

Start coding – create a new website

Open Visual Studio 2005/2008 and create a new ASP.NET website the way you want it. First we will add the WindowsLiveLogin.cs file to our AppCode folder. (C:\Program Files\Windows Live ID\WebAuth\Sample\AppCode\WindowsLiveLogin.cs).

Leave the default.aspx page, and put the following HTML in the markup:

<html><head><title>Windows Live IDtitle>head><body><iframeid="WebAuthControl"name="WebAuthControl"src="http://login.live.com/controls/WebAuth.htm?appid=<%=AppId%>&style=font-size%3A+10pt%3B+font-family%3A+verdana%3B+background%3A+white%3B"width="80px"height="20px"marginwidth="0"marginheight="0"align="middle"frameborder="0"scrolling="no">iframe><% 1:if (UserId null)

2: {

%>
<p>
This application does not know who you are! Click the <b>Sign inb> link above.p>
<%

1: }

2:else

3: {

%>
<p>
Now this application knows that you are the user with ID = "<b><%

1: =UserId

%>b>".p>
<%

1: }

%>
body>
html>

And this piece of code in its code-behind class.

using System; using System.Web; using System.IO; using WindowsLive; publicpartialclass DefaultPage : System.Web.UI.Page { conststring LoginCookie = "webauthtoken"; // Initialize the WindowsLiveLogin class.privatestatic WindowsLiveLogin wll = new WindowsLiveLogin(true); protectedstaticstring AppId = wll.AppId; protectedstring UserId; protectedvoid Page_Load(object sender, EventArgs e) { HttpRequest req = HttpContext.Current.Request; HttpApplicationState app = HttpContext.Current.Application; HttpCookie loginCookie = req.Cookies[LoginCookie]; if (loginCookie != null) { string token = loginCookie.Value; WindowsLiveLogin.User user = wll.ProcessToken(token); if (user != null) { UserId = user.Id; } } } }

Default.aspx will work as a login page. Users click the Sign-in button, and is redirected to Windows Live. When they authenticate, they’re redirected back to our handler page, that we will now create…

Create a new aspx page, and name it webauth-handler.aspx. Recall that this was the page we provided as the return URL when we registered the application at Windows Live.

This page will serve as the handler page for the user, when Windows Live redirects back to your site. Windows Live will post authentication specific values for you to use. Because this page is never seen by a user (we will send the user back where they began), we can simply remove all the markup.

Put the following code in your code-behind class for webauth-handler.aspx.

using System; using System.Web; using System.IO; using WindowsLive; publicpartialclass HandlerPage : System.Web.UI.Page { // Relative path to the login- and logoutpage.conststring LoginPage = "default.aspx"; conststring LogoutPage = "default.aspx"; conststring LoginCookie = "webauthtoken"; static DateTime ExpireCookie = DateTime.Now.AddYears(-10); static DateTime PersistCookie = DateTime.Now.AddYears(10); // Initialize the WindowsLiveLogin class.static WindowsLiveLogin wll = new WindowsLiveLogin(true); protectedvoid Page_Load(object sender, EventArgs e) { HttpRequest request = HttpContext.Current.Request; HttpResponse response = HttpContext.Current.Response; HttpApplicationState application = HttpContext.Current.Application; string action = request["action"]; if (action "logout") { HttpCookie loginCookie = new HttpCookie(LoginCookie); loginCookie.Expires = ExpireCookie; response.Cookies.Add(loginCookie); response.Redirect(LogoutPage); response.End(); } elseif (action "clearcookie") { HttpCookie loginCookie = new HttpCookie(LoginCookie); loginCookie.Expires = ExpireCookie; response.Cookies.Add(loginCookie); string type; byte[] content; wll.GetClearCookieResponse(out type, out content); response.ContentType = type; response.OutputStream.Write(content, 0, content.Length); response.End(); } elseif (action "login") { HttpCookie loginCookie = new HttpCookie(LoginCookie); WindowsLiveLogin.User user = wll.ProcessLogin(request.Form); if (user != null) { loginCookie.Value = user.Token; if (user.UsePersistentCookie) { loginCookie.Expires = PersistCookie; } } else { loginCookie.Expires = ExpireCookie; } response.Cookies.Add(loginCookie); response.Redirect(LoginPage); response.End(); } else { response.Redirect(LoginPage); response.End(); } } }

### The first login test

Now we’ve got everything setup as we should, and it should be possible to login using Windows Live. View the default.aspx page in your favorite browser, and let’s try.

First you will see out login page:
tmp9D6

Click the Sign in link, which will take you to Windows Live:
wlive_signin

Sign in with your Windows Live ID, and you will return to our login page – which will now welcome you and show your user ID:
wlive_signin

Now your user has authenticated against Windows Live, using the Windows Live ID. Now it’s up to you to handle the user’s Windows Live ID, which is what I’m going to blog about in part 2 of the Windows Live Development series here…


kick it on DotNetKicks.com

Martin H. Normark

Product and UX Hacker. Web and iOS developer.

Subscribe to Martin Normark's Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!