Building authorized Flickr apps for the iPhone

only

You want to develop an iPhone app that interacts with Flickr content? This sounds pretty good. And the Flickr API provides you with an authorization workflow that is particularly adapted for this device. And Flickr members love their iPhones.

An authorization workflow you say, but why? Let me step back for a moment. First you may not need to authorize your application. This is needed only if your app needs to make authenticated API calls. That means if the users of your app access in a non anonymous way the Flickrverse: accessing non-public content, commenting, tagging, deleting, etc… In order for this to happen in a safe environment (for you and our users), a 3-way authorization needs to happen between Flickr, you and our mutual users, typical of social engineering interactions.

So how does this work?

Step 0

You need to setup your application.

  • Get an API key that uniquely identifies your application.
  • Configure your application to be web-based (yes, this can seem odd but this is the smoothest user experience on the iPhone) and specify the authorization callback URL (it will be used in Step 3.) I suggest not to use the http:// protocol reserved for the web but your own, like myapp://

There exists already a workflow explanation from developer stand point, but I’d like to add the specificities introduced by the use of a web-based authorization in an iPhone environment.

In the app, for each user you want to authorize:

Step 1

Create a login URL, specific to you application in the shape of http://flickr.com/services/auth/?api_key=%5Bapi_key%5D&perms=%5Bperms%5D&api_sig=%5Bapi_sig%5D and launch a web browser with this URL.

Step 2

Flickr will ask the user to sign-in into their account and present them with a page prompting them to authorize your application.

Step 3

If the user decides to authorize your application, Flickr will call the callback URL specified in Step 0. Here is the nice trick! This can actually launch back your application. All you have to do is to add a new entry for CFBundleURLTypes in your Info.plist:

 <key>CFBundleURLTypes</key>
 <array>
   <dict>
     <key>CFBundleURLName</key>
     <string>MyApp's URL</string>
     <key>CFBundleURLSchemes</key>
     <array>
       <string>myapp</string>
     </array>
   </dict>
 </array>

See Apple’s documentation on Implementing Custom URL Schemes for more details.

Step 4

Your application is launched back by Flickr (through the browser and the iPhone OS) with a frob as one of the argument of the URL. The app is effectively a Flickr auth handler. You can implement application:handleOpenURL: in a similar way as:

 - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
 {
        if (NSOrderedSame == [[url scheme] caseInsensitiveCompare:@”flickrApp”]) {
                // query has the form of "&frob=", the rest is the frob
                NSString *frob = [[url query] substringFromIndex:6];

                // Keep the frob for Step 5 and schedule Step 5

               return YES;
        } else {
               Return NO;
        }       
  }

Step 5

Your app makes an API call to convert this frob into a token. The frob is valid only for a certain time. The token will be used for the API calls that require authentication. This token is what uniquely identifies the use of your API key for a specific user on Flickr. You can save it using NSUserDefaults for next time the user uses the application without having to reauthorize the application. Even better to use KeyChain. Note that you should use checkToken to make sure the user has not de-authorized the application otherwise your authenticated call may fail for no apparent reasons.

I would like to take the opportunity of this blog post to recommend an excellent library to develop iPhone apps interacting with flickr: ObjectiveFlickr.

Have a good hack!

Jérôme Decq, from his home outside of Paris, singled handedly runs the Flickr Desktop Uploadr development, as well as hacking on making Flickr avaiable on a wide range of platforms, and photographing purple ducks.

Every Step A Story

Many of you will have already read on the sister Flickr.com blog that we added “nearby” pages to the m.flickr.com site, last week, for phones that support the W3C Geolocation API (that means the iPhone, or Gears if you’ve got an Android phone).

Ross summed it up nicely, writing:

Use this to explore your neighborhood, or find the best places to photograph local landmarks from. Reload the page as you walk around a city, and see the things that have happened there in the past. You’ll see a place through the eyes of the flickrverse.

We’ve also updated the nearby pages on the main site so that when you go to…

www.flickr.com/nearby

…without a trailing latitude and longitude, we’ll see if you have any one of a variety of browser plugins that can tell us your location. This is similar to the Find My Location button on the site maps, that Dan described back in April, but for nearby!

Like the iPhone’s Mobile Safari browser, the next version of Firefox (version 3.5, currently being tested as a release candidate) will also support automagic geolocation so you won’t even need to install any plugins or other widgets.

Just point your browser to www.flickr.com/nearby/ and away you go.

The other piece of nearby-related news is Tom Taylor’s fantastic FireEagle application for the Mac called Clarke.

Clarke is a toolbar app that sits quietly in the background and scans the available wireless networks using the Skyhook APIs to triangulate your position and updates FireEagle with your current location.

In addition to being an excellent FireEagle client, Clarke also supports Nearby-iness for a variety of services, including Flickr.

