Porotype Notes from a Vaadineer

OAuth with Vaadin - Login with Facebook/Twitter/..

Easy user registration and login still seems to be somewhat of a uncracked nut. Not because we’re not trying, but it’s actually a pretty hard nut to crack - at least in a way that pleases both developers and users. For example, while OpenID first seemed like a pretty good idea, it seems it’s just too weird and complicated for the regular user, and recently several fairly prominent sites have abandoned it. 

The new favourite seems to be OAuth, popping up pretty much everywhere in the form of “Log in with X” -buttons. The reason is obvious: it’s dead simple and fast for the users to use and understand - and that includes both registration and login. You just “Log in with Facebook”, and you’re done. OAuth is also quite easy to implement in your application,  especially using some of the  libraries available. 

In this post, I’ll present a simple solution for providing such login functionality in Vaadin applications (note that this is just one side of the coin - other OAuth scenarios are not presented).

Though there are excellent libraries for Java applications that can be used with Vaadin, I decided to take it one step further and wrap one of these libraries into an even more simple wapper: OAuth Buttons. Yes: it’s a set of Buttons for Vaadin, making log in with X as easy as new XButton().

Well, almost, here is the full example:

OAuthListener oauthListener = new OAuthListener() {
   public void userAuthenticated(User user) {
      OAuthWindow.this.setContent(new LoggedInView(user));
   }

   public void failed(String reason) {
      OAuthWindow.this.showNotification("Login failed", reason,
                            Notification.TYPE_ERROR_MESSAGE);
   }
};

// Login with Facebook:
addComponent(new FacebookButton("FACEBOOK_API_KEY",
                    "FACEBOOK_API_SECRET", oauthListener));

The callback will be called when the user has performed the login with the service in question.

What happens, from a fairly high level perspective,  looks something like this:

  • the user browses to your application and clicks ‘Log in with Facebook’

  • the user is forwarded to Facebook, which asks the user to log in there (if he’s not already), and whether he wants to log in to your application

  • the user is returned to your application, along with some OAuth tokens
  • you can use the tokens to get more informations about the user, and interact with the service’s API

If the user is a first time user, you can then ask him for additional information, such as email address (which you sometimes can obtain via OAuth, but usually not). Please note that it is much better to get out of the way as quickly as possible, and let the user get on with the cools stuff in your application instead - after all, that’s why he came. Ask for additional information when you actually need it.

Other uses

When the user 'logs in’ to your application, he actually authorizes you to connect to his account on the service he used for login, so you can do certain things (i.e API access). What you can do depends on the service (usually your application can ask for permission to do various things), but a fairly typical thing you could do is to post “status” messages or tweet. 

You could also use the OAuth Buttons to connect several accounts to one user, in order to be able to interact with those services (e.g post messages to both Twitter and Facebook*).

OAuth Buttons makes use of the excellent Scribe OAuth library, and you can use the Scribe APIs directly to do stuff that OAuth Buttons do not support directly - the buttons are mostly intended for login.

* please don’t crosspost, it’s incredibly annoying

Using OAuth Buttons

As could be seen in the example, using OAuth Buttons for login is super simple. That is, once you have your API keys. Each service usually requires you to register your application to obtain API keys, and the OAuth login will not work without API keys. The process for obtaining the keys differ from service to service; here are some quick screens from the most prominent services:

Facebook

Twitter

LinkedIn

As usual, let me know if something is unclear, or if you want something more in-depth about some aspect.

The Vaadin Directory page for the OAuth Buttons add-on has links to all the relevant resources, such as sources, issue tracker, and forum thread:

http://vaadin.com/addon/oauth-buttons