OAuth and Flickr – Part 1

Flickr recently announced (well OK, it was back in June) that they would be supporting OAuth 1.0a as the future authentication method for accessing the Flickr API. They say that sometime in 2012 the old authentication token scheme will be phased out.

http://code.flickr.com/blog/2011/06/21/flickr-now-supports-oauth-1-0a/

Now on the surface the authentication method that Flickr had been using was very OAuth ‘like’, but as I soon came to realise they are really very different beasts, mostly because unless you get OAuth exactly right it can be very confusing where you are going wrong.

So I thought I would write these posts to take you through, step-by-step how to get OAuth working with Flickr, and then finally how to use the new functionality in the FlickrNet library.

Flickr OAuth Documentation

The first thing you will probably want to do is have a quick read through the Flickr OAuth documentation. I don’t consider it to be an exhaustive document, hence why I am writing this, but it is a good place to start.

http://www.flickr.com/services/api/auth.oauth.html

Right, are you back? Good.

If you want a more in-depth look of the whole OAuth specification then I recommend this:

http://oauth.net/core/1.0a/

Converting from Old to New?

First, if you are converting from old to new here is a run-down of the new oauth parameters, and what they used to be called:

oauth_consumer_key: This is your API Key. You will still need this key, but you will not need to pass the “api_key” parameter any more as it is now called oauth_consumer_key. If you are not doing authenticated calls then you can still use OAuth to send your API Key to Flickr inside the oauth_consumer_key parameter.

consumer secret: This is your Shared Secret. As with the old mechnanism you never send this value to Flickr, but use it to generate the signature. If you are not doing any authentication then this is not really needed.

http://www.flickr.com/services/oauth/request_token: This is the URL endpoint for requesting a temporary token for performing OAuth authentication. This replaces effectively the “frob” or the “flickr.auth.getFrob” method. Note, previously the frob was a single value, but now the request_token is made up of both a token and a secret.

http://www.flickr.com/services/oauth/authorize: This is the web page you redirect the user to to perform the authorization.

http://www.flickr.com/services/oauth/access_token: And finally this is the URL endpoint that you request your permanent access token and access token secret from.

oauth_token: There are two ‘tokens’ used during the authentication process. The request token is the first one, and is only used during authentication. The access token is returned at the final step of authentication and is used for calling normal Flickr methods.

oauth_token_secret: Both tokens used above have a corresponding secret (so there is a request token secret, and an access token secret). Which token secret you use to sign a call depends on which token you are using. During authentication this will be the request token secret, and afterwards the access token secret.

oauth_timestamp: This is the number of seconds since 1/1/1970, sometimes called the unix epoch. Note, this time should always be calculated using GMT (or UTC) times, not local times. If your timestamp is not a current time (i.e. is more than an hour out) then Flickr will reject your call to the Flickr API.

oauth_nonce: A random series of characters unique to this call to Flickr. If you have two users using the same web page that both make calls to Flickr at the same time then the timestamp will be the same, but the oauth_nonce must be different.

oauth_callback: The callback URL in the Flickr API Keys settings is now ignored, and you sent the callback url every time you call the request_token endpoint. This does mean you can include anything you want in the url, and you can also use the same consumer key for multiple web sites if you so desired. Your 1 query per second limit is on a per key basis though, not on a per website basis, so probably better get different keys for different web sites. If you are not using a callback url then you can use “oob” as your callback url. This will present the user with a web page once they have authenticated and they will have to cut and paste the oauth verifier string into your application. There are ways around this that I will go into in a later part.

oauth_version and oauth_signature_method: The version is always “1.0” and signature method for Flickr is always HMAC-SHA1 (although others are supported by the OAuth spec).

In Part 2 I will take you through a sample authentication process.

Developer Developer Developer North in Sunderland in October 2011

Just woke up to the news that the North East is to gets its first Developer Developer Developer (DDD) community conference.

http://www.nebytes.net/post/DDD-Northe28093Saturday-8th-October-2011e28093Session-Submission-Open!.aspx

