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.

How to setup and use Tor Anonymity in Ubuntu

tor-vidalia-control-panel-ubuntu-11-04

Just before the new year, I saw a news article by Wired that highlighted flaws found in the Tor Anonymity Network. I had never used Tor, but I knew what it was, the benefits it could provide, and a bit about how it worked.

With a little free time on my hands I decided to set it up and see what all the fuss was about. At the time I was installing the Tor components in OS X, but I was curious about installing it in Ubuntu and the resources and instructions that I came across were not as straight forward as they could have been. That is where this post comes it, to provide a simple step by step guide with no fuss.

What is Tor?

This is how Wikipedia explains Tor:

Tor is a system intended to enable online anonymity, composed of client software and a network of servers which can hide information about users’ locations and other factors which might identify them. Use of this system makes it more difficult to trace internet traffic to the user, including visits to Web sites, online posts, instant messages, and other communication forms. It is intended to protect users’ personal freedom, privacy, and ability to conduct confidential business, by keeping their internet activities from being monitored.

What does it look like?

Tor itself doesn’t have a graphical user interface (GUI), but there is an application known as Vidalia which provides a nice and simple user interface for controlling all of your Tor needs.

When installing Tor in Ubuntu, you will need to install 3 components: Tor, Polipo, and Vidalia. Tor and Vidalia should now be obvious to you (since I’ve explained that Vidalia provides a GUI to Tor).

Again, according to Wikipedia here is what Polipo is:

Polipo is a fast and lightweight, forwarding and caching proxy server, SOCKS proxy and computer software daemon.

Install Tor in Ubuntu

This is really quite simple and I could easily provide a simple bash script to automate all of this for you, but that would mean that I would have to maintain it and that you wouldn’t learn anything. ;)

For simplicity, I will write this guide assuming you are using Ubuntu 10.10, aka Maverick. If you’re using a different version, make sure you change the necessary bits below.

  1. Open “Software Sources,” select the “Other Software” tab, click the “Add” button at the bottom and paste the following:

    deb http://deb.torproject.org/torproject.org maverick main

    Click “Add Source,” then click Close. When it asks if you want to Reload, click yes and ignore any errors for now.

  2. Open a Terminal and add the Tor Repository keys and update Apt:

    gpg –keyserver keys.gnupg.net –recv 886DDD89
    gpg –export A3C4F0F979CAA22CDBA8F512EE8CBC9E886DDD89 | sudo apt-key add –
    sudo apt-get update

  3. Install Tor, Polipo, and Vidalia:

    sudo apt-get install tor tor-geoipdb polipo vidalia -y

    When prompted during the installation of Vidalia, select the option to permanently replace (or however it is worded).

  4. Download a pre-made config file for Polipo:

    wget https://gitweb.torproject.org/torbrowser.git/blob_plain/HEAD:/build-scripts/config/polipo.conf
    sudo mv /etc/polipo/config /etc/polipo/config.bak
    sudo mv polipo.conf /etc/polipo/config

  5. Now Stop and Restart both Tor and Polipo for safe measure:

    sudo /etc/init.d/tor stop
    sudo /etc/init.d/polipo stop
    sudo /etc/init.d/polipo start

    Open the application Vidalia when you would like to connect to the Tor network. If you want it on by default, you can always set Vidalia to autostart with your computer.

  6. All thats left is to configure your Applications to use the Tor proxies! If you don’t adjust the network settings of your applications to use the Tor proxy settings then you’re not using Tor at all. You can confirm that Tor is indeed working by visiting the Tor detector page.

If you run into issues for any reason, check back through the steps listed above. If that still doesn’t fix them, you might check the Community Ubuntu Documentation on Tor page or the official Tor for Linux/BSD/Unix page.

Configuring applications to use the Tor proxies

There are 2 types of configurations for Tor:

  1. HTTP or HTTPS – Typically used for web browsers such as Opera, Firefox, Safari, Google Chrome, etc.

    Host: 127.0.0.1
    Port: 8118

  2. Sockets – Typcially used for instant messaging applications such as Trillian, Digsby, MSN, AOL, Empathy, Pidgin, etc.

    Host: 127.0.0.1
    Port: 9050

Nearly any application that allows you to adjust network settings by using proxies can make use of the Tor Anonymity Network. Configuring your application of choice is a matter of selection to use HTTP or Sockets.

If you’re unsure, use trial and error. ;)

A great note that I came across on the Community Ubuntu Documentation page for Tor that I think everyone should read carefully before using Tor is as follows:

What’s the use of having Tor and Privoxy setup without enabling your new anonymous proxy in your common web applications? At this time Tor only supports HTTP and HTTPS traffic, but still recommends using Tor in your browser’s proxy settings for all protocols as a hidden image link can give away your IP address if linked to an image on an FTP site.

Conclusion

Hopefully by this point you’ve successfully configured Tor for all of your anonymity needs. Will Tor works great, it only works great if you’ve configured it correctly.

Some Tor connections may be slower than others. If you’re experiencing a connection that is simply too slow for your needs or if you need a new ip address so you can get that file from RapidShare without having to wait for an hour, simply open Vidalia Control Panel and click “Use a New Identity.”

