billso.com

Today I spent a few minutes modifying the WP-OpenID plugin to support JanRain’s ID Selector.

I added OpenID support to billso.com last month. This page has more information about the OpenID signle sign-on (SSO) system. Short story: OpenID lets users log in to a site with an ID they obtained on another web site. There are many different providers of OpenIDs, and many Internet users have not heard of the OpenID system.

So the ID Selector box provides opportunities to promote the OpenID system, and to add more users to a web site by supporting OpenID authentication.

The ID Selector is a small dropdown box that gives the user several choices for an OpenID provider. The system uses a small piece of JavaScript that calls a centralized server at www.idselector.com and generates an attractive selection box.

WP-OpenID doesn’t support ID Selectors yet, so I modified the code myself. The code is available in this ZIP file as interface.php

Installation is easy. Simply download my zipped file, extract the php file, edit it to include the ID Selection script that can be generated here, and upload the modified php file to your WordPress server at wp-content/plugins/openid/

The only hitch I have seen is that the selection button does not render properly in Safari, possibly because Safari uses its own weird buttons. In Firefox and Internet Explorer, it seems to work.

I’m tested this against WP 2.51 and WP-OpenID 2.1.8. I’m sure other people will find issues, so please add a comment to this post.

For WordPress sysads who want to type in the modified code themselves, here’s an example. The code that must be changed is found in function login_form() as follows:

<label>Or login using your
<a class="<?php echo $link_class; ?>"
href="http://openid.net/">OpenID</a> url:<br/>

<input type="text" name="openid_url"
id="openid_url" class="input openid_url"
value="" size="20" tabindex="25" /></label>

</p>

<!-- this section remaps the OpenID Selector
box to the proper field on the form-->
<script type="text/javascript">
  <!--
      idselector_input_id = "openid_url";
    -->
</script>

<!-- insert the ID SELECTOR script that
you generated at idselector.com AFTER THIS LINE -->

<!-- BEGIN ID SELECTOR -->

<script type="text/javascript"
id="__openidselector"
src="https://www.idselector.com/selector/hex"
charset="utf-8"></script>

<!-- END ID SELECTOR -->
<!-- the rest of the interface.php
proceeds as originally written-->

<?php
}