Live SDK provides a set of controls and APIs that enable applications to integrate single sign-on (SSO) with Microsoft accounts and access information from SkyDrive, Hotmail, and Windows Live Messenger on Windows Phone and Windows 8.

Live SDK support several platforms such as: iOS, Android and of course Windows Phone and Windows 8 applications using C# and JS.

In this demo I’ll show how to use Live SDK with Windows 8, so in order to follow this article you need to have the following installed:

1. Windows 8 – Download
2. Live SDK -Live SDK downloads

Also you can assist Interactive Live SDK

Download Demo Project

Step 1: Building Our App

I’ve create a C# Blank App called – “LiveSdkDemo”, and add a reference to “Live SDK” we just installed.

Step 2: Adding a “Sign In” Button

Before we can do anything with Live SDK we first need to “Sign In” using our Window Live ID. To do that we need to add the “SignInButton” control coming with Live SDK.

So I’ve added a using to Microsoft.Live.Controls and add “SignInButton” control, as you can see I’ve added couple more things, the first one is: Scopes:

Before your app makes requests of the Live Connect APIs to work with Live Connect info, in most cases you must get permission from the user to access that info or to create new objects on behalf of the user. In the Live Connect APIs, this permission is called a scope. Each scope grants a different permission level.

Live SDK Scope Types

In this demo I’m using three Scopes:

1. wl.signin -  Single sign-in behavior. With single sign-in, users who are already signed in to Live Connect are also signed in to your website.
2. wl.basic - Read access to a user's basic profile info. Also enables read access to a user's list of contacts.
3. wl.skydrive_update - Read and write access to a user's files stored in SkyDrive.

The second one is “SessionChanged” event this will let us know when we made a successful connection and when we received an Sign In error.

I’ve also add a TextBlock to display any errors coming from the SignIn operations.

<Page
    x:Class="LiveSdkDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LiveSdkDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:live="using:Microsoft.Live.Controls"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <live:SignInButton x:Name="btnSignin" Scopes="wl.signin wl.basic wl.skydrive_update" 
                           Branding="Skydrive" SessionChanged="OnSessionChanged" 
                           VerticalAlignment="Top" Width="141" HorizontalAlignment="Left" Margin="100,100,0,0" />
        
        <TextBlock x:Name="txtStatus" HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" VerticalAlignment="Center" Foreground="Red" FontSize="24"/>
    </Grid>
</Page>

Now to the code behind, we are checking if the connection status is “Connected” then doing nothing (for now) else we’ll display the error message on the screen.

private void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
{
    if (e.Status == LiveConnectSessionStatus.Connected)
    {
    }
    else
    {
        if (e.Error != null)
        {
            txtStatus.Text = e.Error.Message;

        }
    }
}

Now let’s run our application and see what’s happens.

You’ll notice that you receive the following error:

"The app is not configured correctly to use Live Connect services. To configure your app, please follow the instructions on http://go.microsoft.com/fwlink/?LinkId=220871."

The reason is before we begin building this app, you need to register it with Windows Live.  You can register your app by going to the application management site.

Then you have two steps in order to register your application:

1. You need to enter the application name and publisher (you can find it in “Package.appxmanifest” located under project solution).

After you click “I accept”, we’ll receive a new “Package name” and Client secret (I’ll talk about this in later posts).

For now all you need to do is copying the “Package name” from the site and adding it instead the current in Package.appxmanifest.

Now let’s run the application again, and after you click the “Sign In” button you’ll see this message: (this will only appear one time)

After clicking “Yes” you should see that “Sign In” changed to:

Step 3: Getting User Data

After we made a successful Sign In we can start using Live SDK, the first thing I’ll show is how to get user data from his Live Account.

When we create LiveConnectClient object (using our Access Token) we get the following abilities:

• GET—Returns a representation of a resource.
• POST—Adds a new resource to a collection.
• PUT—Updates a resource at the location pointed by the URL or creates a new resource, if it doesn't exist.
• DELETE—Deletes a resource.
• MOVE—Moves the location of a resource.
• COPY—Duplicates a resource.

