Connecting SkyDrive with your Windows Phone 8 App

Continuing with my on going series of posts on Windows Phone app development, I will help you to integrate SkyDrive in your app with this post. I will be explaining the steps using an app of mine which I had released some time ago and now is in the process of updating it with voice commands support and cloud storage. In my earlier two posts I had explained the steps that are needed for implementing voice commands and speech-to-text input.

To start with you need to create an app with Live Connect Developer Center for connecting SkyDrive with your apps. It acts as a one stop location forall the apps which needs to connect to SkyDrive, Outlook.com and Skype. Go to My Apps section from the dashboard and click on the Create Application link and you will be presented with a page like the one given below.

Just fill in the name of the app and change the language if you are target audience is not well versed with English. Upon clicking on the accept button your app will be created and you will be redirected to the settings page as shown below.

From this page you will get a client id and secret key which we will be using for the integration in our Phone app. Also don’t forget to enable the Mobile Client app option since we are are developing it for the phone, otherwise we won’t be able to connect. That’s all we need in setting up the app in Live Connect Developer portal and now let’s look at the code we will use for connecting to SkyDrive from our app. First of all you need to download Live SDK which is available here for download or you can install it using the Package Manager in Visual Studio itself.

I chose to install it using the latter option I mentioned above because it will also automatically add the reference to my project also. People going for the first option will need to manually add the following references to your project.

Also you should add the SignIn button to your toolbox, so that it will be available for drag and drop.

I am not a big fan of drag n dropping controls ever since I started writing HTML, so I will be directly writing the XAML for adding the controls and the namespaces which is as follows. First you need to add the namespaces in XAML

xmlns:live="clr-namespace:Microsoft.Live;assembly=Microsoft.Live" 
xmlns:liveControls="clr-namespace:Microsoft.Live.Controls;
                         assembly=Microsoft.Live.Controls"

After that you need to add the mark up for the in-built sign in button provided by the SDK

"False" Content="Button" ClientId="00000000440FD080" 
      Scopes="wl.signin wl.basic " Branding="Skydrive" 
      SessionChanged="lvConnect_SessionChanged" 
      Height="72" HorizontalAlignment="Left" Margin="138,268,0,0" 
      VerticalAlignment="Top" Width="160" />

Sign In button is a very useful control which encapsulates all operations and UI needed for authenticating the app. First you need to specify the ClientId which we got while creating the app in LiveConnect Portal. Next we need to grant some permissions for accessing the information on behalf of our application and in Live SDK its called scopes. In my app I had added two scopes,

wl.signin – with this scope users who are already signed in to Microsoft Account are also signed in to your app

wl.basic -  For read access to user’s basic profile info and his list of contacts

A SessionChanged event is also wired up which will be fired when a successful connection is made or when we get a sign in error. I had also added a text block to show the status after we initiate the connection and the code for it will be written inside the session changed event as given below.

 private void lvConnect_SessionChanged(object sender, 
         Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
 { 
     if (e.Status == LiveConnectSessionStatus.Connected) 
     { 
        Utilities.liveSession = e.Session; 
        Utilities.liveClient = new LiveConnectClient(Utilities.liveSession); 
        txtLiveConnectionStatus.Text = "Signed in."; 
     } 
     else 
     { 
        txtLiveConnectionStatus.Text = "Not signed in.";
        Utilities.liveClient = null; 
     } 
}

As I said earlier this event is fired after we enter credentials for authentication and if the operation is successful we will get a session object and using that we instantiate an object of LiveClient class which we will be using for storing data in the cloud. Now let’s run the app in the emulator and see how this pan out.

When we click on the sign in button we will be directed to a sign-in page, where we will key in the credentials. After that it will wait for the confirmation from the user for granting access to the items listed in the page and upon successful confirmation the control will be given back to our app and based on the return status, the caption is changed to sign out and also our textblock is showing the message for the successful operation. To summarize, you can see that you need very little code for integrating SkyDrive in your app and most of the headaches is handled by the SDK itself. In the next part I will be writing about the steps needed for writing and reading data from the SkyDrive. Till then  happy coding….