I’m writing this post from FlickrHQ, in downtown San Francisco, so when I choose Flickr from Clarke’s Nearby menu it loads the following page in my web browser:

http://www.flickr.com/nearby/37.794116,-122.402776

Which is kind of awesome! It means that you can travel to a brand new place, open up your laptop and just like magic (read: once you’ve connected to a wireless network) see pictures nearby.

Woosh!

5 Questions for Fraser Speirs

If you’ve been around Flickr for a bit then you’ve seen probably seen Fraser Speirs photos. If you’re a Mac user then you’ve almost certainly encountered his code. He built the Flickr Uploadr 2.0 for the Mac, and the hugely popular FlickrExport for direct uploading from iPhoto and Aperture. Lately his DarkSlide has brought Flickr browsing, discovery, and sharing to the iPhone.

Conundrum

1. What are you currently building that integrates with Flickr, or a past favorite that you think is cool, neat, popular and worth telling folks about? Or both.

Fraser:Most of the last year has been all about putting Flickr on the iPhone. I started back in March, when the first iPhone SDK was released, and cranked the code handle probably harder than I ever have before. Hours turned into days, days to weeks and weeks to months but Exposure was ready for day one of the App Store. It’s been rolling along steadily ever since, particularly with the recent 1.5 update and its cool new name – Darkslide.

near me function
The thing that I’ve most enjoyed seeing people get immense pleasure from in Darkslide is the Near Me feature. Near Me takes your iPhone’s current location and searches Flickr for photos near that point. People have found everything from great pubs nearby to, um, slightly compromising pictures of their neighbours.

2. What are the best tricks or tips you’ve learned working with the Flickr API?

Fraser:For anyone developing desktop or mobile applications against the Flickr API, you must, must, must do all your network operations asynchronously. Anything else produces a quite terrible user experience. Hint: UI animation can give you a few fractions of a second to make it feel faster to the user, and perceived speed is often more important than actual speed.

Brilliant Advice

Secondly, if you’re working on a mobile device, download thumbnails in parallel (though not so much as to make the servers cry). Early versions of Darkslide downloaded 75px thumbnails one at a time, and the network latency turned out to be about as long as the time taken to download a thumbnail. The experience was painful. Newer releases request about ten at a time, and the user experience is much improved. Beware latency!

3. As a Flickr developer what would you like to see Flickr do more of and why?

Fraser: I’d like to see some queries turned around a little faster. When you’re working on mobile devices, the user’s attention span is oftentimes quite short. Between a couple of seconds in network latency and a couple of seconds turnaround time on the query, then the download time for a chunk of XML, it can sometimes get a little sluggish.

API-wise, I really would like an API for group discussion threads. A good number of users ask me about Darkslide support for group discussions on a regular basis.

Finally, a plea to keep the mathematics of maps simple for mathematical dullards like myself. I know programmers are all supposed to be maths wizards, but I truly stink at maths. I love that flickr.photos.search can do a radial search around a point, rather than requiring me to compute a bounding box. It would be great if all maps-related API let us do this kind of thing. I’m still trying to get my head around the location corrections API :-)

4. What excites you about Flick and hacking? What do you think you’ll build next or would like someone else to build so you don’t have to?

Fraser: What excites me? Well, I love photography so I love making things that make it easier for me to look at great pictures. I love that Flickr is becoming the web’s de facto repository for photography, and I love helping to make that happen.

I’m also excited to see that the Twitter/Flickr axis is starting to turn into a very powerful tool in the hands of ordinary people. I’m writing this a couple of hours after US Airways flight 1549 went down in the Hudson River. Where did I get my first news and photos of this event? Not the BBC – who had nothing up at the time – but news from Twitter and photos from Flickr.

One of the first great photos of US1549 was taken by Twitter user jkrums and posted to TwitPic. It was later reposted to Flickr after TwitPic went down under the load. Maybe next time that will be an iPhone user using Darkslide and putting the photo on Flickr first.

This is power in the hands of ordinary people and, as a citizen of the world’s biggest surveillance society (one CCTV camera for every 14 people in the UK), I think it will be increasingly essential that citizens have this kind of global reach.

5. Besides your own, what Flickr projects and hacks do you use on a regular basis? Who should we interview next?

Sleepy

Fraser: I’m a big Twitter user and one simple-but-not-that-obvious thing I’ve done is to pipe my Flickr activity RSS feed into Twitter using TwitterFeed.com. I also write my blog with Daniel Jalkut’s MarsEdit blog editor, which has Flickr integration in its “Media” panel – this lets you drag and drop pictures from Flickr as HTML tags right into a blog post. Great timesaver. I also use Scout to see the occasional time that one of my photos makes it to Explore :-)

Whom should you interview next? I’d like to hear from Matt Biddulph at Dopplr. I’m very interested in where Flickr photos end up, and Dopplr are making interesting use of Flickr photos in the things they do, such as producing personal travel reports with CC-licensed Flickr photos.