On Tuesday September 13rd, together with the unveiling of the Windows Developer Preview, our preview release of the Live SDK for Live Connect went public on the Microsoft Connect website.  The SDK includes a set of libraries that enable third party applications to connect with Windows Live and gain access to user’s profile as well as data stored in the Live cloud, including SkyDrive documents, Hotmail Contacts and Calendars, Messenger status, etc.  The libraries in the SDK support multiple platforms, including Windows Phone and Windows Metro style apps using JavaScript, C# and VB.  This will be the first of a series of how-to blogs that I will write about using the Live SDK and Live Connect for your apps.

In this first blog, I will go through the steps for creating your very first Live Connect powered Hello World Metro style app using JavaScript. 

If you’re a C# or VB developer, check out this post.

If you’re a Windows Phone developer, this post is for you.

Let’s get started.

1.  Download and install Windows Developer Preview following the instructions on the website.

2.  Once your machine is all set up and ready to go, sign into your PC using a Live ID account.  If you must use a domain account or a local account, you can connect your domain or local account to a Live ID account through Control Panel -> Users, click “Connect your Windows Live ID” and following the instructions.

3.  Sign up for the Live Connect technical preview.  Live Connect provides developers a set of controls and APIs that enable applications to integrate Single Sign On (SSO) with Microsoft connected accounts and enable users to access information from SkyDrive, Hotmail, and Messenger.

4.  Install the Live SDK by downloading and running LiveSDK.msi from the website.

5.  Start Visual Studio 11 Express and create a new project called HelloWorldWWA.  Choose the JavaScript -> Windows Metro style -> Blank Application project template.

      Tip: you can search for any installed programs by typing the program name in the start screen.

6.  Bring up the “Add Reference” dialog and choose “Live SDK for Windows Metro style HTML applications” under the Windows -> Extension SDKs tab.  Click “Add” and then “Close”.  Notice that a reference to LiveSDKHTML SDK is added to your project.

Expand the LiveSDKHTML reference node and you will see under the js node, a reference to wl.js file is added.

7.  Now open the default.html file.  Add the following script tag to the header:

    <script src="ms-wwa:///LiveSDKHTML.5.0/js/wl.js"></script>

      This adds the reference to wl.js in the html file.

8.  In the body of default.html, add the following HTML markup.

<body>
<div class="signin_button" id="signin"></div>
<div class="greeting" id="greeting"></div>
<div class="error" id="info"></div>

<script>
WL.Event.subscribe("auth.login", onLoginComplete);
WL.init();
var scopes = ["wl.signin", "wl.basic"];
WL.ui({
name: "signin",
element: "signin",
scope: scopes
});

function onLoginComplete(session) {
if (!session.error) {
WL.api({
path: "me",
method: "GET",
}, onAPICalled);
}
else {
document.getElementById("info").innerText =
"Error signing in: " + session.error;
}
}

function onAPICalled(result) {
if (!result.error) {
document.getElementById("greeting").innerText =
"Hello, " + result.first_name + " " + result.last_name + "!";
}
else {
document.getElementById("info").innerText =
"Error getting info: " + result.error;
}
}
</script>

</body>

   The 3 div elements provide hosting surface to the sign-in button, the greeting and the error message (if anything goes wrong).

     The code inside the script tag does the following things:

  • Subscribe to the auth.login event (WL.Event.subscribe()).  The event is fired when user logs into Windows Live and grants consent to your application.
  • Initializes WL (WL.init()), the JS library for Live Connect.
  • Creates the sign-in button (WL.ui()) with a list of scopes that the app needs to request user consent for.
  • When login completes, the onLoginComplete is invoked.  The app then makes a call to Live Services REST API via WL.api() to retrieve the user profile.  
  • When the api() call completes, the app can obtain the user’s profile information through the JSON object passed in to the callback function, in this case, the result object passed to the onAPICalled callback.
  • The app greets the user by displaying their first and last names.

9.  We’re almost there.  Before you can run this app, you need to register it with Windows Live.  You can register your app by going to the application management site and the following the instructions there.

10.  The last optional step is to add some css style to your div elements.  Here’s a basic example.  In you default.css file, add the following:

.signin_button
{
margin-left: 100px;
margin-top: 100px;
}

.greeting
{
margin-left: 100px;
margin-top: 50px;
font-weight:bold;
font-size: x-large;
}

.error
{
margin-left: 100px;
margin-top: 20px;
font-size: large;
}

Tip: Visual Studio does not support editing html through a visual designer, but you can view and edit the visuals through Microsoft Expression Blend 5 included in the Windows Developer Preview.  Start Blend and open the sample project.  You will see that the default.html file looks like the following in Blend’s designer view (the greeting and error strings are added only to show the visual effects in the designer).

WWABlend

11.  Now let’s run it.  Hit F5 in VS.  You will see that a sign-in button shows up.

Click the button, a dialog comes up asking user if they would allow the app to access their data.

 

12.  Click yes.  The dialog disappears and the sign-in button changes to “Sign Out” state.  At the same time a greeting is displayed with the user’s name.  Voila, your app has just successfully connected to Live and obtained user profile information from Live Services.

13.  Now here’s the best part.  Shut down the app, without changing anything, restart it.  You’ll notice that after loading, the sign-in button automatically switches to “Sign Out” state and the greeting is displayed.  This is what we call the Single-Sign-On for third party apps feature.  It enables the app to do instant personalization without user having to do anything, as long as he has consented to allow the app to access to his data.  Now, that’s cool!  Think about all the things you can do to personalize your app for the user with zero clicks.  This cool new feature will make your app piping hot…

For more Live SDK samples, visit our github site at https://github.com/liveservices/LiveSDK.