The Code

Launch Visual Studio 2012, and open the project located within the Chapter 13MyLiveConnectAppStart directory. Add a reference to the Microsoft.Live and Microsoft.Live.Controls libraries, which we briefly touched upon at the end of Recipe 13-1 and depicted in Figure 13-2.

Open the MainPage XAML file, and add a namespace declaration for the Microsoft.Live.Controls library within the phone:ApplicationPage element:

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

The only control available to add to the MainPage from the Microsoft.Live.Controls library is the SignInButton, which will be used to initiate the sign-in process of the user’s Microsoft account. Within the MainPage markup, replace the comment <!-- Add the Live Signin button here --> with a SignInButton as follows:

<live:SignInButton
        Name="signInButton"
        Grid.Row="1"
        ClientId="{Binding ClientId, Mode=OneTime}"
        Scopes="wl.signin wl.basic wl.birthday"
        Branding="MicrosoftAccount"
        TextType="SignIn"
        SessionChanged="signInButton_SessionChanged"/>

The SignInButton allows us to specify the scopes we want to use right within the button’s markup. To specify multiple scopes, enter them in the Scopes property, making sure to separate each scope with a single space. For this example, we will request the user to enable sign-in, as well as enable access to the user’s birthday, basic profile information, and contacts information from within the application.

The Branding property allows us to select which logo to display on the SignInButton. There are four available logos: Messenger, MicrosoftAccount, Outlook, and SkyDrive. TextType allows us to select which text to display: Connect, Custom, Login, and Signin. If Custom is selected, then we will need to provide text for two additional properties, SigninText and SignoutText, on the SignInButton. You can choose whichever branding and text type you prefer. They are simply cosmetic changes and do not affect the behavior of the SignInButton.

Additionally, we will need to include an event handler for the button’s SessionChanged event. This will be the event that will be raised when the session is instantiated. Within the ContentPanel grid, add a few TextBlock controls to display the user’s name, birthday, and current sign-in state. Add a HyperlinkButton so that we can provide a link to the user’s online profile page.

In the MainPage code-behind, we will first need to add the following using directives:

using Microsoft.Live;
using Microsoft.Live.Controls;

Next, we will need to include code within the SessionChanged event handler to check whether a Live Connect session was successfully connected (Listing 13-1). If the session is connected, this means the user entered valid Live ID credentials during the authentication process and the user consented to enable access to the information requested within the application.

Listing 13-1. Check to Determine Whether We Are Successfully Connected in the SessionChanged Event of the SignInButton

private LiveConnectClient client;
private async void signInButton_SessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
{
    try
    {
        if (e.Status == LiveConnectSessionStatus.Connected)
        {
            client = new LiveConnectClient(e.Session);
            LiveOperationResult operationResult = await client.GetAsync("me");
            App.ViewModel.LoadUserInfo((dynamic)operationResult.Result);
        }
        else
        {
            App.ViewModel.ResetUserInfo();
        }
    }
    catch (LiveConnectException exception)
    {
        App.ViewModel.ResetUserInfo();
        MessageBox.Show("An error occurred signing in: " + exception.Message);
    }
}

Notice that we did not have to write any code to handle user login or to manage the authentication flow. This is all handled for us within the SignInButton. We simply need to track the current state of the Live Connect session. As well, we can easily obtain the Session, Status, and Error information from the LiveConnectSessionChangedEventArgs parameter that is passed into the SessionChanged event.

We simply check the Status to determine whether the session was successfully connected and make the appropriate calls to the Live Connect APIs to obtain the information we need within the application.

The LiveConnectClient encapsulates the web service calls to the available REST APIs to manage a user’s Live account. The LiveConnectClient class includes async methods (Figure 13-7) for each of the HTTP verbs that are used with REST-based services: GET, POST, PUT, MOVE, DELETE, and COPY.

As shown in Listing 13-1, to obtain the user’s profile information, we instantiated the LiveConnectClient using the current Session object: client = new LiveConnectClient(e.Session).

To retrieve the user’s profile information, we called the GetAsync method on the LiveConnectClient instance. The GetAsync method expects a string parameter that points to the REST API’s object path. In this case, we want the user’s profile information, so we will pass in "me". This is a valid object path that maps to the user’s profile. Review the online REST reference article to view the full list of available object paths at http://msdn.microsoft.com/en-us/library/live/hh243648.aspx#objectdata.