The conference is community driven and community organised, and best of all free. You can submit your own proposals for sessions now. I went to one in Reading at the Microsoft campus a few years back and it was really good.

Anyway, put Saturday 8th October 2011 in your diary.

Probably won’t be able to make it unfortunately due to impending birth of my first child, but if you’ve ever thought of going to one of these things but can’t afford the travel time then now’s your chance.

Official site is here: http://www.developerdeveloperdeveloper.com/north/

Windows Phone 7 – What I’ve Learnt So Far

Windows Phone 7 Series - InicioI’ve been launching headlong into Windows Phone 7 development as can be seen from my previous post and I’ve come across some little tit bits I thought I’d post up here.

Jump Start Training

I can’t begin to say how helpful the jump start training courses have been.

So far I’ve done the introduction, building silverlight 1 & 2, and advanced applications 1 & 2. Some of the stuff I already knew from other blog posts (like the application lifecycle stuff) but I’ve learnt quite a few new things.

Windows Phone Developer Blog: Windows Phone 7 Jump Start Training

Getting Focus and Active Control

In old school WinForms there is a property of a form called ActiveControl which returns the control which is currently active. This property doesn’t exist in Silverlight. Instead you need to use the FocusManager static class and its GetFocusedElement static method.

object obj = FocusManager.GetFocusedElement();

if (obj != null && obj is TextBox)

{

TextBox txt = obj as TextBox;

txt.Text = "Has Focus";

}

Beta Tools Warning

In the current beta tools Control.Focus() does not correctly transfer focus to the control.

DataBinding and the ApplicationBar

I really like the way the application bar works to make a Windows Phone 7 application look, well, like a Windows Phone 7 application.

However as has been noted elsewhere the ApplicationBar is not a Silverlight control in the normal sense. This means that you cannot use data binding when setting it up, you can’t use Command’s to hook up events and various other little tit bits.

Here are two links to MSDN documentation about the ApplicationBar.

How to: Add an Application Bar to Your Application for Windows Phone

Application Bar Best Practices for Windows Phone

The fact the application bar does not appear on the Silverlight visual tree results in two other issues. Firstly, setting a x:Name property on your buttons and menu items does not work. The fields in your code will always be null. You have to use the ApplicationBar.Buttons and ApplicationBar.MenuItems arrays to get access to the buttons and menu items.

Secondly, if you set up your controls with data binding on the form then click on an application bar button the data binding for the control with the focus is not updated. These two issue are discussed on Laurent Bugnion’s blog here: Two small issues with Windows Phone 7 ApplicationBar buttons (and workaround).

Using the above code for determining the current focus control I came up with an elegant solution when you have more than one text box like so:

object focusObj = FocusManager.GetFocusedElement();
if (focusObj != null && focusObj is TextBox)
{
var binding = (focusObj as TextBox).GetBindingExpression(TextBox.TextProperty);
binding.UpdateSource();
}

So far I have only tested this with the TextBox.Text property. CheckBox’s don’t seem to have this issue. Other controls like list boxes might also need to be taken into account.

It should also be noted that in the final release an alternative solution would be to simply move the focus to another control, or to the page itself (IsTabStop must be set to true for the Focus() method to work on the page) to get the data binding to update.

Flickr (and OAuth) authentication

Finally a word on Flickr (and by extension OAuth) authentication.

The usual process for desktop app authentication for Flickr is that you request a temporary value from Flickr (called the ‘frob’), then redirect to the Flickr web site where the authentication is processed. Then when you return to the application you use that frob to get the authentication token.

At first I tried to use the WebBrowserTask to kick off the authentication process in much this manner. This works fine except for one thing. The only way to get back to your application is to repeatedly hit the back button to come all the way through the IE history to exit IE and return to your app. The authentication process is at possibly 4 pages (Yahoo login, Authentication warning, Authentication approval and Authentication Complete pages) and there is nothing to stop the user continuing to use the web browser after they have authenticated to continue browsing the internet, so this didn’t seem like a good way.

