Doing OAuth Authentication is Easy in Windows 8

No need for iframe, no need for WebBrowser control. Doing OAuth authentication to get user to consent connecting your App to their Facebook, Twitter, FourSquare is so easy in Windows 8 Store App Development. Here is how I connect my test app to FourSquare to get the Tips for a Venue.

1. Register your app in FourSquare Dev Portal

Go to https://foursquare.com/developers/apps  and register your app. Below is the screenshot of what I put for my app. Note you don’t need a real Server for the Redirect URL, I just put http://localhost , cos what I care is to get the OAuth token embedded in the returned URL.

 

2. How to find Venue ID from FourSquare

Now I need the Venue ID to get the Tips, this is how I do it cos I find it just easier:

Go to https://foursquare.com/explore

Type the venue you’re looking for, and change the city if it’s in a different city , this is important to get exactly what you want. For example, I want to find ‘Emirates Palace’ in ‘Abu Dhabi’ , not in my current location (Dubai):

Now click the Venue that is the closest match. For me it’s the first result, but sometimes you want to get specific like the ballroom in Emirates Palace Hotel.

The Venue ID is embedded in the URL, see below:

 

3. Authenticate to FourSquare

Now finally comes the OAuth code that I said was easy. Here is how you use it in Windows Store JavaScript:

Where authWeb is defined at the top as a namespace alias:

This will give you this magic screen:

You will notice that I used a WinRT component there. This is like my “Session Manager”. I can reference a WinRT static class anywhere in my multiple JavaScripts to make it like a Singleton Session Manager (if you do this in HTML5/JavaScript, you will need to include “oAuthHelper.js” in every html page that needs it. By writing a WinRT component in C#, I can call it from any JavaScript simply by using its namespace like the above.

Here is my WinRT C# code for OAuthHelper:

 

4. Use Token to Get the Tips

Once I have an OAuth Token, I saved that in the AppSetting, and now I just need to append this token to every FourSquare API request:

As you can see, I cached the response so that next time I can show the Tips without going through Internet, here is the code for the VenueHelper and LocalFileHelper WinRT C# components:

And this is the code for the LocalFileHelper:

And this is the app in action:

Hope it helps you in building your Windows 8 Store Apps with Social features 🙂

 

Reader Comments (4) on “Doing OAuth Authentication is Easy in Windows 8

  1. Pingback: Windows 8: How to do OAuth authentication in 1 line of code - Z & his Startup

  2. Pingback: OAuth Resources « skater coder

Leave a Reply