The GetAsync method returns a dynamic object in the Result property of the LiveOperationResult object. The dynamic object contains all combined fields that are returned based on the object path passed into the GetAsync method, along with the scopes defined for application access during sign-in. In this case, the dynamic object is a User object. To view the list of fields returned in the User object, review the Live Connect REST API article online at http://msdn.microsoft.com/en-us/library/live/hh243648.aspx#user.

Finally, to serve as good developer citizens, we added exception handling to trap for the exception LiveConnectException. If an error occurred while attempting to communicate with the Microsoft Live services, then we can gracefully handle it and display a friendly message to the user.

This is a good place to mention that the SignInButton serves a dual purpose. Along with signing a user in, the button is also used to sign a user out of the Microsoft account. Tapping the button when the session is connected will trigger a sign-out process that is handled behind the scenes. Just like the sign-in process, the SessionChanged event will be triggered once the sign-out process has completed. Therefore, we need to ensure that we clear any user-specific information from the page when the user chooses to sign out.

Before we test the application, we need to drill down into the MainViewModel class and make one more change. Load the MainViewModel and take a moment to review the properties and methods that are contained within this class.

Notice that the ClientId property is not filled in with a valid ID:

public string ClientId
{
     get
     {
         return "TO DO: REGISTER YOUR APP FOR A CLIENT_ID ONLINE";
     }
}

You will need to modify this property to return the client ID that was generated in your Live Connect Developer Center account for this application.

Take a moment to review the LoadUserInfo method and the ResetUserInfo method. Both methods are called from the MainPage code-behind. The LoadUserInfo method accepts the LiveOperationResult.Result value that was returned when we requested the user’s profile information through the LiveConnectClient’s GetAsync method. It simply sets the properties within the view model, which in turn will display the user information in the view through the power of data binding.

At this point, we are ready to test the user sign-in process within our app!

Testing in the Emulator

Run the application in the emulator so that we can see what happens when the SignInButton is tapped and to observe the authentication flow that takes place. On initial launch, you will see the “Sign in” button and the status that indicates we are not signed in, as shown in Figure 13-8.

Tap the “Sign in” button to initiate user authentication. Notice that the sign-in page displayed prompts for your Microsoft Live ID credentials (Figure 13-9). Enter your credentials and then tap “Sign in.”

Upon successful verification of your credentials, the user consent page is displayed, as depicted in Figure 13-10. The permissions list that is displayed on this page reflect the scopes that we included in the SignInButton’s Scopes property. Tap the Yes button to give the application permission to your basic profile information, birthday, and contacts information.

Once user consent is obtained, the SessionChanged event will be triggered. At this point, our code will execute, which will conduct an async call to obtain the user’s profile information and display it in the MainPage, as shown in Figure 13-11.

As you can see, we were able to include user authentication within our Windows Phone application simply by adding the SignInButton from the Microsoft.Live.Controls library, setting the ClientId to a valid ID that was generated specifically for your application, and defining the scope of the desired access within the application. That is how easy it is to include a sign-in process within your Windows Phone application!

To view the completed application, open the solution MyLiveConnectApp in the Chapter 13MyLiveConnectAppFinished directory.

The Code

Launch Visual Studio 2012 and open the project in the Chapter 13 MyLiveConnectAppWithCalendar directory. Notice that it is similar to the MyLiveConnect app discussed in Recipe 13-3 but has some additional tweaks. The most significant change was that we moved the user profile information to a separate page.

In addition, within the MainPage markup, notice that the wl.calendar scope has been added to allow the application to access the user’s calendar data. The wl.calendars_update scope has been included as well so that we can update the user’s calendar information from within the application.

Furthermore, HubTiles from the Windows Phone Toolkit are used in the MainPage, which will serve as our navigation menu. Notice in the MainPage code-behind, when a HubTile is tapped, it will navigate to the page that we specified in the HubTile’s Tag property.

 
        private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if (App.ViewModel.IsConnected)
            {
                HubTile selectedTile = (HubTile)sender;
                Uri pageUri = new Uri(string.Format("/{0}.xaml", selectedTile.Tag.ToString()), UriKind.Relative);
                NavigationService.Navigate(pageUri);
            }
            else
            {
                MessageBox.Show("You must sign in first.");
            }
}

The Calendar HubTile will load the Calendars page, listing the user’s Outlook calendars, as shown in Listing 13-2.

Listing 13-2. Retrieve the User’s List of Outlook Calendars When the Calendars Page Loads

