OpenID Authentication Plugin for vBulletin 4

Recently I volunteered to help fix an existing project or develop an OpenID authentication plugin for the vBulletin platform. The group in need was UbuntuForums.org and I would have never known if it hadn’t been for Jorge Castro’s public request for help.

The Story

The existing plugin had been developed specifically for vBulletin 3.x, however, they are (as of writing this) in the process of upgrading their forums to vBulletin 4 especially wanted OpenID to be available when they make the upgrade. That’s where I came in.

Canonical, the company behind Ubuntu, provided me with necessary software licenses for vBulletin 4 and from there it was a lot of late nights attempting to simply get a successful OpenID process to occur.

Working a full time job doesn’t make projects like this as easy as I remember them once being… Nonetheless I was able to successful port the plugin to vB4 where there were several significant differences that took me some time to address and to be honest, the previous code was a bit more complicated to follow than it should have been.

One major change from vB3 to vB4 was the way templates work. I’d never worked with vBulletin before, but I’ve had an extensive amount of experience with phpBB and bbPress in the past. After getting over the frustration of how vBulletin prefers to store ALL template information (in the database rather than pull from template files) I was ready to begin the repair process.

One major annoyance was that vBulletin 4 kept a “deprecated” method intact for vb3 templates that haven’t yet been ported and the deprecated method would printout a warning on the live page letting you know that you should update your templates. That’s not a problem, but vBulletin likes to only release helpful information to License holding, account proving customers. I had a license yes, but was not the owner and unfortunately I was unable to get much of a response from the Ubuntu mailing list about getting access to vBulletin’s online support section.

For anyone having similar issues, I’ve posted the error message that I first came across below. If you got here, then you probably found the vBulletin post regarding this, but if you don’t have access like I didn’t then you’re still in luck…

Warning: fetch_template() calls should be replaced by the vB_Template class in [path]/includes/functions.php on line

While it was pretty clear that fetch_template() was deprecated, I was unable to get a clear usage example of how to use the new vB_Template class. I finally came across a post on StackOverflow that was exactly what I needed. Other issues that I had with fixing the plugin were some issues with SQL queries and were much more critical.

I wrote an article recently on how to debug PHP in real time as you’re using/executing a page or function… all through the very well known Eclipse IDE. If you’re interested in PHP development then you should certainly take a look at that post as it walks you through the setup and will make your life much easier. After tracing through the code over and over, each time finding new little issues and having to walk through the entire log in process again each time… I’d finally managed to get a successful authentication. So, I took a screenshot of my development environment…

vBulletin OpenID Plugin First Success

It wasn’t long after the first success that I was able to pin point other problematic spots faster and then from there everything just fell into place. In fact I had “full functionality” only about an hour after the first success. That didn’t mean that I was finished.

There were still a lot of minor issues that I’d found with the code. Array index out of bounds, corrupt query results in some situations causing a critical database error page to appear, unhandled invalid urls would take the plugin for a ride and ultimately crash, etc.

I’ve now worked out all of the issues that I came across from my own testing. Hopefully Ubuntu and Canonical won’t find any either and the upgrade can occur soon!

Download for Free

If you’re here for this plugin then I’m sure you’ve seen that there aren’t many (dare I say any) that are working, free or at least reasonably priced. Fortunately this plugin is based on an open source PHP OpenID library and Canonical apparently plans to maintain it from here on out in their source control service.

Before you download: I’ve posted a direct download the vanilla release that I first pushed to Canonical, however, its in your best interest to check for a newer version on their source control page for this plugin. That being said, feel free to continue on to download!

Download from me (last updated 2012-09-29)

Download from Canonical

Installation

This plugin contains a README and INSTALL file that should go into plenty of detail to help you install and get going in no time at all. The only thing that is left for you is to optionally improve on the simplistic log in form as seen below.

vBulletin Simplistic OpenID Login Form

While I do indeed love web design and development, I left the OpenID log-in form simplistic for one reason: Every web designer designs differently and its a waste of my time to put much effort into this when people who use it will likely want to use it in a way I never considered. The good news is that, it doesn’t appear in the header by default, so you can actually place this little form ANYWHERE you want. However, due to obvious reasons, you’ll likely find the header as I’ve done to be easiest as it automatically disappears one the user is logged in.

