Integrating Windows Live Authentication in your Website

This week Microsoft launched Windows Live Tools for Visual Studio 2008 and Visual Web Developer Express. Its been an exciting experience for me to work on this project. Since I worked on these controls, I thought of sharing my ideas with you about effectively using these controls in your website. I would specifically focus on IDLogin and IDLoginView controls.

1) Download the Windows Live Tools installer from here. The dll’s are installed in Program Files/Windows Live Tools/ directory. Once installed a new tab of Windows Live Tools is created in the Visual Studio toolbox which contains the Live controls.

Design View errors in visual studio

Since Visual Studio 2008 is in beta stage there might be different experiences depending on the configuration of the machines. For some reason if you have problems seeing these controls in the toolbox or there is an error in the design view saying error creating control or something like that, close the IDE, open the visual studio command prompt and issue a command devenv /setup. This will reset IDE environment and possible get rid of the errors.

2) Open Visual Studio 2008 and click New Website. Here you would find a new website template called ASP.NET Windows Live Website. This template has all necessary settings for running Windows Live controls on a page. If you don’t want to use this template for some reason, make sure you have necessary settings on your existing website before using the controls.

For IDLogin control first add a Script Manager to the page since the IDLogin control is an Ajax server control and uses an Update Panel internally to do asynchronous postbacks. IDLoginView has to specific requirements. For specific requirements for Silverlight Media and Contacts control please refer to the Live website here.

Using IDLogin for Windows Live Authentication

This control can be used to authenticate users with their Windows Live ID account. This account is same account used for passport authentication.

Drag the IDLogin control on the page. This control needs a Live Application ID and Secret Key. To get this, click the action list button (little arrow button)on right top control of the control in the designer view.

Click the Create new Application ID link which opens a browser control. Click register an application and fill the details. After submitting those details an Application ID is provided by Windows Live which is unique to your application. Escape key closes the window.

The new Application ID and Secret is stored in an Appsettings section in your web.config file. The control uses this section all the time to authenticate your application so do not delete this section.

If you already have a registered application, paste the Application ID in the value field for wll_appid key and Secret in the value field for the wll_secret key. Save the Web.config file.

The control is ready to go live :). Run the website, a SignIn link is displayed on the page which when clicked takes the user to the Windows Live login page.

The control supports two client side events as OnClientSignIn and OnClientSignOut and two server side evens OnServerSignIn and OnServerSignOut. Further information about these events can be found here.

Important points to remember:

After Windows Live redirects to the return url you provided, the IDLogin control performs a redirect to itself. This is done to avoid firing of the sign in and sign out events every time a page refresh is done by the user. Thus you need to be aware of this fact that a redierct is happening because of the control which you might want to handle in your code. Ill post more such points if I come across while I continue working on them.

Make sure you read the Known Issues section on this link. These issues would be resolved in later releases of the controls.

In the next post I will show how to use IDLogin and IDLoginView control to effectively use ASP.NET membership account and Windows Live account and create associations between them.


Post a Comment