private async void Calendars_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        if (App.ViewModel.IsConnected)
        {
            LiveOperationResult operationResult = await App.ViewModel.LiveClient.GetAsync("me/calendars");
            dynamic eventsResult = ((dynamic)operationResult.Result).data;
            App.ViewModel.LoadCalendars(eventsResult);
        }
    }
    catch (LiveConnectException ex)
    {
        MessageBox.Show("Error occurred loading calendars: " + ex.Message);
    }
}

With the calendar information at hand, we can drill down to view events that are contained within a calendar by calling the LiveConnectClient’s GetAsync method and passing in the object path of [calendarId]/events, where calendarId is the unique ID for the selected calendar.

In the Calendars page code-behind, notice that the SelectionChanged event for the LongListSelector control passes the selected calendar ID to the Events page on navigation.

 
        private void LongListSelector_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            LiveConnectCalendar selectedCalendar = calendarList.SelectedItem as LiveConnectCalendar;
            NavigationService.Navigate(new Uri("/Events.xaml?id=" + selectedCalendar.Id, UriKind.RelativeOrAbsolute));
        }

Within the Events code-behind file, we simply retrieve the ID value from the NavigationContext’s QueryString and use that in our object path when requesting the events list for the selected calendar, as shown in Listing 13-3. The result returned will be a list of Event objects. To view the list of fields available in the Event object, review the Live Connect REST API article online at http://msdn.microsoft.com/en-us/library/live/hh243648.aspx#event.

Listing 13-3. On Navigation to the Events Page, Retrieve a Specific Calendar’s List of Events

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    LoadEvents();
}
 
private async void LoadEvents()
{
    try
    {
        if (NavigationContext.QueryString.ContainsKey("id") && App.ViewModel.IsConnected)
        {
            string calendarId = NavigationContext.QueryString["id"];
            LiveOperationResult operationResult = await App.ViewModel.LiveClient.GetAsync(string.Format("{0}/events", calendarId));
            dynamic eventsResult = ((dynamic)operationResult.Result).data;
            App.ViewModel.LoadEvents(eventsResult);
        }
    }
    catch (LiveConnectException ex)
    {
        MessageBox.Show("Error occurred loading events: " + ex.Message);
    }
}

Also, since we included the wl.calendars_update scope, we can also create new calendars, update information on existing calendars, and delete calendars, provided the user has the either owner, co-owner, or read-write permissions on the calendar. Within the Calendars page, we have included a single button that creates a new calendar with some sample information when it is first selected. We were able to add a new calendar to the user’s calendars list by calling the PostAsync method, passing in the object path of me/calendars, and passing in a new Calendar object. Listing 13-4 shows the call that is made to create the calendar.

Listing 13-4. Add a New Calendar to the User’s Calendars List

Dictionary<string, object> newCalendar = new Dictionary<string, object>();
                    newCalendar.Add("name", "My New Calendar");
                    newCalendar.Add("description", "Sample to demonstrate adding and deleting calendars");
                    LiveOperationResult operationResult = await App.ViewModel.LiveClient.PostAsync("me/calendars", newCalendar);

Once the calendar has been created, the calendars list is updated, and the button changes to a delete button, which will simply the delete the calendar we just added the next time the button is tapped. To delete a calendar, we simply call the LiveConnectClient’s DeleteAsync method, passing in only the unique calendar ID.

LiveOperationResult operationResult = await App.ViewModel.LiveClient.DeleteAsync(calendarId);

Testing in the Emulator

As we mentioned in Recipe 13-3, modify the ClientId property in the MainViewModel to the application ID you generated in your Microsoft Live account so that you can properly test this in the emulator. Once that is in place, launch the application in the emulator. When the application launches, sign in. Once connected, navigate to the calendars page. It will display a list of the calendars you currently have configured in your Outlook account (Figure 13-12).

Next, click the Add Calendar button to create a new calendar. If the calendar has been created successfully, the list will refresh with the new calendar added to the list, as shown in Figure 13-13.

To prove that this calendar was not just created locally, launch Internet Explorer, go to http://outlook.com, and sign in. Navigate to your Calendars view, and click the Settings button. This action will display a menu containing a list of calendars configured as part of your Outlook account. Notice that the new calendar appears in the list, as depicted in Figure 13-14.

If you want to add or delete events from a calendar, the same concepts that we went over with GetAsync, PostAsync, and DeleteAsync apply, as we discussed in the calendars demonstration, except the object path that must be specified in the GetAsync and PostAsync calls will need to indicate me/events and the wl.events_create scope must be included in the sign-in process.

