Skip to content

Adding OpenId support to a Scala / Lift application

November 23, 2009

The Lift web framework includes basic support for OpenId using the the openid4java library. I wanted to learn a little more about Scala, Lift and OpenId – so what follows are my notes on how to get this running, along with some minor improvements that I have made.

You will want to start by familiarizing yourself with the OpenId chapter in the (rather excellent) Lift book.

Out of the box, the lift-openid support gets  you a vanilla login form where the user can enter their OpenId URL and submit the request.  Something that looks like this:

While this is nice for identity geeks, your grandma isn’t going to be using this anytime soon. The OpenId UI issues are being hotly debated as you read this, and I won’t open that can of worms. Suffice to say that mere mortals will prefer to use a “Nascar” branded interface that let’s them login using their favourite email provider such as Google or Yahoo (The Nascar UI is a reference to the logos that are plastered over the race cars).  Most users won’t have a clue what their OpenId provider (OP) URL is , but they can spot the logo of their email provider a mile away.

Too add a slicker login interface, I grabbed a copy Jarret Vance’s OpenId JQuery Plugin.   Lift uses JQuery by default, so integration of Jarret’s plugin is quite easy.  The plugin consists of provider logos (put these in your /webapp/images directory), a Javascript JQuery extension (jquery-openid.js – put this in your webapp/scripts directory), and some html templates for the login page.

I created a Lift template for the login page and placed it under my webapp/templates-hidden directory. The template is pretty much a copy of the default template, but adds some javascript for the openid integration. In the head tag of the template include the following:


<script id="jquery" src="/classpath/jquery.js" type="text/javascript"/>
 <script id="json" src="/classpath/json.js" type="text/javascript" />
 <script id="openid" src="/scripts/openid-jquery.js"  type="text/javascript"/>
 <script type="text/javascript">

 $(document).ready(function() {
 openid.init('openIdUrl');
 });
 </script>

Note that Lift performs “head” merging – which is to say that any content withing <head> tags in a snippet is merged in with the templates head tag. So the above approach is not strictly necessary.

Now that we have a login template, we can define the login page. Most of the content is copied verbatim from Jaret’s plugin

<lift:surround with="openid" at="content">
 <head>
 <title>
 <lift:loc>Login</lift:loc>
 </title>
 </head>
 <h2>
 <lift:loc locid="Welcome">Login Page</lift:loc>
 </h2>
<p>This site uses <a href="openid.net">OpenId</a> so you don't have to remember yet-another password.
 <br/>Enter your OpenId URL, or click one one of the icons below to sign on with an existing account.
 </p>
 <!-- Simple OpenID Selector -->
 <form action="/openid/login" method="post" id="openid_form">
 <div>
 <ul>
 <li title="OpenID"><img src="/images/openidW.png" alt="icon"/>
 <span><strong>http://{your-openid-url}</strong></span></li>
 <li title="Google">
 <img src="/images/googleW.png" alt="icon"/><span>https://www.google.com/accounts/o8/id</span></li>
 <li title="Yahoo">
 <img src="/images/yahooW.png" alt="icon"/><span>http://yahoo.com/</span></li>
 <li title="AOL screen name">
 <img src="/images/aolW.png" alt="icon"/><span>http://openid.aol.com/<strong>username</strong></span>
 </li>
 </ul>
 </div>
 <fieldset>
 <label for="openid_username">Enter your <span>Provider user name</span></label>
 <div><span></span><input type="text" name="openid_username"/><span></span>
 <input type="submit" value="Login"/></div>
 </fieldset>
 <fieldset>
 <label for="openid_identifier">Enter your <a href="http://openid.net">OpenID</a></label>
 <div><input type="text" name="openid_identifier" id="openid_identifier"/>
 <input type="submit" value="Login"/></div>
 </fieldset>
 </form>
</lift:surround>

For brevity I have removed some of the provider logos from the example. The nice thing about this plugin is that it is very easy to add or remove providers.

This gives us a nice “Nascar” login page that looks like this:

Now this will make both the geeks and grandma happy.

In the next blog entry (when I get around to it…) I will describe how to add support for the OpenId attribute exchange protocol (AX). This enables our application to retrieve additional user attributes from the provider such as the user’s email address, screen name, preferred language, etc..  Stay tuned.

Advertisements
2 Comments
  1. Matthew permalink
    March 30, 2011 8:11 am

    Do you have a tarball of a minimal lift project demonstrating this?

    • wstrange permalink*
      March 30, 2011 8:29 am

      I am really sorry – but I don’t. I moved computers and lost a bunch of projects in the transition.

      I am going to have to start using github for this kind of stuff…

Comments are closed.

%d bloggers like this: