Enabling Twitter OAuth For An Azure Mobile Service (Zumo) in a Windows 8 Game

Posted by: Sumit Maitra , on 2/1/2013, in Category Windows Azure
Views: 12890
Abstract: In this article, we will see how to enable Twitter OAuth for a Zumo Service. We will also see how to use it in a Window 8 game and how we can reuse the credentials for a nice User experience.

In my previous Zumo article Integrating a Windows 8 Store Game with Azure Mobile Services a.k.a Zumo,  I showed how we could store game results of a Windows 8 game in Azure using Azure Mobile Service (Zumo). While building the app, we set it up such that anyone with the Zumo Application Key could post data. Today we will see how we can tighten things up a little and use an OAuth Service to authenticate the data submission process.

 

Turning on Authentication in Zumo

Here we continue with our Tic-Tac-Toe Windows 8 game that we built in our previous article. If you want, you can create a new Application and get started with that or follow the previous article on how to create a new Windows Azure Mobile Service.

Enabling Authentication

Step 1: Login to your Azure Portal and select Mobile Services

zumodashboard

Step 2: Select the Mobile Service and once it navigates to the Service, select the Data tab

zumoapplication

Step 3: Select the Table and navigate to the Permissions tab

Step 4: Update the permissions to require Authentication for Insert, Update and Delete permissions. Click on Save the save the changes. We are thus allowing anonymous reads but any changes can only be
done by authenticated users.

old-permissions


Now if the application tries to Save the Game Result an ‘Unauthorized’ exception will be thrown.

Step 5: After saving the permissions, navigate back to the Service dashboard and click on the Identity Tab.

Scroll down to Twitter Settings and add the Consumer Key and Consumer Secret. If you don’t know how to get these read on, else scroll below to the client side changes titled “Using Authorization in the Windows 8 App”

twitter-keys-in-zumo

Step 6: Creating a New Twitter Application

- Login to http://dev.twitter.com/apps

- Click on ‘New Application’

- Provide a Name and Description. For the Website and Callback URL, select the URL from the Zumo Dashboard. In this example’s case it’s http://dncleaderboarddemo.azure-mobile.net/

Scroll down, accept the license agreement and enter the captcha. Go ahead and create the new application

twitter-new-application

Step 7: Setting up Zumo to use Twitter.

- Once the Twitter application is created, on the details page you’ll see the Consumer Key and the Consumer Secret.

- Switch back to the Zumo service application and provide the keys in the respective fields on the Identity Tab.

twitter-consumer-key

Using Authorization in the Windows 8 App

With our Azure Mobile Service setup to use authorization, next step is to setup the Windows 8 App to provide Authorization credentials when talking to Zumo. To do this, we need to do the following

1. In the MainPage.xaml.cs add the following snippet. MessageDialog is defined in the Windows.UI.Popups Namespace.

private MobileServiceUser user;
private async System.Threading.Tasks.Task Authenticate()
{
while (user == null)
{
  string message;
  try
  {
   user = await App.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();
}
}

2. Call this method from the OnNavigatedTo override of the MainPage.xaml.cs

protected async override void OnNavigatedTo(NavigationEventArgs e)
{
    await Authenticate();
    base.OnNavigatedTo(e);
}

3. Run the application and with launches, you should see a screen like the following

login-dialog

As you can see, our App is now using Twitter Auth for authentication. On successful Authentication, you’ll get a popup like the following. The ID is what Zumo uses as your ID.

login-success

4. Now when you complete the Game, the App will post data to Zumo using the credentials! Yay! That’s it, you have enabled Authentication for a Zumo service.

Storing the UserId with each transaction

Now that we are authenticating users, it will be good to store the UserId with our game score.

- So we go back to the LeaderBoard class and add a property to it

[DataMember(Name = "userId")]
public string UserId { get; set; }

- Next we provide the value while inserting data into the LeaderBoard table. This is in the ‘textBlock_tapped’ event. The change is highlighted below

InsertLeaderBoardItem(new LeaderBoard
{
GameName = "TicTacToe",
GameStatus = 1,
Player1 = player1Name.Text,
Player2 = player2Name.Text,
WinnerName = winnerName,
UserId = user.UserId
});

- Now complete a game to send the updated data structure to Zumo. Since we have kept Schema as Dynamic, Zumo will automatically add the column and insert the data in the new column.

- If we go back to the dashboard and check the Table data, we’ll see the new entry

datawithuserid

Preventing Authentication Dialog on each Login

Now that Authentication is working fine, let’s see if we can enhance the user experience a little. Currently the application asks for login information every time the game starts. This is unlike other OAuth clients where you give permission once and the application can use the permissions until the user revokes permission to this app from the OAuth source. This makes giving permission a one-time affair. How can we possibly replicate it in our app?

Fortunately, Zumo’s client SDK has made this very easy too.

Remember we pulled out the UserId from the user object after authentication? Well the user object has another property called MobileServiceAuthenticationToken. If we put a breakpoint right after the
login and look into the user object, we can see this property populated with a very long string

image

Let us Copy the values in MobileServiceAuthenticationToken and UserId and say put them away in Notepad.

Now let’s change the code to create a new instance of MobileServiceUser as follows

authorize-with-existing-credentials.

As you can see, we have hardcoded the UserId and the MobileServiceAuthenticationToken to the value returned previously. Next we have assigned the newly instantiated user object to the App.MobileService.CurrentUser. That’s it. Now if we run the application, our App will be again able to submit data and this time we won’t get the Authentication dialog.

Suggestions for a real credential caching Implementation

In the above sample, I simply hard-coded the credentials. This is not a real solution. In real world apps, you will have to come up with some kind of a secure caching mechanism to save the UserId and MobileServiceAuthenticationToken. You can write it to an encrypted file and on application start check for the file and load+decrypt Authentication Information if it exists. If not, show the Authentication dialog.

Try not to save the credentials in plain text.

Conclusion

So that’s a wrap for Zumo Authentication. We saw how we could enable Twitter OAuth for a Zumo Service. We also saw how to use it in a Window 8 game. Finally we saw how we can reuse the credentials for a nice User experience. The Zumo service is providing lots and lots of pleasant surprises as we explore it, be it flexible data storage or OAuth integration. Up next, in a few days we’ll explore what it takes to implement push notifications.

The code for this article can be downloaded from https://github.com/dotnetcurry/zumo-authentication-win8

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel