Integrate Windows Live Messenger into a PHP Site
Last Revised On: 31/05/2009Before you get started, there are a couple of important prerequisites.
- You must have a Windows Live ID to complete this tutorial. If you don’t have one, get one here:
https://signup.live.com/ - You must have the following extensions enabled in your PHP configuration:
- hash or mhash
- mcrypt
- curl
To enable these extensions, browse to your PHP install and open PHP.ini at the root PHP directory. Search for ‘mhash’ and look for a line that looks like this:
;extension=php_mhash.dll
Remove the leading semicolon to enable the extension. For example:
extension=php_mhash.dll
Do the same for php_mcrypt.dll and php_curl.dll. They will all be located in this same section of the PHP.ini file. When you have enabled all three, save the file. Assuming you have made these changes locally for testing in a local environment, once you deploy your Live Messenger Application, you’ll need to make the same changes to the PHP.ini file on your server.
Step 1: Download the Windows Live Messenger Web Toolkit samples.
There is a link to the download on the right side of the page, Download Messenger Samples.
http://dev.live.com/Messenger/
Extract the files and browse to the PHP directory located in the WebToolkit > GettingStarted directory. This code sample includes everything you need to include Windows Live Messenger in your web application; however, there is a small amount of configuration required. Browse to the conf directory and open the settings.xml file.
Notice the appid, secret and messengerSecret elements. The values of these elements must be unique to you and your application. In order to get these numbers, you will need to create a Windows Live Services account. No worries, it’s free.
Step 2: Create a Windows Live Services Account
To create your account, go to the Azure Services Developer Portal (http://go.microsoft.com/fwlink/?LinkID=144070) and sign in using your Windows Live ID. Once you are authenticated, you will see the following page:
Click on the ‘+ New Service’ link at the top right. On the next page you have the option to create service components. Under the Azure Services Platform section, click on ‘Live Services: Existing APIs’.
The Create a Service Component page allows you to set service component properties. Enter a service component label and description. You can enter anything you want here; these are for your reference to identify your service components on the Azure Live Service Portal site. In the domain field, enter the domain name for your site. The login control uses Delegated Authentication and will verify that that the request to authenticate a user from your website originated from the domain you specify here. Then enter a return URL. This is the page that users will be directed to after they have signed in to the Windows Live Messenger Service.
You are then directed to a page specific to your service component. You should see the application ID and secret key that have been assigned to you. These are the values that need to be placed in the settings.xml file.
Copy and paste the Application ID to the appid element in the settings.xml file. Also copy and paste the secret key from the Azure Live Service portal page into the secret element in the settings.xml file. Save the file.
In addition to appid and secret key, the settings.xml also requires messengerSecret id (messenger application key). To get your messengerSecret id, browse to the following url after replacing {appid} with your appid.
https://consent.messenger.services.live.com/applicationsettings.aspx?appid={appid}
You will be directed to a page where you can see the messenger secret id (Messenger Application Key).
Copy and paste Messenger Application Key to the MessengerSecret element in settings.xml file. Save the file.
Step 3: How does it work?
The recommended way to provide Windows Live Messenger sign in functionality on a web site is by using the sign-in control. The sign-in control requires that your site implement delegated authentication. Delegated authentication means that a site must request consent from a user and the user must grant consent to the application. When consent has been granted, the application receives a consent token which is used to authenticate a user and log them in to Windows Live Messenger. Open index.php which is located at the root of the PHP directory using a code editing tool. Take a look near the top of the page. There are several things required to initialize the Windows Live Messenger application.
- Notice the php includes: lib/settings.php and lib/windowslivelogin.php. The settings.php file reads the settings.xml file where you added your application ID and secret key. The windowslivelogin.php file contains, amongst other things, logic to perform delegated authentication and initialize the application.
- A single line of PHP code creates an instance of the WindowsLiveLogin module using the application ID and secret that you set in the settings.xml file.
- Look at the <html> tag. There is an important namespace defined here for the UI controls.
- There is one Javascript file which needs to be included. This file includes a ‘loader’ class which is used to load Windows Live Messenger Toolkit components.
- A Javascript call is made to load the Windows Live Messenger styles via the loader class.
- In the <body> tag of the HTML, a <msgr:app> element initializes the application. There are a couple of important attributes of which to take note.
- id : an id for your application.
- application-verifier-token : this is a unique token created by a hash of your application id and the current timestamp. It could also include an IP address.
- token-url: the URL of the page containing logic to refresh / check the token.
- privacy-url : a link to your site’s privacy policy
- channel-url: this is provided with the sample and is necessary for cross domain communication between the Windows Live Service domain and your site.
- Lastly, there are tags for the profile, sign-in and tool bar controls. The msgr:if control provides conditional logic but does not have a physical presence on the web page which is visible to the user.
Note that when using the sign-in control (which the sample does), both the privacy-url and the channel-url must be set. A basic privacy page is included with the sample code, but if you already have a privacy policy on another page, simple change this URL to the existing page. Additionally, the channel page must be hosted on the same domain as the application.
Also, there can only be one instance of the msgr:app control per page.
Step 4: Test the application.
Open the index.php file located at the root of the PHP directory in a web browser. You should see the following:
If you are working locally, then you will not be able to login because the domain name from which you are accessing Live Services does not match that which you specified in your Windows Live Services project created in step 2.
If the sign in page loads and looks as expected (similar the to screenshot above), then you are ready to deploy the application at which time you will be able to successfully sign in.
Step 5: Deploy the application.
Copy all of the files located in the PHP directory to a location on your web server where you would like to host the sample application. If you enabled the hash or mhash, mcrypt and curl extensions in your PHP.ini file locally then you will need to make these changes on your server now.
When you browse to index.php, it should look similar to the following:
Download Solution Package From CodePlex Now
You can now sign in to Windows Live Messenger from this page. Once you’ve signed in, the page displays your profile information which includes your display picture, status and personal message text. Also look at the web toolbar at the bottom of the page. From here you can view your contacts and initiate Live Messenger conversations as well as change your status or sign out.
Download Solution Package From CodePlex Now