The Code

Launch Visual Studio 2012 and open the project within the Chapter13 MyLiveConnectAppWithSkyDrive directory.

Note that we added the wl.skydrive scope to the SignInButton Scopes property in the MainPage markup. As well, there is a new HubTile, which allows us to navigate to the SkyDrive Contents page. On initial load of this page, we retrieve the list of items at the top level in the user’s SkyDrive account, as shown in Listing 13-5.

Listing 13-5. SkyDriveContents Page Retrieves Top-Level SkyDrive Items During Load

private async void SkyDriveContents_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        if (App.ViewModel.LiveClient != null)
        {
            LiveOperationResult operationResult = await App.ViewModel.LiveClient.GetAsync("me/skydrive/files");
            dynamic skyDriveResult = ((dynamic)operationResult.Result).data;
            App.ViewModel.LoadSkyDriveContents(skyDriveResult);
        }
    }
    catch (LiveConnectException ex)
    {
        MessageBox.Show("Error occurred loading files from SkyDrive: " + ex.Message);
    }
}

Within the SelectionChanged event for the LongListSelector control, if the selected item is a folder, another call is made to the GetAsync method call, passing in the object path [folder_id]/files, in order to load the folder’s contents (Listing 13-6).

Listing 13-6. SkyDriveContents Page Retrieves the Selected Folder Contents or Downloads the Selected File

private async void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    LiveConnectSkyDriveItem selectedItem = this.skyDriveList.SelectedItem as LiveConnectSkyDriveItem;
    if (!selectedItem.IsFolder)
    {
        MessageBoxResult result = MessageBox.Show("Would you like to download this file?", "", MessageBoxButton.OKCancel);
        if (result == MessageBoxResult.OK)
        {
            LiveConnectClient client = App.ViewModel.LiveClient;
            LiveDownloadOperationResult operationResult = await App.ViewModel.LiveClient.DownloadAsync(selectedItem.Id);
 
            MessageBox.Show("Download completed. Now saving to IsolatedStorage...");
 
            ...
        }
    }
    else
    {
        LiveOperationResult operationResult = await App.ViewModel.LiveClient.GetAsync(string.Format("{0}/files", selectedItem.Id));
            dynamic filesResult = ((dynamic)operationResult.Result).data;
            App.ViewModel.LoadSkyDriveContents(filesResult);
     }
 
}

If the selected item is a file, the application will prompt the user to download the file. If the user agrees to download the file, the LiveConnectClient’s DownloadAsync method is called, passing in the file’s unique ID. Once the download completes, the file content will be returned in the LiveDownloadOperationResult object’s Stream property. Within the sample application in this chapter, the application conducts a save of the file stream to isolated storage. If you are not familiar with isolated storage or how to save files to isolated storage on a Windows Phone device, you may want to revisit Chapter 11’s Recipe 11-1, which discusses this topic in detail.

The SkyDrive APIs provide extensive functionality for accessing photos, videos, files, and folders in a user’s SkyDrive account. In this recipe, we demonstrated a simple file download; however, you could also add the ability to upload files, move files and folders, copy files, and delete files and folders, among many other actions. Visit the SkyDrive API page at http://msdn.microsoft.com/en-us/library/live/hh826521.aspx to learn more about how to manage a user’s SkyDrive account from within a Windows Phone application.

Testing in the Emulator

As we mentioned in Recipe 13-3, modify the ClientId property in the MainViewModel to the application ID you generated in your Microsoft Live account so that you can properly test this in the emulator. Once that is in place, launch the application in the emulator. When the application launches, sign in.

Once connected, navigate to the SkyDrive page. It will display a list of folders you created in your SkyDrive, along with any files you have uploaded. For my account, I have two folders at the top level: Blog and CTTDNUG (Figure 13-15).

Click a folder to view its contents. I have chosen to drill down into the CTTDNUG folder, where I store slide decks for my user group, as shown in Figure 13-16.

In this case, I have one slide deck from a “Mobile and Cloud” workshop we hosted for our user group members. If you have a file in your list, click it to initiate the file download. You will be prompted to confirm the file download (Figure 13-17). This was a prompt we included in the code when a user selected a file in the LongListSelector control. Refer to Listing 13-6 to see where this was added.

Click the “ok” button to proceed with the file download. You will see a few more messages indicating that the file was downloaded and then saved successfully. If you so desire, you can enhance this application by launching the file in the appropriate application after it is saved to the device.