Thanks to the cloud, Windows 8 customers can work and play seamlessly across devices. By signing in to your PC or device with a Microsoft account and taking advantage of free personal storage in SkyDrive (see Connecting your apps, files, PCs and devices to the cloud with SkyDrive and Windows 8 for more info), your apps, settings and personal files are always with you. As an app developer, you can take advantage of these cloud capabilities by integrating with the Live SDK in their Metro style apps.

The Live SDK provides a set of controls and APIs that enable apps to integrate single sign-on (SSO) with Microsoft accounts and access info from SkyDrive, Hotmail, and Messenger on the Consumer Preview. There is also a corresponding SDK for Windows Phone, which provides a similar set of capabilities.

Getting started with the Live SDK

First, if you haven’t done so already, you need to install the Windows 8 Consumer Preview ,Visual Studio 11 Beta and the Live SDK Developer Preview on your PC. Second, you need to visit the Live Connect app management site to configure your Metro style app to access our cloud services.

After you configure your app, you need to add a reference to the Live SDK. The Live SDK is available for development in C#, JavaScript, and Visual Basic. The Live SDK currently doesn’t support C++, but you can download a complete code sample, SkypadCpp, which shows how to access SkyDrive from a C++ app.

To add the Live SDK to your project, right-click the Project and select Add Reference > Extension SDKs > the entry for the Live SDK.

In a JavaScript app, you just need to add this script reference to default.html:

<script type="text/javascript" src="ms-appx:///LiveSDKHTML//js/wl.js"></script>

In C#, add this reference:

using Microsoft.Live;

And in Visual Basic, the import statement is all it takes:

Imports Microsoft.Live

Single sign-on and the easy sign-in paradox

A key benefit apps get from integrating with the Live SDK is the ability to enable Single sign-on (SSO) with Microsoft accounts. A key challenge for apps is that users dislike being asked to sign up for new accounts or being repeatedly asked to sign in to apps and websites. But when a user signs into an app or website, they get a much improved user experience because the app now knows who they are and can be personalized to their specific needs and behavior. The fundamental contradiction where users don’t like performing a task that greatly improves their user experience is called the easy sign-in paradox.

Microsoft’s Metro style apps and websites avoid this paradox in Windows 8 by using the fact that Windows 8 users sign into their PCs with their Microsoft account. Microsoft’s apps such as People, Mail and Messaging and Microsoft websites such as Hotmail take advantage of Microsoft accounts so the users don’t need to sign into them after they are signed into the PC. This leads to zero click sign-in experience .

Your apps and websites can similarly use Microsoft accounts to get a zero click sign-in experience by using the Live SDK. But remember that the user has to grant your app permission to access their identity as a one-time step.

Even if you already have a user account system, you can connect your identity system to Microsoft accounts to create seamless sign-in experiences for your users. This gets even better if you have a Metro style app and a website because when the user has connected to either your app or your website, they don’t have to sign in to either again as long as they are signed into their PC with a Microsoft account.

A principle of the Live SDK is that you write the same code whether you are building a web app or a Windows 8 app. This means that the JavaScript code for signing in the user and accessing their profile info is the same in your Metro style apps written with JavaScript and in websites that use the Live SDK for websites. The next code snippet works with minimal modification on the web or in a Metro style app. The difference between the web and Metro style app code is that the WL.init call requires a client ID to be specified on the web and in Windows 8 this value is automatically obtained from the identifier of the current app that the operating system provides.

WL.init();
WL.getLoginStatus().then(function (response) {
onSessionChange(response);
});

function onSessionChange(response) {
var session = WL.getSession();
if (!session) {
WL.Event.subscribe("auth.login", onLoginComplete);
WL.ui({
name: "signin",
element: "signinbutton",
scope: ["wl.signin", "wl.skydrive"],
});
}
else {
greetUser();
}
}

function onLoginComplete() {
var session = WL.getSession();
if (!session.error) {
greetUser();
}
};

function greetUser() {
WL.api({
path: "/me",
method: "get"
}
).then(
function (result) {
document.getElementById("meName").innerText = "Welcome, " + result.name;
getUserPicture ();
});;
};

function getUserPicture() {
var session = WL.getSession();
var LiveConnectAPIUrl = "https://apis.live.net/v5.0";
document.getElementById("meImg").src = LiveConnectAPIUrl +
"/me/picture?return_ssl_resources=true&access_token=" + session.access_token;
document.getElementById("meImg").style.visibility = "visible";
};
;