For now I’ll use GetAsync method passing the string “me” telling Live SDK I want to receive my information.

this.liveClient = new LiveConnectClient(e.Session);

var myData = await this.liveClient.GetAsync("me");
txtStatus.Text = string.Format("Full Name:{0}\nFirst Name:{1}\nLast Name:{2}\nProfile Link:{3}\nGender:{4}\nLocale:{5}", myData.Result["name"],
                                    myData.Result["first_name"],
                                    myData.Result["last_name"],
                                    myData.Result["link"],
                                    myData.Result["gender"],
                                    myData.Result["locale"]);

Add getting my profile picture, same goes here first define the user I want to get his picture and then the string “picture”

var myPic = await this.liveClient.GetAsync("me/picture");
var bmp = new BitmapImage(new Uri(myPic.Result["location"].ToString()));
imgProfile.Source = bmp;

Full Code:

private LiveConnectClient liveClient;
private async void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
{
    if (e.Status == LiveConnectSessionStatus.Connected)
    {
        this.liveClient = new LiveConnectClient(e.Session);

        var myData = await this.liveClient.GetAsync("me");
        txtStatus.Text = string.Format("Full Name:{0}\nFirst Name:{1}\nLast Name:{2}\nProfile Link:{3}\nGender:{4}\nLocale:{5}", myData.Result["name"],
                                            myData.Result["first_name"],
                                            myData.Result["last_name"],
                                            myData.Result["link"],
                                            myData.Result["gender"],
                                            myData.Result["locale"]);

        var myPic = await this.liveClient.GetAsync("me/picture");
        var bmp = new BitmapImage(new Uri(myPic.Result["location"].ToString()));
        imgProfile.Source = bmp;
    }
    else
    {
        if (e.Error != null)
        {
            txtStatus.Text = e.Error.Message;
        }
    }
}

Accessing a user's public info

There is an exception to the rule that you must get the permission from the user before you can access his or her info: your app can access a user's publicly available info without requesting any scope. Public info includes the user's ID, first and last names, display name, gender, locale, and picture. The user's Messenger friends list is also available if the user has elected to make it public.

For example: I’ve changed “me” to my friend Gil Fink Live Id and here is the result:

Step 4: Uploading File To User Folder

In this part we’ll see how to upload a file to SkyDrive using Live SDK, first I’ve added to more buttons and a progress bar so we can see the upload progress.

The first button for picking a file and the second one for starting the upload process.

Pick a File

Because of SkyDrive file restrictions you can upload any file you want (you basically can but you need to change file extension to txt, doc or any kind of picture extension), so right now I’ve create a File Picker just for text files and word.

private async void btnPickFile_Click(object sender, RoutedEventArgs e)
{
    var fp = new FileOpenPicker();
    fp.ViewMode = PickerViewMode.List;
    fp.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    fp.FileTypeFilter.Add(".txt");
    fp.FileTypeFilter.Add(".doc");
    fp.FileTypeFilter.Add(".docx");
    var file = await fp.PickSingleFileAsync();

    if (file != null)
    {
        _file = file;
        txtFilePath.Text = file.Path;
        btnStartUpload.IsEnabled = true;
    }
    else
    {
        _file = null;
        txtFilePath.Text = string.Empty;
        btnStartUpload.IsEnabled = false;
    }
}

Start Upload

Once we got a file to upload we’ll first create new Progress object of type LiveOperationProgress using this object we’ll see the upload progress and assign it to our ProgressBar.

In order to upload the file we need to get the file Stream so just call – OpenStreamForReadAsync to get file stream.

Last we’ll use a built in method “BackgroundUploadAsync”, passing the following parameters:

• Upload Location
• File Name
• File Stream
• Overwrite Option
• Cancellation Token
• Progress Handler