Conclusion

It’s been a fun month or month and a half that I’ve spent dabbling on this plugin. I’m always happy to contribute where I can to communities that I’m interested in or proud of and I consider this volunteer effort to be no different.

I’m also a little excited to see how the vBulletin community accepts this plugin. Will it be a boom or a bust? Only time will tell, but until then hopefully UbuntuForums.org will be enjoying OpenID functionality!

Debugging PHP in Ubuntu using Eclipse

This guide walks you through the necessary steps to configure the Eclipse IDE for PHP debugging. This can be very handy, especially when you’re trying to resolve an issue in a complex PHP application or plug-in.

Things you’ll need

  • Eclipse
  • Eclipse PHP Development Tools (PDT)
  • Xdebug
Assumptions
This article assumes that you are configuring Eclipse and Xdebug for development on a localhost web server. If you are not, be sure to make appropriate adjustments to accommodation your needs. Likely the only changes you will need to make will be differences in connecting to your server verses localhost.

Quick Overview

For those that are unaware, Eclipse is a very popular IDE for developing in Java. However, Eclipse is much more powerful than that and can in fact easily be used for developing in many other languages including PHP.

Xdebug is a brilliant debugging extension designed for use with PHP. Once configured, Xdebug will allow you to remotely connect to your web server… or in my case connect to my development localhost web server. Rather than using crude echo and logging techniques to debug your PHP code, Xdebug allows you to literally step through and inspect values and function flows in real-time.

If you’ve ever scratched your head at a PHP script and thrown in dozens of echos or logging statements to track the execution path then you’ll really come to appreciate the benefits of using Xdebug.

Configuring Eclipse and Xdebug isn’t difficult. In fact its painless with the correct steps on hand. That’s where this guide comes in. I found myself coming across incomplete or outdated forum posts and stackoverflow questions, so I thought I’d post what worked for me.

If you already have Java and Eclipse installed, then just jump ahead to installing and configuring the PHP Development Tools and Xdebug.

Install Eclipse

This will install ~118 new packages, assuming you’ve not already installed some of them, and will total around 255 MB that need to be downloaded.

  1. Open a terminal and enter the following command to install Eclipse:
    sudo apt-get install eclipse

     

  2. After the download completes, open Eclipse to confirm that it installed correctly. Leave it open for our next install.

Install PHP Development Tools (PDT)

  1. If you don’t have Eclipse open at this point, open it up.
  2. Navigate through the menus to: Help -> Install New Software…
  3. You will be prompted with a new window asking you to select a site or enter the location of a site. You should be able to drop down the list of sites and find one labeled “–All Available Sites–”. Select this option and wait for the list below to populate.

  4. Scroll through the list until you find a category labeled “Programming Languages” and click the arrow to expand this list.

  5. Continue to scroll through the Programming languages until you find a item labeled “PHP Development Tools (PDT) SDK Feature” and check the box to the left.

  6. Click Next and continue throw the installation. You’ll have to select that you agree to the terms of installing this software.
  7. After the installation has completed, you will be asked to restart Eclipse to apply changes. Go ahead and restart Eclipse, then move on to the next install.

 

