jvance.com

The jQuery OpenID Plugin is a free plugin to add easy login support for the most popular OpenID RP's such as Google, Yahoo, AOL, and more.  The inspiration for this plugin is based on openid-selector, openid-realselector, and ID Selector.  This selector is different because it does not hide the markup details in javascript.  Therefore, you can easily add new providers or rearrange the existing ones without digging into the javascript.  The login form will still work for normal OpenID logins if javascript is disabled (see screenshot).

The plugin defaults to the first provider in the list which in the above case is a normal OpenID login box.  There are two other types of providers, direct providers and username providers.  A direct provider does not require any input and will automatically direct you to the provider login page.  A user provider assists in building your OpenID URL.   For example, Google and Yahoo are direct providers and AOL is a username provider that asks for the screen name.  The other providers, such as myOpenID and flickr are also username providers.  Clicking each icon will alter the OpenID URL that you are building.

The HTML for the above form is simple.  There is a list of providers and then two inputs to support either the OpenID provider or the username provider (denoted by the class type). Each item in the list denotes the OpenID endpoint .  For the username providers, the keyword "username" is replaced by the value input into the openid_username textbox.  You can add new providers by adding them to the list.  Also note the javascript call to activate the plugin at the bottom.

The CSS (shown below) floats the items in the list so they appear inline.  The highlight class shows which item is selected.  The first fieldset defaults to hidden.

The plugin works by attaching a different click event to each type of provider.  For example, the below javascript sets up the username provider.

The whole plugin is very light weight at only 2.5KB javascript (not minified or compressed), 1KB CSS, and 3KB for the HTML.

View all the Javascript

Download the plugin (js + css + html + images)

License update: You may freely use the code in accordance with the Creative Commons Attribution License.

Provider Listing

Here is a listing of providers that you can use to customize your plugin . Just view the source and copy and paste the <li> into your list . Some providers have multiple icons to choose from so just keep the image you like best.

Additional Images

If you have added providers not listed here, please let me know so I can add them. If you want to create new wide icons, you can download the Paint.Net pdn file here: OpenId.pdn (zipped 51 KB).