Then I tried using the WebBrowser control. This works, but I couldn’t find any way to tell if the user had finished authenticating.

I was OK with this, but wanted to improve the experience. I finally came across this post discussing OAuth (which follows the same kind of flow as Flickr) for Windows Phone 7: http://blog.markarteaga.com/OAuthWithSilverlightForWindowsPhone7.aspx.

To accomplish this you change your Flickr authentication to be web based, rather than desktop based. In this scenarios once the authentication is completed you get redirected to a callback URL you specify. You need to create a simple HTML page that can be redirected to that then calls window.external.Notify() method in javascript. The string value passed in to this page is then passed to the WebBrowser.ScriptNotify event where you can extract the frob from the URL, and complete the authentication.

I think this gives a much cleaner UI and I shall be implementing it in the near future.

Other useful Links

Me on Twitter: http://twitter.com/samjudson

The # wp7dev tag on Twitter: http://twitter.com/#search?q=%23wp7dev

Daily ‘twitter’ newspaper: http://paper.li/tag/wp7dev

Windows Phone 7 Developer Blog: http://windowsteamblog.com/Windows_Phone/b/wpdev/

Windows Phone 7 Developer site: http://developer.windowsphone.com/

Update: Tombstoned Apps may not be reactivated

I forgot to mention – if the user starts a new version of your application then any tombstoned version will be removed from the back stack. e.g. If they go Start Button –> Your App  –> Start Button –> Your App then pressing the back button will exite your application and take them to the Start screen, and pressing it again will do nothing – no second instance of your app will be reactivated.

This does mean however that if your app is loading, you can clear down any existing data that may be hanging around from tombstoned apps.

Flickr.Net for Silverlight/Windows Phone 7

Just a quick note to say I’ve released the first version of the Flickr.Net library to support Silverlight (3.0 and 4.0) and the new Windows Phone 7 SDK.

The release can be downloaded from flickrnet.codeplex.com – use the FlickrNetSilverlight.dll file in the binary download.

The new asynchronous methods added for silverlight (as all network traffic is async in silverlight) are also included in the existing Flickr.Net API for .Net 2.0+

Examples and documentation to come in the near future.

Let me know if you have any feedback.

Silverlight and Monotouch with Flickr.Net

The Flickr.Net library has been getting a bit of love recently.

Monotouch

Firstly, it got mentioned on the dotnetrocks podcast a week or so ago, a talk with Chris Hardy about Monotouch.

Postcast: http://www.dotnetrocks.com/default.aspx?showNum=568 – Flickr.Net is mentioned about 31minutes in. You can also view Chris’s talk at the NDC conference here: http://streaming.ndc2010.no/tcs/?id=815EADB7-066D-4516-A70F-31EEFDFB1DE2 – he does a demo using the Flickr.Net library in Monotouch at about the 40minutes mark.

Follow chris on twitter here: http://twitter.com/chrisntr

Silverlight

Recently I’ve been trying to work out how best to convert the Flickr.Net library over to Silverlight. Unfortunately it’s not as easy as it sounds, because most of the methods the library uses to talk to Flickr are only available in their asynchronous versions in Silverlight, which means the entire stack has to be converted to an asynchronous pattern.

Anyway, I’m almost there in terms of deciding on a method to use (maybe that is worth another post later) but in the mean time there is a post on the Silverlight Show web site about using Silverlight and Flickr which I’m using as my inspiration – the sooner the article is out of date the better :)

http://www.silverlightshow.net/items/Uploading-and-geo-tagging-photos-on-Flickr-using-Silverlight-4-s-HttpWebRequest.aspx

Missing drive when using Remote Desktop

Usually when you remote desktop to another machine you can turn on automatic mapping of your local drives to drives on the server – for example you local C: drive is available at \tsclientc

However recently I have been experiencing a problem where I wasn’t seeing the C: drive, but only when I logged onto the remote server as a particular user. Other drives were avaialble but they where network drives I didn’t have permission to write files to this was a bit of a problem transferring files.

