Creating a Web Messenger control from Scratch – Part 2

Following on from the first part of this article where we managed to register Ajax classes and get a basic outline that we can play around with for our new messenger User Control, we come onto logging in to web messenger. 

The basic framework that we setup in part 1 easily allows us to play around with certain settings, styling’s etc. As most people will no doubt be aware, Windows Live Messenger Client Wave 3 beta was launched last week, and our goal is get similar functionality in our User Control. There are a number of enhancements made to the Wave 3 beta, not least of which is visuals. Gone are the little MSN Men to be replaced by colors representing a users status. Green meaning that they are online, white offline etc. There are two modes for this, dots as shown in this image :-

messdots_thumb_25bd3612 Developer

or the contacts picture with the color outline as shown here, next to the cheesiest grin I’ve ever seen by Angus Logan :-

messpics_thumb_33234918 Developer

Now as this is web based we obviously won’t have the full richness of the client but we want to try and get as close as possible (and as close as my extremely limited design capabilities will allow).

Before we get to this point however, we need to login to Messenger. As part of the Messenger API there is a login control that we need to use (and we’ll get to in a second). First off however a word about logging into messenger and developing using visual studio. The messenger control (and for that matter all other Windows Live services) requires a fixed address to post back to. If you are using visual studio, no doubt you are aware that Visual Studio, by default, assigns random port numbers when you debug/run your application. This is of no use to the Windows Live Web Messenger Sign in control. Here’s a little tip I learned from Angus that allows you to get around this. When you have your website open in Visual Studio 2008, click on the project in Solution Explorer. In the Properties panel below you will see the properties for this site. You need to adjust two of these settings. First off change “Use Dynamic Ports” from “True” to “False”. Second, pick a static Port Number that you know isn’t being used by the system (I use 44444) as highlighted in the following image :-

messvs_thumb_07727f1c Developer

Another little tip is if you have a dynamic IP address rather than a static IP, simply create yourself a little hosts file mapping a website to your localhost machine (127.0.0.1) then you can use the web address rather than localhost.

Now that you have a static address, we can continue with the new and improved login control. Here is the standard sign-in control that will be put on your control :-

messsigninstandard_thumb_7bdcc1dc Developer

Not much to look at but a great improvement over the text-only sign-in control that is part of the Windows Live plugins for Visual Studio. The sign-in Control is really a class that is part of the Windows.Live.Messenger.UI namespace :-

messsigninconstructor_thumb_574b3458 Developer

As you can see from the constructor, you need to pass in four pieces of information when you instantiate this class. The first is the name of the Div where you want the sign-in control to be displayed. In our case, from the outline given in part 1, this is currently called “signinframe”.  The second parameter is a url to your privacy statement. You are required to give a privacy statement for your site. The third is a link to a channel page. The purpose of this page is to facilitate cross-domain communication between the application domain and the Windows Live service domain (“live.com”). You don’t have to make any changes to the code contained here, but the page must be present on your site to use the Sign-in Control and the rest of the Messenger Library. Finally you need to pass in a string containing language settings, for this demo it will be “EN-US”. If you’re not going to be hosting in the USA, you can find a list of all supported languages here.

So first off we need to create our privacy policy. This can be as simple as a fixed text html file which is what I’ve created :-

<html >
   <head>
   <title>Privacy Policy</title>
   <meta name="ROBOTS" content="NONE"/>
   </head>
   <body>
   <!-- The privacy policy for your Web site goes here. -->
   <div>No information shall be retained on this site.</div>
   </body>
</html>

 

The next thing we need to do is create the channel file. Again this is a standard html file (as opposed to aspx file) that contains some Javascript :-

 

 

 

<html >
   <head>
   <title>Channel</title>
   <meta name="ROBOTS" content="NONE"/>
   <script type="text/javascript">
   try
   {
   var hash = window.location.hash.substr(1);
   if (window.location.replace == null)
    window.location.replace = window.location.assign;
   window.location.replace("about:blank");
   var name = hash.split("/")[0];
   var win = null;
   if (name && (name != ".parent"))
    win = window.parent.frames[name];
   else
    win = window.parent.parent;
   if (win.Microsoft) {
    win.Microsoft.Live.Channels.Mux._recv_chunk(hash);
   }
   }
   catch (ex)
   {
   /* ignore */
   }
   </script>
   </head>
   <body></body>
</html>

 

 

We already have the Id of where we are going to put the sign-in frame and our language settings so now we’re ready to put the sign-in control on our site.

 
var msgruser = null;
var signincontrol = null;
 
function startMessenger()
    {
   var privacyUrl = 'http://localhost:44444/WLWebMessenger/WebMessenger/Privacy.htm';
   var channelUrl = 'http://localhost:44444/WLWebMessenger/WebMessenger/Channel.htm';
   signincontrol = new Microsoft.Live.Messenger.UI.SignInControl('signinframe', privacyUrl, channelUrl, 'en-US');
   signincontrol.add_authenticationCompleted(Delegate.create(null, authenticationCompleted));
    }

 

 

 

Here we declare a couple of variables, one to hold the Messenger user and one to hold the Sign in control class.  These are global variables. Next we define a function that will be called on startup. In there we define the URLs for our privacy policy and also the channel. The next line is what will actually display the Sign In Control on our form. Here we pass in the four variables discussed earlier. Finally we create a delegate that gets called once the user has completed authentication.

function authenticationCompleted(sender, e) 
    {
   msgruser = new Microsoft.Live.Messenger.User(e.get_identity());
   msgruser.add_signInCompleted(Delegate.create(null, signInCompleted));
   msgruser.signIn(null);
    }

 

This is the delegate that gets called. Once the user is authenticated, we have access to the users information, so we store that in our messenger user global variable and create another delegate that gets called once the sign in process has fully completed.

function signInCompleted(sender, e)
    {
        if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success)
        {
            var selectStatus = $get('selectStatus');
            selectStatus.selectedIndex = 6;
        }
    }

 

 

Once sign in has completed the above function gets called. All that we are doing here is checking whether sign-in has been successful and we can continue. SignInResultCode is an enumeration that defines two values, success and failure.

messsigninenum_thumb_36c3f4a6 Developer

Later on we will add the necessary code for sign in failure but at the moment we just want a bare bones sign-in routine.

All that we have to do now is register this Javascript file with the parent page and call the startMessenger() routine on startup. For this we go back to the code behind file for our User Control. In here we need to add the following :-

 

//For the moment add our messenger functions as a standard Javascript file
        if (!Page.ClientScript.IsClientScriptIncludeRegistered("messengerfns"))
        {
            Page.ClientScript.RegisterClientScriptInclude("messengerfns", "WebMessenger/Script/MessengerFns.js");
        }

 

This will add the script to our hosting page. Next we need to amend our pageLoad function so that it calls our startMessenger() routine :-

//Add some startup script
if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "Load"))
{
    string str = "var msgrui; function pageLoad(sender, args){msgrui = new Messenger.UI(); startMessenger();}";
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Load", str, true);
}

 

The only change we’ve made to this routine is to add the startMessenger(); at the end. And that’s it. We now have a Messenger Sign In control displayed on our and that works that we can start to play about with. In the next article in this series I will look more in-depth at the Sign In Control and how you can customize it and also add some more routines to the code we have so far.