jvance.com

.net, c#, asp.net, linq, htpc, woodworking

jQuery OpenID Plug-in

Posted in Software by JarrettV on 2/10/2009 4:17:00 AM - CST

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).

jQueryOpenIdPlugin

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.

jQueryOpenIdPluginUser

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.

OpenIdHtml

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.

OpenIdCss

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

OpenIdUserJs

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.

  • icon http://{your-openid-url}
  • icon https://www.google.com/accounts/o8/id
  • icon http://yahoo.com/
  • icon http://openid.aol.com/ username
  • icon http://username.myopenid.com/
  • icon http://flickr.com/ username/
  • icon http://technorati.com/people/technorati/ username/
  • icon http://username.wordpress.com
  • icon http://username.blogspot.com/
  • icon http:// username.livejournal.com
  • icon http://claimid.com/ username
  • icon http://username.myvidoop.com/
  • icon http://username.pip.verisignlabs.com/
  • icon http://{endpoint not yet released}
  • iconhttp://www.myspace.com/username

Additional Images

myopenid flickr myspace facebook
openid google yahoo aol myopenid flickr myspace facebook

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).

Comments

Gravatar
Posted by George on 2/13/2009 8:36:50 AM - CST
nice
Gravatar
Posted by derigel on 2/14/2009 12:57:31 PM - CST
Nice stuff. Will use on my site.
Gravatar
Posted by OpenID User on 2/25/2009 1:29:12 PM - CST
very cool!
Gravatar
Posted by OpenID User on 2/27/2009 10:29:31 AM - CST
I like it. Why not facebook yet?
Gravatar
Posted by OpenID User on 3/4/2009 7:16:34 PM - CST
Cool
Gravatar
Posted by OpenID User on 3/25/2009 11:43:09 PM - CST
wow, look cool... I love it
Gravatar
Posted by dnn on 3/26/2009 6:19:23 AM - CST
great plugin
Gravatar
Posted by OpenID User on 4/25/2009 6:52:16 AM - CST
wow love the look
Trackback  on 4/28/2009 1:30:23 PM - CST
Gravatar
Posted by OpenID User on 4/29/2009 5:34:11 AM - CST
Great
Gravatar
Posted by 2012ua.net on 4/29/2009 5:45:33 AM - CST
:-) Thanks!
Gravatar
Posted by Daverix on 4/29/2009 12:11:09 PM - CST
Pretty nice :)
Gravatar
Posted by OpenID User on 5/12/2009 10:22:23 AM - CST
Great idea. Its a bite annoying to be redirected to the RP ( in my case, Google ) but you did great
Gravatar
Posted by tjrobinson on 6/21/2009 4:17:42 AM - CST
Where can we download it?
Gravatar
Posted by JarrettV on 6/22/2009 11:29:38 PM - CST
fixed download link above
Gravatar
Posted by FWS on 6/24/2009 6:51:03 AM - CST
Your OpenID plugin is great :-)
Thanks!
Gravatar
Posted by JonZ, JarrettV on 7/16/2009 12:49:00 PM - CST

Very nice. I think I might add this to the phpBB OpenID MOD that I am working on.

Gravatar
Posted by OpenID User on 7/29/2009 2:12:52 AM - CST
Thanks
Gravatar
Posted by www.google.com/accounts/o8/id?id=AItOawnGSN0qqsRmuTG5hAIWfImN8keXjYi4xgo on 8/4/2009 4:13:13 AM - CST
Very interesting, thank you.
Gravatar
Posted by www.google.com/accounts/o8/id?id=AItOawlnQ48wODdcAKPHk2GBgTfRSwtpSd6RguI on 8/5/2009 4:37:47 PM - CST
I'll give it a try :-)
Gravatar
Posted by me.yahoo.com/a/lE2fcXF_xYCLi3n0qTzafWTHp58uwT0- on 8/7/2009 9:33:31 PM - CST
awesome
Gravatar
Posted by Google Wave on 8/8/2009 2:41:14 AM - CST
I want to integrate OpenID on my phpBB3 forum. Does it require .htaccess ???
Trackback  on 8/30/2009 6:59:00 PM - CST
Gravatar
Posted by Manir on 9/28/2009 11:10:05 PM - CST
May be I am wrong or don't know what to do.
As I see, by clicking these OpenId provider - it will redirect to provider sites and after logging in there - it will redirect to my page - but how do I collect all info about user like openid, name, sex, date of birth etc. Please suggest or send me a link. I appreciate your response. Thanks.
Gravatar
Posted by JarrettV on 9/30/2009 6:15:36 PM - CST
@Manir: If you are using .NET you can learn more about OpenID over at dotnetopenid
Gravatar
Posted by Manir on 10/2/2009 10:43:07 AM - CST
JarretV,
Thanks for your suggections. I know about dotnetopenid. I am exploring all availble tools/plugins/library before I implement on my site. I like this JQuery plugin implementation (as a Selector). Is it possible to use this plugin as selector (I mean user will use this to select the provider) - then it redirects them to provider site, and when provider site redirect the user to my site - I can use dotnetopenid (on asp.net server side) - to capture all the data i need and login user in my site. I appreciate your suggestion. What would be the best implementation? How you are implementing it by using this plugin and then what? with regards, Manir
Gravatar
Posted by JarrettV on 10/8/2009 10:04:19 AM - CST
@Manir: you can see all the code over at http://code.google.com/p/atomsite/ and also some more direction here: Integrating OpenID in an ASP.NET MVC Application using DotNetOpenAuth
Trackback  on 10/16/2009 1:56:06 AM - CST
Gravatar
Posted by juan on 10/16/2009 2:01:09 PM - CST
guenisimo
Gravatar
Posted by ddaa.myopenid.com on 11/16/2009 10:47:17 AM - CST
I cannot see any licence file or distribution terms in the zip file. That's a pity because it means nobody can legally use it.
Also, when I logged in using this very selector to post a comment on this post, using Chromium, clicking on the image of the OP had no effect, and I had to resort to copy-pasting the url.
Gravatar
Posted by exact55 on 1/21/2010 11:43:44 PM - CST
Please excuse the dumb newb question. What does this plugin plug into?
What other components does it need?
Gravatar
Posted by JarrettV on 1/22/2010 4:11:29 PM - CST
@exact55 this is a jquery plugin, you also need server side code to handle the OpenID messages
Gravatar
Posted by JarrettV on 1/22/2010 4:30:36 PM - CST
@ddaa.myopenid.com you may freely use the code
Gravatar
Posted by Hai-Etlik on 9/19/2011 8:18:43 PM - CST
Like ddaa.myopenid.com, I can't really use this without a clear idea of the license. A blog post saying "you may freely use the code" is just too vague and detached from it. If you were to pick a specific license, like the MIT or Apache license, I'd be happy to use it.

Add Comment

Login using
Google Yahoo flickr AOL
and more
Or provide your details
Please enter your name. Please enter a valid email. Please enter a valid website.
Please supply a comment.
4.4 (29)
on 1/22/2010 4:39:18 PM - CST

Recent Entries

© Copyright 2014 Powered by AtomSite 1.3.0.0