Install XDebug

  1. Open a terminal and enter the following command to install Xdebug:


    sudo apt-get install php5-xdebug
     

  2. After installation completes, there are a couple of files that need to be configured. If you copy and paste the commands below, make sure to check that the quotes that are copied over are regular quotation characters, as they may cause problems if they are not.
    1. sudo gedit /etc/php5/conf.d/*xdebug.ini 


      zend_extension=/usr/lib/php5/20100525/xdebug.so

      xdebug.remote_enable = 1
      xdebug.remote_handler = “dbgp”
      xdebug.remote_host = “localhost”
      xdebug.remote_port = 9000 

    2. sudo gedit /etc/php5/apache2/php.ini 

      Scroll to the bottom and add:

      zend_extension=/usr/lib/php5/20100525/xdebug.so

  3. Restart your Apache server so that the new PHP configuration settings are loaded.

    sudo /etc/init.d/apache2 restart

  4. Confirm that your Xdebug installation was successfully loaded by creating a simple PHP file called “phpinfo.php” and placing it in the public root of your Apache web server. Be sure to include the following in your file, save it then navigate to it in your browser:

    <?php phpinfo(); ?>

  5. After loading the php info page, search for “xdebug”. If you find it listed, then you have successfully installed and configured Xdebug. If not, check back over the steps listed above or consult Google.
Configuring your Eclipse project to connect to Xdebug
After you’ve finally gotten everything installed, you’re probably anxious to start debugging. You’re not far off. The only thing that’s left is to import your PHP script or site and establish a Debug Configuration for your project.
To import a site, simple select: File -> New -> Project… -> PHP -> PHP Project. This will open a new window where you can open PHP files from and existing location. Assuming this location is in your public root directory in Apache, you can work with these scripts in real-time.
After importing these existing files, right click on your new project and select: Debug As -> Debug Configurations…
Make sure that you’ve selected Xdebug as the Debugger type. Click Apply and then Debug. This will open a “Debug” perspective in Eclipse, allowing you to view variables and stack traces live. Assuming you’ve created a breakpoint or selected to break at the first line of the file, you should now see your PHP script paused waiting for you to debug!
Tip: If you’re planning to debug a large project such as a WordPress, phpBB, vBulletin or any other large web application, pointing the Debug Configuration to your index.php makes debugging much easier.
Done
Congrats! By now you should be beginning a new road to a much easier life of PHP development.
If you have any questions, comments or suggests feel free to let me hear them below! I’ll try to help where I can, but I can guarantee I’ll know how to solve any of the issues you may encounter. ;)

Making CSS UL Menu’s Browser-Consistent

If you’ve ever made a web site and wanted it to look consistent from one browser to the next, then you’re well away of the difficulties that are involved. Fixing these sorts of styling issues can be a major annoyance, however, I like to hunt down issues on my own pages from time to time and stand up to the challenge.

One issue that I can across today was dealing with horizontal menu positioning using unordered lists (<UL>) and some positioning. The positioning wasn’t consistent between browsers or even operating systems.

The bad

I started by opening the affected page in multiple browsers (Internet Explorer, Safari, Chrome, Opera & Firefox) on multiple computers (Mac, Linux & Windows) and getting some initial comparisons. There were 3 different variations and (oddly enough) the same browser didn’t necessarily render the same on a different operating system. So there I was. A puzzle… and I like puzzles.

Some of the first things that I inspected were font sizes and families. It occurred to me that different operating systems may differ in fonts, so it seemed like a good starting point. I tested this by forcing a common font: Arial. That wasn’t the problem. The inconsistencies remained consistent.

I also checked into the possibility that the <UL> or <A> elements were applying different heights. Typically anchor elements, <A>, use a display style of inline. If you’re implementing a menu similar to mine then you’re likely applying a block style, which permits better dimension definition of the element. Forcing height on these elements also did not resolve the issue.

I was running out of ideas, but then it hit me. Line-Height. While the other styles appeared to be consistent between browsers and operating systems, there was one style that I’d previously worked with and knew was certainly NOT consistent: line-height.

The good

After forcing a consistent line-height in my CSS, all browsers suddenly began respecting my intended styling. Sigh of relief.

On that note, its worth bringing up the success that browser competition has brought to HTML and CSS rendering standards over the past few years. The push for the fastest and most capable browser has brought a scattered group of browsers a little closer and the result is that we get to enjoy dealing with fewer and fewer bugs.

While your average Joe web developer may have dug around for hours for this issue to no avail, I must say… I thought it was nice to face such a subtle issue rather than being forced to use some crazy IE specific hacks like for legacy IE.

UbuntuForums.org Site Makeover via UserJS

40915_before

A while back there was a neat little styling script being passed around that tuned the Ubuntu Forums to match the new official designs a little more closely. While its not official and no where near a perfect solution, it does dramatically improve the appearance of the forums overall.

Before

After

To use this, all you have to do is download and install the Stylesheet or UserJS file and configure it in your browser! I’m using the UserJS version, but you may prefer the other. Either way, enjoy!

Get Steam Specials via RSS Feed

steam-specials-via-feed43

This is just a little hack I’ve used so I can subscribe to the “Specials” that are periodically released and published on the Steam website.

If you’re interested in letting your Feed client simplify your life by bringing the Steam updates directly to you then I suggest you subscribe to the feed that I’ve setup (via a great free service call Feed For Free).

The Steam News – Specials feed:

http://feed43.com/4758788726706067.xml

The Steam News – Announcements feed:

http://feed43.com/7724635415454743.xml

When I searched for a feed for these Specials I came across one forum post after another asking the same thing. We all know how annoying that can be, so to remedy the situation I decided to post a solution myself. ;)

As you can see below, these pages don’t have feeds of their own, but the very awesome Feed For Free site will let you pull the updates straight into your feed reader with ease. See my Google Reader pictured below.

Happy Halloween

Halloween Design 2010-11-01 at 8.53.26 AM

Hope everyone had a great Halloween this year! If you missed visiting my blog, then you also missed my Halloween theme!

Thats about as far as my Halloween decorations went (other than dressing up as a pirate) this year, but I saw a lot of great looking jack-o’-lanterns this year and some really great costumes at Moogfest! Had a blast!

Here’s a quick video of this random guy dancing during Massive Attack. :D

We got to see MGMT, Dan Deacon, Girl Talk, Thievery Corporation, Massive Attack, Shiongle, Disco Biscuits and a few others. Overall, it was a pretty amazing Halloween weekend! If only they were all that way…

Ubuntu 10.10 Banner

38

Recently I was looking through the Ubuntu 10.10 banners and really liked the simplistic design of one by Anthony Scarth.

Curious about adding it to my blog (as you should now see in the right column), I fired him an email. Unfortunately he didn’t have a script prepared, but still offered up the images!

Taking a little time, I grabbed the old script for an Ubuntu 10.04 Banner, made a few modifications (and corrections) and got the banner up and ticking in no time!

If you’re interested in using one of these two banners on your site then you’ll be happy to know I’m posting easily linkable scripts to these two right here!

Orange
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/orange.js'></script>

Purple
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/purple.js'></script>

Copy and paste the style that you’d like to use into your blog or web site. If you have any problems just let me know.

Be sure to give Anthony a shout out and thanks if you like his design as well! You can find his email listed on the Ubuntu banners page linked above.

WTF Should I Watch?

Screenshot of the WTFSIW page in action..

Just for laughs I threw together this quick page that gives you a new movie or show suggestion in a humorous way each time you load the page.

Screenshot of the WTFSIW page in action..

The idea for this type of site is not my own and was inspired by site like What The F*** Should I Make For Dinner, F***ing Movie Reviews, The F***ing Weather and others.

The page works off of three very short files and the code is minimal, so if anyone’s wanting to make something similar just let me know if you’re curious about my implementation of this.

Hopefully you find this both useful as well as funny! Comments, retweets and other shares are always appreciated!

Sputnik: ECMAScript 3 conformance test suite

An experimental plot to illustrate how the latest stable browsers compare.

Today, The Chromium Blog has officially released their ECMAScript 3 conformance test suite in a form that is more friendly to test in your browser. The test contains over 5,000 tests (currently 5,246) and continues to grow!

The Chromium Blog has also posted some initial results among the top web browsers for Windows (emphasis is mine).

In this example, when running Sputnik on a Windows machine, we saw the following results: Opera 10.50: 78 failures, Safari 4: 159 failures, Chrome 4: 218 failures, Firefox 3.6: 259 failures and Internet Explorer 8: 463 failures.

An experimental plot to illustrate how the latest stable browsers compare.

Putting that into terms of 100% conformance rates: Opera 10.50: 98.5% successful, Safari 4: 97.0% successful, Chrome 4: 95.9% successful, Firefox 3.6: 95.1% successful and Internet Explorer 8: 91.2% successful.

Running the test myself in the latest Opera 10.50 snapshot for Linux (Build 6242) I’m seeing a solid 77, proof that Opera 10.50 is progressing still!

As explained in their post, the goal of this test is not related to Javascript performance in terms of speed, but in terms of conformance to the spec. Ideally all browsers would be in the center of the bullseye, meaning they all conform and behave (nearly) identically.

The Sputnik tests have been released as an open source project, so if you’re interested in providing conformance test cases to improve the future web..now is a perfect chance to get involved. ;)

To run the test yourself or learn more about it, visit: http://sputnik.googlelabs.com/

Solution To WordPress getimagesize() Error

If you’ve for whatever reason noticed that your WordPress website is generating errors similar to the following then I may have a solution for you.

Warning: getimagesize(/home/.some-dir/example.com/folder/httpd.www/wp-content/uploads/some-image.jpg) [function.getimagesize]: failed to open stream: No such file or directory in /home/.some-dir/example.com/folder/httpd.www/wp-content/blah/blah/blah.php on line 123

I noticed that some pages that generated image information were printing errors out on my pages with private server file structures included. Generally you don’t want to see this printed out to the public. ;)

I’m not guaranteeing a fix for you, but rather what worked for me.

If you are getting an error link the one that I’ve listed above, more specifically the “failed to open stream: No such file or directory,” then you may be about to fix it in only a few minor steps.

Things you will need:

  • FTP (I use FileZilla)
  • phpMyAdmin
  • Ability to add a new plugin to your site
  • Patience

Procedure

Single quotes must be the normal ascii quotes. Chances are, if you copy and paste from my blog, they will be the wrong type so double check that as it could give you problems. ;)

  1. First and foremost, make sure to backup your entire database to a safe place. I’m not liable in the case that you don’t backup your database and this procedure borks your blog (or any other case for that matter). ;)
  2. Create a new file named “abstest.php” and upload it to your blog’s root directory after entering the following code into it:
    <?php define('ABSPATH', dirname(__FILE__).'/'); echo ABSPATH; ?>
  3. Open a new browser tab and navigate to “http://www.your-website.com/abstest.php“. You should find a short page with the printout of your servers absolute path.
  4. Check that the path provided by this test file matches the base path printed out by the getimagesize() error exactly. In my case, my server had changed slightly so the differences were similar to the following:
    /home/.some-dir/example.com/folder/httpd.www/
    /home/example.com/folder/httpd.www/
  5. If you find a mismatch, then you’ve found your problem and the rest is simple. If not, then my tips will most likely not solve your particular WordPress error(s).
  6. If you’ve found a mismatch, then continue: Open a new browser tab and navigate to your phpMyAdmin interface. Select your WordPress database, then click Search. I searched all tables for a match of the path that was different, in my case it was “.some-dir/“.
  7. If there are matches found then you need to click the SQL tab at the top (preferably in a new tab) and paste the following (making sure to edit it to match the table and fields you need) and run it to find and replace that changed part of the path.
    update TABLE_NAME set FIELD_NAME = replace(FIELD_NAME, ‘find this string’, ‘replace found string with this string’);
    For more information on SQL find and replace, either search Google or read this.
  8. After replacing all of the affected tables and strings, your images should be properly address. You’re not done yet though.
  9. Open WordPress Plugins and add/install a plugin named “Regenerate Thumbnails“. After installing it, make sure to activate it. ;)
  10. In your Admin panel, find the Tools menu and expand it. You should see a menu item labeled “Regen. Thumbnails”…click it. This will open a page with a start button. Clicking this button will begin the process of correcting your thumbnail dimensions as well as other metadata. It will take some time depending on the number of thumbnails you have accumulated.
  11. After the progress bar reaches 100% it will notify you that it is complete. You’re all done! You may need to clear your cache to refresh any pages that still generate the previous error message.

If you had any problems with the above mentioned procedure, I would suggest restoring your database using your backup copy and either trying again, paying someone to do it for you or just forgetting about it. ;)

If it works then great! If not then sorry you’ve wasted your time. It worked for me, so maybe it will work for you as well. :D

UserJS: Twitter-Rounded

twitter-css-2-opera

I’ve thrown together a quick script for Opera that you can use if you’d like to see rounded corners (aka border-radius). It seems that Twitter currently sends Opera a style sheet with empty settings for rounded corners…

…so, all I did was write a script that will insert a link to a style sheet that’s stored here at kyleabaker.com which overwrites these empty styles with the correct ones.

If you’ve never used scripts before then you should first learn how to setup UserJS. After you’ve setup Userjs, you may need to enable UserJS for secure pages (https) in Opera’s internal configuration page….”opera:config#UserPrefs|UserJavaScriptonHTTPS“. Just check/enable that option. Make sure to click save!

Lastly, save the “Twitter-Rounded” script to your UserJS folder that you setup in the steps above.

Now you have a more pleasant looking Twitter page in Opera 10.5. ;)