This code example checks if the user is currently signed into the Microsoft account and if so, greets the user. On Windows 8 this code checks whether the user signed into a PC, while on the Web it checks if they are signed into any websites that support Microsoft accounts, such as Hotmail or SkyDrive. If the user isn’t signed in, the example creates a sign-in button that prompts the user for permission to allow the app to sign them in (WL.signin) and read access to their SkyDrive (WL.skydrive) . When the user clicks the button, the user is prompted to sign-in if they aren’t already signed into their PC with a Microsoft account after which they must consent to the app accessing their personal info. After the info is confirmed, the greetUser() and getUserPicture() methods enable the app to access the user’s name and display picture.

As you can see, integrating with the Live SDK makes it easy for apps that don’t have a user account system to seamlessly integrate with Microsoft accounts. In addition, apps that have their own identity system can easily bootstrap the signup process using info from the user’s Microsoft account.

Bringing the personal cloud to your apps with SkyDrive and Hotmail

In Windows 8, users can interact with their files in SkyDrive or their contacts in Hotmail using the SkyDrive and People Metro style apps. Both apps make it easy for other Metro style apps to integrate with them in a loosely coupled way by being data providers.

The SkyDrive Metro style app acts as a provider for the file picker, which means that any app that uses the file picker also has SkyDrive as a location to save or open files from as long as the SkyDrive Metro style app is installed. Similarly, the People app is a provider for the contact picker and can act as a source for apps that need to select one or more of the user’s contacts.

Getting data via the pickers is the way to go for one off access to the user’s data in the cloud where you don’t need deep integration of the cloud data in your app. In other cases, such as if your app provides a custom experience over all of the files of a particular type in the user’s SkyDrive, you need to integrate with the Live SDK.

Just as the same Live SDK JavaScript code works on a website or in a Windows Metro style app written with JavaScript, the same rule applies for apps written in XAML that target both Windows Phone and Windows 8. The next code snippet works mostly without modification on both platforms, except for 2 key differences. The first one is as that as with the JavaScript example, you must specify the client ID in the Windows Phone version of the code, and it is automatically determined in Windows 8. Secondly, to create async methods on Windows Phone you must use the Visual Studio Async CTP on Windows Phone.

Sign-in button in XAML

<Controls:SignInButton x:Name="btnSignIn" Content="SignInButton" HorizontalAlignment="Right"
Height="46" Margin="-1,0,6,0" Width="157" Scopes="wl.signin wl.skydrive"
SessionChanged="btnSignIn_SessionChanged" Visibility="Collapsed" />

C# code behind

private void btnSignIn_SessionChanged(object sender, 
Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
{
if (e.Status == LiveConnectSessionStatus.Connected)
{
App.Session = e.Session;
LoadPhotos();
}else
{
btnSignIn.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

}

internal async void LoadPhotos ()
{
LiveConnectClient client = new LiveConnectClient(App.Session);
LiveOperationResult albumOperationResult = await client.Get("me/albums");
dynamic albumResult = albumOperationResult.Result;
foreach (dynamic album in albumResult.data)
{
var group = new SkyDriveAlbum(album.id, album.name, album.name, @"ms-
appx:///Assets/DarkGray.png"
, album.description);
LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
dynamic pictureResult = pictureOperationResult.Result;
foreach (dynamic picture in pictureResult.data)
{
var pictureItem = new SkyDriveFileItem(picture.id, picture.name,
picture.name, picture.source, picture.description, picture.description, group);
group.Items.Add(pictureItem);
}
this.ItemGroups.Add(group);
}

}

This code snippet creates the sign-in button and if the user grants the app permission to access their data, it retrieves metadata about the user’s photo albums on SkyDrive. You can write similar code to access the user’s contacts and calendars in Hotmail.

Code samples

You can download the complete code for this blog post at Live SDK sample repository on GitHub. This code sample repository also contains code samples for interacting with the Live SDK from a variety of other platforms.

Next steps

I’ve shown you how apps can use the Live SDK to build seamless integration with the cloud using the same technologies as Microsoft’s own Metro style apps. There's a ton of potential integrating the Live SDK in your app. In addition to improving your app’s sign up and sign in experience, you can:

  • Build apps that take advantage of free storage in SkyDrive to store or access user’s content created in your app
  • Keep the user engaged with your app by adding events to their calendar, which draws them back to your app or website
  • Find the user’s Hotmail contacts that also use your app
  • Build real-time sharing experiences powered by the Windows Live Messenger network

To learn more about the Live SDK you can read our documentation, download the Live SDK, and ask questions on our forums.

--Dare Obasanjo
   Senior Lead Program Manager, Live Connect Platform