Thursday, August 4, 2011

Integrating OpenId into my Struts 2 app - Part 2 - Javascript OpenID Selector

Now that we're integrating OpenID authentication into our website, we'll need a way for users to select an OpenID provider.  According to Wikipedia ,there are over two dozen OpenID Providers.  It would seem a daunting task to create an attractive web form where a user can select from a list of approved providers.

Thankfully, the openid-selector project already exists and provides a "a user-friendly way to select an OpenID.  It has been designed so that users do not even need to know what OpenID is to use it, they simply select their account by a recognisable logo."

This component is quite easy to use and I was able to integrate it into my application very easily.

Here's the code from my JSP:
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <s:actionerror theme="jquery" />
    <s:fielderror theme="jquery" />

    <h2>Login to the Flash Cards Application</h2>
    <!-- Simple OpenID Selector -->
    <s:form action="validateOpenId" namespace="/home" method="get" id="openid_form">
        <input type="hidden" name="action" value="verify" />
            <legend>Sign-in or Create New Account</legend>
            <div id="openid_choice">
                <p>Please click your account provider:</p>
                <div id="openid_btns"></div>
            <div id="openid_input_area">
                <input id="openid_identifier" name="openid_identifier" type="text" value="http://" />
                <input id="openid_submit" type="submit" value="Sign-In"/>
                <p>OpenID is service that allows you to log-on to many different websites using a single indentity.
                Find out <a href="">more about OpenID</a> and <a href="">how to get an OpenID enabled account</a>.</p>
    <!-- /Simple OpenID Selector -->

Take note of the"openid_identifier" field.  This field hold the value of the selected OpenID Provider and we'll reference it in both the Struts Interceptor and the Authentication class.

Here's a screenshot of the form in my application:
In my next post, I'll discuss the Action class I'm using to "control" login traffic.

No comments:

Post a Comment