Luckily I found the solution in this Microsoft Knowledge Base article: http://support.microsoft.com/?kbid=940458

Turning on Smart Card detection fixed the problem. Hurray.

Flickr.Net API Library 3.0 Release

I’ve just released a brand spanking new version of the Flickr.Net API library.

The big things to note are that this version has over 150 unit tests to make sure it is working correctly. It also covers 100% of the Flickr API methods (there is a unit test that ensures this).

I’ve also sent some considerable time running Microsoft Code Analysis against the library to try to ensure that it meets most of the Microsoft guidelines on library design. This has resulted in some quite wide ranging changes, most noticeably to many of the class names in the Library. Most of these changes could have been avoided but I felt that it was better to get the library in a consistent and easy to understand position going forward than try to maintain a large segment of code just for backward compatibility reasons.

The main reason for the change was actually to do with a little Flickr method called flickr.photos.getFavorites. Previously the library had used XML serialization and the serialization attributes to handle converting the returned XML from Flickr into .Net object. However there was a huge clash between the flickr.photos.getInfo method, which returned a root element of <photo> and sub elements containing different bits of information about that photo and the flickr.photos.getFavourites method which also returned a root element of <photo> and sub elements of <person> which were the people who had favourited that photo.

One solution to this was to add a PersonCollection property to the PhotoInfo class, but this I felt would just add to the already growing confusion in other areas, such as when returning a list of Photosets the Photoset.PhotoCollection property would always be null – this is because PhotosetsGetList does not return any photos, but the Photoset class is used in more than one place so had to handle all scenarios.

So instead I had to develop a method of overriding the XML deserialization. I chose to do this by a combination of a custom Interface (IFlickrParsable) and the use of generics to handle the processing of the responses.

Changes

So, now instead of PhotosetsGetList returning a Photosets class, it returns a PhotosetCollection class. This class is a generic collection which can be iterated over using foreach etc. It no longer has a PhotoCollection property. Instead the PhotosetsGetPhoto method now returns a PhotosetPhotoCollection which is a collection of Photo class instances as you would expect.

string ApiKey = "ABCDEFG";

string UserId = "";

Flickr f = new Flickr(ApiKey);

PhotosetCollection photosets = f.PhotosetsGetList(UserId);

foreach(Photoset photoset in photosets)

{

    PhotosetPhotoCollection photos = f.PhotosetsGetPhotos(photoset.PhotosetId);

    // Do something with all the photos here.

}

Likewise there are a large number of other changes – most noticeably that the Photos class is now called the PhotoCollection class.

Beta

Due to the large number of breaking changes I’ve labelled this version a beta until such time as I have had chance to actually use it myself. I’m already underway moving my Flickr screensaver over to this library, and its improved support for the Flickr methods has saved a huge number of method calls in that already, so I’m hopeful this is only a good move.

Download the latest version of the Flickr.Net API Library from here: http://flickrnet.codeplex.com/

You can also report bugs and ask questions over there too.

Regex Split bug in JScript?

I’ve been messing around with JavaScript quite a bit recently and I came across a ‘bug’ in the Microsoft implementation of the split() method.

Take the following example string (note the two tabs at the end):

var s = “HellotHowtaretyoutt”;

and then run the following to write it out to the screen:

document.writeln(s.split(“t”));

Well that works as expected, and outputs “Hello,How,are,you,,”;

But if you replace the string in the split method with an inline Regex object it fails if run under a Microsoft implementation

document.writeln(s.split(/t/));

This outputs the same as above in Firefox etc, but if run in JScript (i.e. Internet Explorer) you lose all empty elements and get the following: “Hello,How,are,you”. This is really weird, because if you use the string delimiter above it works just fine.

I have managed to find another blog post that tries to fix this problem, but doesn’t say why it happens.

http://blog.stevenlevithan.com/archives/cross-browser-split

To test this online, try going to W3Schools.com.