(This article is written by Jolene and Qianting who are both student attachee in the Microsoft Innovation Center-Student Attachment Program)
Windows Live ID service is an authentication system that you can integrate with your website.
In order to implement authentication in your website via Live ID, you can get started by downloading the sample in the download page.
After you completed with the installation, you may run the sample with the instructions given here.
However, you may realize that the sample only introduces a simple example of integrating the Windows Live ID authentication. It will direct you back to the same page after you signed in.
We will do an example of integrating the Windows Live ID authentication and directs you into your website instead of directing back to the same log in page.
Registration
Before we start off, you have to register your web site with Microsoft and receive an application ID.
The information that you have to provide is described here.
In this case, the Application Name will be “Live Service Sample”. As we are running on localhost right now, the return URL is http://localhost/WebAuth/Sample/webauth-handler.aspx. Take note that the return URL is webauth-handler.aspx (the handler page). It is not the index page that you want the user to redirect to. The secret key will be any key that is between 16 and 64 characters. You have to remember your secret key as you will need it later. After submitting, you will be given the application ID which you will also need it later.
Getting Started
We can start doing this example by modifying the sample codes instead of starting a new web site. After you follow the instructions to run the sample earlier on, you can proceed to open the website in Visual Studio.
The next step to do is to add the App_Code folder in your web site. After adding the folder, right click the App_Code folder -> Add Existing Item. Add the WindowsLiveLogin.cs as given in the sample. This is the namespace that is required for the project to work.
Development
Open the web.config and make changes to the application ID and secret key:
Next, add a new web form to your project. This web form will be the page that will be directed to after you log in.
Add the following html between the body tag of your index.aspx source page:
<iframe
id="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>
This is the Live ID Sign-in control for users to sign out after they have signed in.
You can also add some text to the index page.
The design will be the following:
Add the following namespace in the index.aspx.cs:
Using WindowsLive;
This is the codebehind for the index.asp.cs from which you will be directed to after you signed in:
public partial class index : System.Web.UI.Page
{
const string LoginCookie = "webauthtoken";
// Initialize the WindowsLiveLogin module.
static WindowsLiveLogin wll = new WindowsLiveLogin(true);
protected static string AppId = wll.AppId;
protected string UserId;
protected void Page_Load(object sender, EventArgs e)
{
/* If the user token has been cached in a site cookie, attempt
to process it and extract the user ID. */
HttpRequest req = HttpContext.Current.Request;
HttpCookie loginCookie = req.Cookies[LoginCookie];
if (loginCookie != null)
{
string token = loginCookie.Value;
if ((token != null) && (token.Length != 0))
{
WindowsLiveLogin.User user = wll.ProcessToken(token);
if (user != null)
{
UserId = user.Id;
}
}
}
}
}
The purpose of the code is to grab the cookie and processed it by the WindowLiveLogIn class to get the user ID.
You can comment/delete the codebehind for the Default.aspx.cs:
This is because in the sample given, users will be directed back to the default.aspx page after they signed in. The users will be directed to the index.aspx page in this example. The index.aspx page will then grab the cookie and process it instead of the default.aspx page.
You can then proceed to modify the ‘src’ in the iframe tag in both the default .aspx and index.aspx source page with your application ID obtained during your registration:
The lines of codes in default.aspx source page can be deleted as they are not required:
The last step to do is to modify the codes in webauth-handler.aspx page.
We have to make changes to the following:
const string LoginPage = "default.aspx";
const string LogoutPage = LoginPage;
As we are redirecting the user to another page, we should change accordingly into the following:
const string LoginPage = "index.aspx";
const string LogoutPage = "default.aspx";
We also have to make changes to the last second line of code into the following:
res.Redirect(LoginPage);
User will be redirect to the login page “default.aspx” if they wants to sign in.
The website will then be sucessfully created. To test out your website, you can enter the URL: http://localhost/webauth/sample/default.aspx in your browser.
You can continue to enhance it in your other web sites with the steps given!
More information
There are also SDK download available for integrating the Live ID service in client application. To know more about Live ID service, you can access the msdn page here.