Azure Mobile Services is undoubtedly one of the best platforms to emerge from the Azure group over the last year. If you are a mobile developer and not taking advantage of it; I encourage you to do so. There are many video and blog posts available to get you started at http://www.windowsazure.com/en-us/develop/mobile/ .
One of the features you may not be aware of is Azure Mobile Services is a Portable Class Library (PCL) available through nuget. If you are not familiar with PCL's see my "Move Your ViewModels" series.
There is a caveat however when using Azure Mobile Services in your PCL; although all of the data calls to the services are available, using the Identity feature is not and must be implemented in a platform specific way.
The Identity feature allows your application to leverage the user's Microsoft, Google, Facebook or Twitter account to login to the application and abstract the overhead of OAuth or provider specific authentication models into a single call.
var user = MobileService.LoginAsync(MobileServiceAuthenticationProvider.Twitter);
The Challenge - Maximize Code Reuse
There is no secret that Model-View-View-Model (MVVM) is a preferred pattern for xaml developers, but it is also know that sometimes breaking patterns is needed either due to time constraints or other restrictions.
In the effort to maintain the MVVM pattern in this scenario a platform abstraction is needed to accomplish to goal of reusing as much code as possible. Matt Hidinger did a great talk at BUILD 2013 this year on this topic, give a watch on his blog.
Scenario - Setting up your solution
I won't walk through setting up a Mobile Service on Azure, see this post for instructions, so let's assume we have a Windows Phone & Windows Store application where we'd like to share code in a Portable Class Library and allow the user to login with their Twitter account. The project solution should contain 3 projects:
* PortableAzure.Win8 - Windows 8 Blank Application
-
PortableAzure.Phone8 - Windows Phone 8 Application
-
PortableAzure.Core - Portable Class Library Project
I have added the following nuget packages to the projects -
Microsoft.Net.Http
-
Portable.MvvmLightLibs
-
WindowsAzure.MobileServices
There is some plumbing related to the MVVM structure that is needed as well. Get the "before" code here http://sdrv.ms/14ufYYZ , your solution explorer should look like the image here ->.
Adding Azure
Assumption(s) - you have created a Azure Mobile Service.
First, you will want to add a new class to the **Services **folder in the PortableAzure.Core project and call it AzureMobileServices. I have also added an empty interface out of habit and to use for IoC (Inversion of Control).
namespace PortableAzure.Core.Services
{
public class AzureMobileServices : IAzureMobileServices
{
public MobileServiceClient MobileService = new MobileServiceClient(
"https://portableazure.azure-mobile.net/",
"[your app key]"
);
public AzureMobileServices()
{
}
}
public interface IAzureMobileServices
{
}
}
The app key and url comes from the Azure portal when you complete the setup; you will want to choose "Connect to an Existing Project". Either Windows Phone or Windows 8 is an acceptable choice.
Next step is to setup the Twitter authentication, or other provider of your choosing. (reference)
Now that that is complete, we'll add the necessary platform specific code to the Windows Phone & Windows 8 platforms to prompt the user to login using their Twitter account.
Windows Phone
Open the App.xaml.cs and create a new property for the AzureMobileService class from the Core project.
public partial class App : Application
{
/// <summary>
/// Provides easy access to the root frame of the Phone Application.
/// </summary>
/// <returns>The root frame of the Phone Application.</returns>
public static PhoneApplicationFrame RootFrame { get; private set; } > ** public AzureMobileServices Azure { get; private set; } **> /// <summary>
/// Constructor for the Application object.
/// </summary>
public App()
Then in the App constructor create the new instance of the AzureMobileService class.
Azure = new AzureMobileServices(); In order to prompt the user, open the MainPage.xaml.cs file and add the following code to the PhoneApplicationPage_Loaded event.
private async void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
MobileServiceUser user = null;
while (user == null)
{
string message;
try
{
user = await((App)Application.Current).Azure.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Twitter);
message = string.Format("You are now logged in - {0}", user.UserId);
}
catch (InvalidOperationException)
{
message = "You must log in. Login Required";
}
MessageBox.Show(message);
}
}
Windows 8
The implementation is essentially the same for Windows 8 with the exception of how to show a message box.
private async void Page_Loaded(object sender, RoutedEventArgs e)
{
MobileServiceUser user = null;
while (user == null)
{
string message;
try
{
user = await((App)Application.Current).Azure.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Twitter);
message = string.Format("You are now logged in - {0}", user.UserId);
}
catch (InvalidOperationException)
{
message = "You must log in. Login Required";
}
var dialog = new MessageDialog(message);
dialog.Commands.Add(new UICommand("OK"));
await dialog.ShowAsync();
}
}
The Good & Bad - so far
To this point everything is working great and we have now effectively added the authentication to each platform using the Identity features in Azure Mobile Services. But other than the url and the key of the Azure Mobile Service; there isn't a lot of code reuse in this scenario.
This is a necessity when there are platform specific implementations of a feature. In this case, the UI needs to present differently and cannot re-use the xaml or controls that are a part of the login utility for the specified provider.
The bad part of this is it breaks the MVVM pattern to a degree by putting some of the logic in the code behind.
In the next installment, I'll show how to add an abstraction layer and use the MVVM Light Event Bus to push some of this code back to our view models.
Here is the completed code for Part 1.