Remember that Tor can be used for Windows and Mac, and is more straightforward to install for them as well.

While there have been a few flaws exposed, as mentioned before, I would tend to think the risk of being identified over Tor is very low since the attacks would have to occur on the same network that you’re connected to. I typically only use Tor at public internet access points (which is where these attacks would be most likely to occur), but it can be very handy in many situations and will likely continue to be on the list of my apps to install for a long long time.

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…

MacBook Pro

0929102047

In with the new, out with the old. I got my new MacBook Pro 13″ around noon today, but had to wait until noon to start playing around on it.

Here are my phones blurring pictures of the old HP dv4000 (left) and the new MacBook Pro (right).

Notice the HP isn’t running. Thats because it no longer even boots thanks to some internal hardware problems.

This time around I decided that I wanted a smaller, more portable laptop. Since I’ve had plenty of Windows computers and have been running Ubuntu Linux for a few years, I decided it was about time for me to get a Mac.

So far I’ve gotten the basics installed and setup thanks to suggestions from my brother and friends.

  • Opera
  • Adium
  • Skype
  • Last.fm Scrobbler
  • Tweetie
  • Dropbox
  • Coda
  • QuickSynergy
  • Xcode

I’m still testing out Xcode to see how I like it, but my first impression of the 3gb download wasn’t too positive. If it works well then great, but I was hoping to find a good medium between size and features.

I’ve also tweaked my MacBook’s name so it appears a little more customized on the network (using this guide). Now it appears as “kyBook Pro.” :D

Have some suggested apps or tips for me, or something better than what I’ve listed above? I’d love to hear what you like to install on your Mac!

Eliminate Opera’s Address Bar Like IE9

internet-explorer-9

If you’re a fan of minimizing toolbar space and maximizing browser space, you might be interested in this short guide that explains how to make your Opera look just a little more like this (arrangement-wise).

While this isn’t a perfect solution, it will show you how you can customize your Opera browser to be arranged a tad bit more like the upcoming Internet Explorer 9 web browser. While you’re at it, you might consider installing an Internet Explorer themed skin as well. I’m only kidding. :P

Step 1

Hide the address bar. To do this, you simply need to right click on the address bar and select “Customize -> Appearance..” from the menu.

In the window that appears, uncheck Address Bar and leave the Appearance window open for the next step.

Step 2

Add the address box and preferred navigation buttons. To do this, using the Appearance window that you opened in Step 1, click on the Buttons tab and make sure that the category item “Browser” is selected.

In this window you will find back, forward, refresh, log in and home buttons (as well as several others). Click on a button that you want to add such as the back/forward combo button and drag it up to the right of the Opera menu button until you see arrows to drop it.

If you dropped the buttons just right then they should now be resting to the right of the Opera menu button. If they didn’t appear, try again or is they are placed incorrectly you can move them around or remove them via right clicking the button and selecting “Customize -> Remove From Toolbar”.

Step 3

Now the last thing you probably want to add is the address box. You can find this in the buttons category labeled “Browser view”. Drag and drop this widget where you want it as you did with the buttons before.

Feel free to experiment with other buttons and widgets. After you’ve finished customizing your browser’s layout, click OK to close the Appearance window. You are not finished!

Conclusion

As I said before, this isn’t a perfect solution and there are several problems present that I encountered while rearranging various parts of the browser.

The biggest problem I have with this at the moment is the lack of ability to control the width of the address box. The address box drop down is also very narrow which makes it more difficult to use. than before.

Most buttons, when dropped into this toolbar are sized much larger than the back/forward combo button which makes it difficult to create a clean interface. This is the reason you only see this combo button and the address box in the screenshot above. ;)

Its great to see that Opera is still the king of browser layout customizations, but there are still problems that need to be fixed before this can be used as a true method of mimicking IE9.

If you’ve got tips, post ‘em in the comments! I love getting feedback and suggestions!

Solaris International/Deep Blue Radio Show Podcast

solaris-international

A few years ago, while I was up late working and listening to what was then known as Virgin Radio at the time (and now as Absolute Radio), I happened to catch an episode of the “Deep Blue Radio Show.” Since then, it appears to have been renamed to “Solaris International.”

If you’re unfamiliar with this show, its simply a two hour mix of electronica and trance tunes by Solaris International with Solarstone. You can listen to their previous airings straight from their website, but I’ve finally come across their podcast in iTunes and found that it works perfectly in Linux as well with Rhythmbox!

Their site doesn’t seem to be as intuitive as it could be, which is why it took me so long to stumble across their podcast link. If you’re interested in subscribing, the link is posted immediately below. Copy and past it into your media player. If you’re unsure how, take a look at this excellent guide from GoingLinux.com.

Podcast Link to copy and paste:
http://www.solarstone.co.uk/listenAgain/deepblueradishow-podcast.xml

At the moment, there are over 220 previous podcast episodes available to download, so if you’ve got the time then they’ve got the tunes. ;)

I’m usually not a fan of podcasts, but I have a select few that I frequent. This will easily become my favorite.

If you’re not a fan of electronica or trance music then you can kindly disregard this post or use this as a reminder to search for podcasts featuring music you yourself may enjoy! :D

If you have podcast recommendations, I would love to hear about them in the comments!

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.