private CancellationTokenSource cts;
private async void btnStartUpload_Click(object sender, RoutedEventArgs e)
{
    if (_file == null) return;

    btnPickFile.IsEnabled = btnStartUpload.IsEnabled = false;
    txtStatus.Text = string.Format("Uploading Backup...");

    this.pb.Value = 0;
    var progressHandler = new Progress<LiveOperationProgress>(
        (progress) => { this.pb.Value = progress.ProgressPercentage; });

    var stream = await _file.OpenStreamForReadAsync();
    this.cts = new CancellationTokenSource();
    LiveOperationResult result =
        await this.liveClient.BackgroundUploadAsync("/me/skydrive", _file.Name, stream.AsInputStream(), OverwriteOption.Overwrite, this.cts.Token, progressHandler);

    txtStatus.Text = string.Format("Upload Completed!");
    btnPickFile.IsEnabled = btnStartUpload.IsEnabled = true;
}

Step 5: Get SkyDrive Files

Now before downloading files from SkyDrive you need to know their ID, name is not enough for download using Live SDK, so to makes things simpler let’s first get all files from our SkyDrive. Getting all files using Live SDK will also bring the file ID so we’ll be able to save those files locally.

First I’ve create new object called – SkyDriveFile to save the important data we get from SkyDrive.

public class SkyDriveFile
{
    public string ID { get; set; }
    public string Name { get; set; }
    public string Type { get; set; }
    public string Link { get; set; }
    public DateTime CreationDate { get; set; }

    public SkyDriveFile(dynamic fileData)
    {
        this.Name = fileData.name;
        this.ID = fileData.id;
        this.Link = fileData.link;
        this.Type = fileData.type;
        this.CreationDate = Convert.ToDateTime(fileData.created_time);
    }
}

I’ve added a ListView to our XAML to present the files, now all we need to do is using the GetAsync method passing “me/skydrive/files”, this will return all folder and files under my main folder.

private async void btnGetFiles_Click(object sender, RoutedEventArgs e)
{
    this.cts = new CancellationTokenSource();
    LiveOperationResult Aresult =
            await this.liveClient.GetAsync("me/skydrive/files", this.cts.Token);

    var fileList = new List<SkyDriveFile>();

    dynamic data = Aresult.Result;
    foreach (var dd in data)
    {
        foreach (var d in dd.Value)
        {
            fileList.Add(new SkyDriveFile(d));
        }
    }

    listFiles.ItemsSource = fileList;
}

Step 6: Download File

Now that we got all file ids we can proceed to downloading them into our machine.

To download a file using Live SDK we’ll use the “BackgroundDownloadAsync” method almost in the same way we use the “BackgroundUploadAsync” method, but is time we need to pass the file id that we want to download and adding “/content” after it.

I’ve create a new file under Temp folder and using Stream.CopyToAsync method I’ve copied the stream I got from SkyDrive into the new file I’ve created.

private async void btnDownloadFile_Click(object sender, RoutedEventArgs e)
{
    this.pb.Value = 0;
    var progressHandler = new Progress<LiveOperationProgress>(
        (progress) => { this.pb.Value = progress.ProgressPercentage; });

    var file = listFiles.SelectedItem as SkyDriveFile;

    txtStatus.Text = string.Format("Downloading Backup...");
    LiveDownloadOperationResult result =
        await this.liveClient.BackgroundDownloadAsync(string.Format("{0}/content", file.ID), this.cts.Token, progressHandler);

    var stream = await result.GetRandomAccessStreamAsync();

    var temp = Windows.Storage.ApplicationData.Current.TemporaryFolder;
    //Creating new file under application temp folder.
    var localFile = await temp.CreateFileAsync(file.Name, CreationCollisionOption.GenerateUniqueName);
    //Get new file stream
    var fileStream = await localFile.OpenStreamForWriteAsync();

    //Copying SkyDrive file stream into local file.
    await stream.AsStreamForRead().CopyToAsync(fileStream);
    await fileStream.FlushAsync();
    fileStream.Dispose();
    stream.Dispose();

    txtStatus.Text = string.Format("File Save! - " + localFile.Path);
}

Here is the file under the Temp folder.

Download Demo Project

Enjoy