Posts Tagged ‘HTML’

RPX in Action

December 5th, 2008 - 13 Comments »

RPX is a service from JanRain that makes it easy to accept OpenIDs for your web app.

Why is RPX useful?  Aren’t there a bunch of OpenID plugins out there for [favorite language] or [preferred web development framework]?

There are a lot of libraries and plugins for a lot of platforms, but most of them have three problems: complexity, incompatibility, and poor usability.

The Old Way

Complexity:  Most of the existing tools require you to build database tables and maintain extra libraries on your production systems. I like to avoid tools and libraries that step on my schema and cause extra maintenance work, and I expect you do too.

Incompatibility:  Most current tools don’t fully support OpenID 2.0, which is a deal buster when you’re trying to build a site for anyone who wants to accept i-names or directed identities.

Usability:  Existing plugins don’t usually provide a user friendly interface for the vast majority of people on the web. User experience matters, and it’s nice to get a helping hand when it’s available.

RPX solves these issues in one swoop — it’s mercifully simple, feature rich, and user friendly.

Did I mention free? That’s nice, too.

Seeking Simplicity

Here’s what it takes to get RPX running with your app:

  • A free account on rpxnow.com (premium accounts are available if you need extra features).
  • A dab of Javascript on your login page (provided by rpxnow.com, example below).
  • A few lines of code on your server side application (example below).

It took me less than half an hour to get it running the first time.

Feature Rich

Full support for OpenID 2.0 is a great thing — and not having to worry about future OpenID enhancements is even better. But wait, there’s more: RPX provides authentication statistics, a testing tool, and a well documented API. It also lets users authenticate with their Facebook and MySpace profiles. It’s the gift that keeps on giving.

User Friendly

RPX provides your visitors with a an attractive dialog that ushers them through the OpenID authentication process. Even if they don’t know what OpenID is, there are big friendly buttons that will help them use their accounts at Yahoo, AOL, Google, Facebook, or MySpace. As more providers come online, RPX will update that interface on your behalf.

How Does It Work?

In a nutshell, RPX is a hosted service that handles the nitty gritty of the OpenID authentication process for you. The only work for you is fetching the authentication information from the RPX server.

The flow looks something like this:

  • I come to your web app and click the link to login.
  • The RPX interface pops up and prompts me for my OpenID.
  • After I authenticate with my OpenID provider, the RPX server directs me back to your app with a unique token.
  • Your app queries the RPX server with that token, and gets my authentication information in return.

Pretty straight forward. What’s that look like in code?

A specific example (with Rails) looks something like this:

The view (HTML + JS):


<a class="rpxnow" onclick="return false;" href="https://your-com.rpxnow.com/openid/v2/signin?token_url=http://your.com/rpx">Sign In</a>

<script src="https://rpxnow.com/openid/v2/widget" type="text/javascript"></script>
<script type="text/javascript">
  RPXNOW.token_url = 'http://your.com/rpx';
  RPXNOW.realm = "mysite.com";
  RPXNOW.overlay = true;
</script>

The token_url in the link and the javascript points to a URL on your site, and the RPXNOW.realm is your OpenID authentication realm (typically the root URL for your site).

Rails handler at http://your.com/rpx:


rpx_token = params[:token]

rpx = Net::HTTP.new('rpxnow.com', 443)
rpx.use_ssl = true
path = "/api/v2/auth_info"
args = "apiKey=#{RPX_API_KEY}&token=#{rpx_token}"
http_resp, response_data = rpx.post( path, args )

rpx_data = JSON.parse( response_data )

Briefly stated, this code:

  • Collects the token parameter from the user’s request after they authenticate.
  • Performs an HTTPS POST against the RPX server containing that token and a secret API key.
  • Parses the JSON response into a usable format — in this case, a hash named rpx_data.

This isn’t limited to Rails, of course. Every major development language and web framework can set up an HTTPS connection and parse JSON … and if JSON isn’t your style, you can get an XML response instead.

