Updating WP-OpenID to support ID Selector

Today I spent a few min­utes mod­i­fy­ing the WP-OpenID plu­gin to sup­port JanRain’s ID Selec­tor.

I added OpenID sup­port to billso.com last month. This page has more infor­ma­tion about the OpenID signle sign-on (SSO) sys­tem. Short story: OpenID lets users log in to a site with an ID they obtained on another web site. There are many dif­fer­ent providers of OpenIDs, and many Inter­net users have not heard of the OpenID system.

So the ID Selec­tor box pro­vides oppor­tu­ni­ties to pro­mote the OpenID sys­tem, and to add more users to a web site by sup­port­ing OpenID authentication.

The ID Selec­tor is a small drop­down box that gives the user sev­eral choices for an OpenID provider. The sys­tem uses a small piece of JavaScript that calls a cen­tral­ized server at www.idselector.com and gen­er­ates an attrac­tive selec­tion box.

WP-OpenID doesn’t sup­port ID Selec­tors yet, so I mod­i­fied the code myself. The code is avail­able in this ZIP file as interface.php

Instal­la­tion is easy. Sim­ply down­load my zipped file, extract the php file, edit it to include the ID Selec­tion script that can be gen­er­ated here, and upload the mod­i­fied php file to your Word­Press server at wp-content/plugins/openid/

The only hitch I have seen is that the selec­tion but­ton does not ren­der prop­erly in Safari, pos­si­bly because Safari uses its own weird but­tons. In Fire­fox and Inter­net Explorer, it seems to work.

I’m tested this against WP 2.51 and WP-OpenID 2.1.8. I’m sure other peo­ple will find issues, so please add a com­ment to this post and check out my other OpenID posts, too.

For Word­Press sysads who want to type in the mod­i­fied code them­selves, here’s an exam­ple. The code that must be changed is found in func­tion 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
}

Tagged as: administrivia, authentication, janrain, openid, plugin, WordPress