Building on the recent post about signing in to Windows 8 with a Windows Live ID, we wanted to talk a bit about using SkyDrive from within new Windows 8 Metro style apps. While apps get some amount of "automatic usage" of SkyDrive to roam settings, and the apps themselves roam, we know developers are anxious to make it easy for customers of their applications to have data they create roam easily across devices. SkyDrive is a great way to do this as every Windows Live ID has a free cloud-based drive. This post talks about how developers can build Metro style apps that use SkyDrive storage from within the apps.This is our first post with code--expect more of those! Mike Torres, the group program manager of the SkyDrive Devices and Roaming team, authored this post. --Steven

Despite the trend towards multiple devices per person, many people still store all their important files on a single PC or storage device, and don’t have access to them from their other devices. These files are associated with a “place” – a desktop PC, a laptop, or a USB key. If you don’t have access to that place, you don’t have access to your documents or photos. Not only is accessing your files difficult (or sometimes impossible), sharing them with someone on a different network can be just as tricky.

Now, the cloud is making it possible (and easy!) for people to access their content from almost anywhere. Files are kept in a single place and are accessible from any device that connects to the internet from anywhere in the world. Sharing photos and collaborating in real-time on documents has also been made easier by having a single copy of the file in the cloud. However, the cloud has not yet reached mainstream usage for accessing content.

At the //build/ conference opening keynote, Chris Jones talked about how every Windows 8 customer will get a SkyDrive: a single cloud for everyone, where a person’s important files are centrally available, instantly accessible, and ready to share. There were also sessions during the conference covering how Windows 8 developers can cloud-power their apps through Live Connect and the Live SDK. When used together, Metro style apps can use the Live cloud to enable single sign-on with Windows Live ID and access personal data like documents, photos, and videos on SkyDrive with the user’s permission.

If you’re thinking about developing a Metro style app for Windows 8, this post shows how to enable single sign-on and access a user’s data on SkyDrive to make your Metro style app more personal – with the user’s consent, of course.

Connecting your apps to the Live cloud

As a developer, when you set out to build the world’s next great app, there are two classes of problems you’ll repeatedly face on any platform:

  • Enabling sign-in and sign-up for users. Users dislike having to sign in to websites and apps, yet developers know that engagement and loyalty to their app increases after a user has signed in. Sign-in allows you to personalize the user’s experience and to have your app remember the user’s data and customizations.
  • Easily bringing the user’s content into your app to power your experience. Seemingly simple tasks like asking the user to set a profile picture can quickly get complicated when you consider that users have their photos spread out across disparate devices and the cloud.

In Windows 8, we’ve addressed both of these problems for our own apps like Photos and Mail, and your Metro style apps are able to use the same platform and technology. Specifically, this is how we’ve addressed the above problems:

  1. The user’s cloud-based identity is now an OS primitive that is universally accessible to apps & websites with user permission for single sign-on. This means your app can inherit the signed in state of a user and their identity, and you don’t have to worry about a separate authentication process. This becomes especially important to enable #2.
  2. We’ve made access to the user’s content in the Live cloud available to apps using industry standard protocols such as OAuth for authentication & authorization, JSON as payloads for the data returned when accessing SkyDrive and Hotmail, and XMPP for interoperability with Windows Live Messenger. In addition, we offer the Live SDK for Windows 8 Developer Preview to make development on the WinRT easy, with integration into Visual Studio 11 Express.

After the first time a user connects your app to their Windows Live ID, the user will always have a seamless single sign-on experience from any Windows 8 PC where they are signed in with a Windows Live ID. The same extends to your website, where they get a single sign-on experience if they are signed in to their PC with a Windows Live ID or signed in to any site that supports Windows Live ID, such as Hotmail or SkyDrive.

The easiest way to use single sign-on with Windows Live ID and integrate SkyDrive content into your Metro style app is to leverage the Live SDK.

This does not mean that your application needs to use any of these services—their use is entirely up to the developer. There's no requirement that apps for Windows 8 sign on with a Live ID or use any specific cloud-based storage. These are simply services available to app developers to use as they choose.

Using the Live SDK in your app

