Back to blog

Display your latest foursquare checkin in .NET

February 10, 2012 - Posted in ASP.NET Posted by:

Tags:

This is something I wanted to do for the new version of my portfolio (coming soon). It will essentially be a  one page portfolio built of modules, some being projects, others being social feeds, e.g. latest tweet, Flickr photos and my last foursquare checkin.

Twitter is straight-forward, and can be done right from JavaScript without the need for an API key, for example:

[sourcecode language=”javascript”]
$.getJSON(‘https://api.twitter.com/1/statuses/user_timeline.json?exclude_replies=true&trim_user=true&screen_name=ediblecode&count=1&callback=?’, function (data, textStatus, jqXHR) {
// Loop through data
});
[/sourcecode]

Flickr and foursquare no the other hand need to have an API key to be able to access your photostream and checkins. Here’s how to do it for foursquare.

First of all, you need to have an API key, or an OAuth consumer as foursquare calls it. Go to https://foursquare.com/oauth/register and fill in the details. Application name can pretty much be whatever you want, and callback url can be any URL on your site (e.g fs.aspx), you won’t actually need it for what we’re going to do – it doesn’t need to actually exist.

When you’ve created your consumer you’ll get a generated a client id and a client secret. Follow the instructions at https://developer.foursquare.com/overview/auth to obtain an access token. The access token (or oauth token) is then used to access data from the fourquare API. Here’s a quick summary of how to get the acces token:

  1. Visit https://foursquare.com/oauth2/authenticate?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI in your browser.
  2. This will redirect you to YOUR_REGISTERED_REDIRECT_URI?code=YOU_CODE e.g. http://ediblecode.com/fs.aspx?code=XYZ. This will probably give a 404 because we just used anything when we wet up the consumer.
  3. The code querystring value is the bit you want, copy this and then construct a new URL in the format. https://foursquare.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=YOUR_CODE
  4. The response from this URL should then be a bit of JSON that looks like {“access_token”:”YOUR_ACCESS_TOKEN”}. This access token is the key bit that you then need for accessing the foursquare API.

Once you’ve got your access token (or oauth token) then you can pass it to foursquare for getting details of your profile including checkins, for example https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN. You can do this directly from jquery as the foursquare API supports JSONP, so you make a call to getJSON with a URL of https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN&v=YYYYMMDD&callback=? and jquery will do its usual thing of appending a random callback function to allow cross domain JSON calls to work. However, what this does is expose your access token to anyone who views the source of your web site, and it would be a good idea to hide it.

So, to solve this, create a generic handler in your web site called foursquare.ashx, this will make a call to foursquare and return the JSON back to your web app. This has 2 benefits, you access token isn’t exposed to anyone and there is no need for cross domain JSONP – the jquery getJSON call can be direct to the foursquare.ashx handler you just created. The contents of foursquare.ashx would look something like:

[sourcecode language=”csharp”]
public void ProcessRequest(HttpContext context)
{
context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate); context.Response.Cache.SetExpires(DateTime.Now.AddDays(1));
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = System.Text.Encoding.UTF8
WebClient client = new WebClient();
string json = "{\"error\":true}";
try
{
json = client.DownloadString("https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN&v=20120129");
}
catch
{ }
context.Response.Write(json);
context.Response.End();
}
[/sourcecode]

Notice the use of the v querystring parameter. This is used for versioning and tells the foursquare API that ‘the client is up to date to the specified date’. This is in the format YYYYMMDD, e.g. 20120210 for Feb 10th, 2012. More information can be found at https://developer.foursquare.com/overview/versioning