Delegated authentication and authorisation technologies are one of the biggest developments of last year. Whilst still immature, technologies like OpenID and OAuth have their feet down as being integral pieces in the interaction between web services.

OpenID and OAuth are the open, standards based and interoperable editions of this technology, but Yahoo’s deprecated BBAuth and FlickrAuth and others all came before. Also at the tail-end of last year came Facebook Connect, a system whereby websites can piggyback on Facebook profiles for building applications.

For example, take Fire Eagle. It’s a service that stores your location on your behalf, for use by other applications on the web. It uses OAuth to control access to that location; no application can see your location by default. When you visit a site needing your location, it asks Fire Eagle for that information.

Instead providing your Yahoo! username and password to this third party site (which would grant access to your entire Yahoo! account), you are taken to a special page on the Fire Eagle site, click a button to grant specific location permission and then jump back to the original site, which now holds a token to access to your location.

OAuth Best Practices · Fire Eagle. Image by Ben Ward & Sam Tripodi

This process means that the site you shared your location with can’t access anything apart from your location (it can’t log into your Yahoo! IM account, for example, or send emails through Yahoo mail). Furthermore, you can log in to Fire Eagle and remove that application any time; you don’t need to change your password to do so.

It’s the future, it’s user empowering, and it’s going to be great. Eventually.

The user experience of this OAuth process — and OpenID alike — has been criticised a bit. Users don’t expect to be moved between different websites, but they are familiar with entering their passwords all over the place. The short ranty version of this article would go like this: If you stop whining and just get on with implementing the OAuth flow, users will get used to it and will be just fine. It’s is usable as-is, so shut up already. But this is the long, constructive version, so:

The user experience of OAuth and OpenID is immature, and can still be massively improved and smoothed out with concerted design effort.

Which brings me to Facebook Connect. Connect is a product as well as a proprietary technology. It’s a packaged and complete offering from Facebook, and as such, comes with a far more complete and polished user experience than the technology-focused, open standards have so far achieved. Polished and mind bogglingly stupid, in places, but, y’know.

Facebook Connect, whilst proprietary and product-specific and therefore irrelevant in the grand scheme of things, has UX that can be applied to OAuth and OpenID flows. If service providers support this, I think user experience gets much better, quickly.

How does Facebook Connect work?

The most common use case for Facebook Connect appears to be commenting on blogs, such as on Gawker sites. Rather than enter your details standalone, or uniquely register with a site, you log into Facebook, and Gawker uses those details instead.

So, you click the shiny ‘Facebook Connect’ button in the comments form, and an overlay appears:

This is the crux of the learning for OAuth. Rather than redirect to Facebook, this granting of permission happens right in the page in an embedded control.

It’s not quite as simple as this, mind. It’s ok that this action occurs in an overlay only because the user is already logged in to Facebook. No exchange of credentials takes place: The overlay is an iframe serving a page from Facebook’s server, so my current login cookie is used and there’s no need for Facebook to ask for my password. A malicious site would gain nothing by spoofing this dialog.

Since writing this article, Facebook have improved the behaviour of Connect. Now, if you are signed in you see an overlay as before, but if not signed in Connect opens a new window, where all usual browser functionality is available. This a huge improvement and fixes the complaints that follow.

Unfortunately, Facebook Connect then screws up. The whole point of delegated auth is that we stop users entering their passwords into third party sites. It has to stop. That means both actually entering their details into third parties, but also interface that gives the impression of giving your password to a third party. When you are not currently logged into Facebook, you instead see this dialog:

Millions of Facebook users, openly encouraged to enter their password into any site that asks. This is wrong. If the user is not already logged into the service, you should be redirected in a more traditional bounce between pages. That way browser-level phishing tools kick in, the URL in the address bar can be manually inspected by the user and, critically, the user is conscious of logging into a different service.

Facebook ranting aside, the first half of their Connect overlay UI would be very useful to enhance the user experience of OAuth and OpenID.

Here’s a hypothetical Fire Eagle app built into Last.FM.

In the current implementation of OAuth, clicking ‘Get Fire Eagle Location’ would redirect you to the Fire Eagle website, and then you’d redirect back again after clicking ‘Confirm’.

Instead, OAuth apps should do this by default:

No redirect, lighter weight UI and more responsive feedback. This, I think, is something that OAuth APIs should support out of box along with their other language wrappers; provide drop-in support.

Now, this behaviour applies for logged in users only. If you’re not logged in to Fire Eagle for any reason, you should still be moved to the separate site as before. We need to stay strict on keeping users spatially aware of where they are entering their passwords, otherwise the whole effort is undermined.

Overlaid OpenID

With one example down, here’s a mock of how Open ID could benefit from the same integrated flow, this time working with Dopplr, since they already support Open ID:

If not logged in to Yahoo, you get a prompt and just as before, are guided to step through the regular, separate-site process to sign in:

Clicking ‘Sign in to Yahoo!’ would take the user to Yahoo’s standalone page.

How to make this happen?

For this to happen, services need to provide support for it; it can’t be done just at the client side. The dialog-sized interfaces for authorising applications or logging into sites need to provided, and they need to support the ‘break out to enter passwords’ flow. But, sites like Fire Eagle already provide a mobile-scale version of the auth page, so further variants are not a major hindrance.

It also needs a JavaScript component to handle the UI side. With a bit of luck, this only needs to be done once and shared between projects.

The core technology behind OAuth and OpenID is pretty robust. Both have major adopters like Yahoo and Google. OpenID has a bit of a bit of a way to go before users need it, perhaps, but regardless, it’s well into the same phase where user experience needs to be a concerted effort, and the status quo needs to be challenged.

Everything in this post is just a small step from what we already have, it’s just smoothing out the edges. Maybe that’s enough, but I suspect there’s a long way to go and a wealth of other ideas out there.