First, if you haven’t done so already, you’ll need to install the Windows 8 Developer Preview and the Live SDK Developer Preview on your PC. This also installs Microsoft Visual Studio 11 Express for Windows Developer Preview. Second, you’ll need to visit the Windows Push Notifications and Live Connect app management site to configure your Metro style app to access the Live cloud. Follow the steps on the site to register your app to use Live Connect.

After your app is configured to use Live Connect, you’ll need to add a reference to the Live SDK. The Live SDK is available for development in C#, JavaScript, and VB. You can add it to your project by right-clicking the Project and selecting Add Reference, selecting Extension SDKs and from the list, and then selecting the entry for the Live SDK as shown below:

In a JavaScript application, you just need to add the following script reference to Default.html:

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

In C#, you should add the following reference to be able to leverage the Live SDK in your code:

 using Microsoft.Live;

And in VB, the following import statement is all it takes:

 Imports Microsoft.Live

This is just a good example of how we support programming in the language of your choice when building Metro style apps for Windows 8.

Using Windows Live ID in your Metro style app

To take advantage of Single Sign On (SSO) in your app, you’ll need to place a sign-in button somewhere in the app. When the user clicks the sign-in button, they will be automatically signed in if they are signed into their PC with a Windows Live ID, otherwise, they’ll be asked to sign in. After that the user is asked to provide consent to your app to access their data such as their SkyDrive photos. This workflow is handled automatically for you by simply adding the sign-in button. Notice that your customers still confirm sign-on to your application and are not automatically signed on—this is an important design consideration.

This is sample HTML for the sign-in button (note that it’s just a DIV and will need to be configured).

 <div id="signinbutton" style="width: 251px; margin-left: auto; margin-top: 40%; height: 64px; top: 0px;"></div>

Once you’ve added the sign-in button to the page, you’ll now have to hook it up since all the sample HTML did was allocate space for it on the page. And we need to configure that sign-in button with the scopes that your app needs. A scope defines what the app will have access to, and what the user has to agree to provide. To access SkyDrive data, your app will need these two scopes:

  • wl.signin - This scope enables automatic sign-in to your app.
  • wl.skydrive - This scope grants read access to the user’s SkyDrive albums and photos (note: your app should use wl.skydrive_update if you plan to upload content to SkyDrive).

This is sample JavaScript code for initialization, assuming that you’ve already created the sign-in button on the page with the id “signinbutton”:

function init() {
WL.init();

WL.ui({
name: "signin",
element: "signinbutton",
scope: ["wl.signin", "wl.skydrive"],
});
}

And this is sample JavaScript code for handling login:

WL.Event.subscribe("auth.login", onLoginComplete);

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

When the user clicks the sign-in button, they are asked to grant consent to allow your app to access their data. As noted earlier, if the user is signed into their PC with a Windows Live ID, then single sign-on is in effect and the user doesn’t have to sign in again. Instead they go directly to this consent screen:

Accessing SkyDrive content from your app

Once the user has granted access to their data to your app, OAuth 2.0 access tokens are returned to your app, and can then be used to make RESTful API calls against the Live cloud. Here’s what the code to access a photo looks like in JavaScript:

function downloadPicture(folderId) {

var path = folderId + "/files"

// Submit request
WL.api({ path: path, method: "GET" }, onEnumerateFolderComplete)

};

With a number of the above calls, an app can embed SkyDrive content into their experience such as PowerPoint slides, videos, Excel spreadsheets, or just plain photos, as shown below in a sample app.

As you can see, integrating single sign-on and user data from SkyDrive into your app requires just a few lines of code with the Live SDK. Your app will be more personal and can take full advantage of a user’s photos or documents in the cloud. The full source code for the sample app shown in this blog post can be downloaded from here.

For more information about using the Live SDK to enable single sign-on in your apps and take advantage of the SkyDrive APIs, watch Dare Obasanjo’s session, Power your app with Live services and Steve Gordon’s session, The complete developer’s guide to the SkyDrive API from the BUILD conference. You can also learn more by checking out http://dev.live.com and downloading the Live SDK Developer Preview. Happy coding!

Mike Torres