Real World Use

This morning I converted the OpenID Foundation’s membership website to use RPX, and ditched the old plugin I hacked up to support the OpenID 2.0 features. If you’re interested in seeing it in action head on over to their site: https://openid.net/foundation/members

I also encourage anyone who’s interested in the future of OpenID to become a member. Individual memberships are cheap, and the pay off is big — you can participate directly in the election of board members, review and ratify specifications, and participate in working groups.

Feedback

Still confused? Know of a better solution? Leave a comment, let me know!

Wanted: Flash + HTML developers

April 11th, 2007 - Comment »

I’m looking for two skilled people ASAP who I can refer for some quick gigs that want attention before the end of the week.  They’re short jobs, and they pay!

First, I’m looking for a Flash developer with a clue or two about ActionScript and XML, and is willing to trouble shoot some potentially hairy stuff.

Second, I’m looking for someone with a little HTML knowledge to update a static site with some new content.  Updating text, changing dates, and adding a couple of pages (identical to some existing pages, just different text and photos).

If you have the chops, please send me an e-mail (peat@peat.org) and I’ll pass your information on!

Tagged , , ,

There’s a Truck in my Garden

May 18th, 2006 - 2 Comments »

Last night I attended a great presentation by Pop Art at the DevGroup NW monthly meeting. They have a very challenging project—building 30 custom sites in 30 weeks for SelecTrucks, the used truck arm of Freightliner.

They patterned their approach around the CSS Zen Garden concept:

  • Build a common XHTML template that gets syndicated to all of the different dealer sites. No tables in the markup!
  • Provide a completely customized design for each site, based entirely on CSS.

Here’s a couple examples that demonstrate how flexible this can be:

Pretty darned wow.

Justin Garrity, Kelly White, Ryan Parr, and Dave Selden of Pop Art were on hand to talk about how the sites came together. Although Ben Fogarty wasn’t present, his designs certainly were.

Here’s a brief summary of the highlights ..

Design

Because of the extremely tight deadlines, the designers could only spend about 25 hours per site. They had to drop all of their heavy processes for sussing information out of clients, and instead depended entirely on an initial interview and a “half way” comp.

The initial interview had a process that really impressed me. They called it “word verses word.” Basically speaking, it was presenting the client with two contrasting words and having them pick one:

  • Modern v. Traditional
  • Bold v. Classic
  • Block v. Curvy

You get the idea. This is something I’ll definitely be incorporating into my client discussions in the future.

Tech

The sites are all served from a DotNetNuke backend. The front end templating system was modified to produce clean XHTML templates, and they use browser sniffing to send stylesheets tailored specifically to the major platforms (IE 5.5/6, FireFox/Mozilla, Safari).

All of the graphics are alpha PNGs, and the designs make heavy use of layering to achieve the desired effects. They saved a huge amount of work by using CSS based layouts with “unsliced” graphics instead of tables and cut up image nightmares.

Much of the typography is done through the Scalable Inman Flash Replacement, or sIFR. sIFR replaces custom graphics as a way to display fonts outside the standard (and rather boring) core of web friendly fonts.

The mechanism is quite interesting: it examines an element in a page, loads a Flash file and scales it to fit inside of that element, and then inserts and scales the original text inside the element to fit the new Flash area. Simply put, you can maintain clean XHTML markup and a single Flash template, and sIFR does the rest.

Pretty darned awesome.

Pop Art has done an incredible job with such a complex project. They have some amazingly talented people on staff, and a good set of tools. Kudos!

As a side note, my cousin works at Freightliner and was able to give me a tour of the manufacturing floor at their Portland facility. It’s straight-up amazing to see these 100% custom trucks get assembled, painted, and accessorized ..

Update: Ryan’s posted a link to PopArt’s official page for the SelecTrucks project.

Tagged , ,