Tag Archives: JavaScript

Twitter Web Intents Javascript Events Not Firing

If you’re trying out Twitter’s Web Intents Javascript Events and it’s not working, be aware that they only work if your HTML page is loaded from an HTTP server. If you open your page locally off your hard drive it won’t work, though you can fire up an Apache instance on your localhost and it’ll work from there.

Source: https://dev.twitter.com/comment/reply/304/491

Update: It looks like this can also happen with the Facebook JavaScript API: http://forum.developers.facebook.net/viewtopic.php?pid=362167#p362167. I guess it’s because they use iFrames, and using them locally can cause security problems.

Advertisement

Saved Web Pages from Firefox Have Scripts Removed

So, I was just in the middle of a programming test for a job application where I had to download an HTML page, edit the JavaScript to perform a desired task, and email it back. I downloaded the page, but the JavaScript had been replaced by the text, “Script removed by snapshot save”. Luckily the removed JS was only one line and I was able to figure out what it was.

Afterwards, I went searching for the cause and found this forum post, which explains that the problem is caused by the Mozilla Archive Format extension, which has a setting that even affects pages not saved as .maff. To fix the problem, go into the MAF extension settings and change “When saving complete web page contents:” from “Take a faithful snapshot of the page” to one of the other options.

Advice from my Experience with OAuth

I recently finished coding the OAuth authentication method for accessing Picasa photos from within Darkroom. Since it was written client side using JavaScript I was trying to be as minimalist as possible, so I wrote my own minimal implementation rather than using a library. I’m sure most developers using OAuth use a library, which is probably why it’s hard to find advice on writing your own implementation, so I thought I’d share some tips, FAQ style.

Use the right documentation.
There’s a lot of outdated docs out there. I frequently find myself at OAuth Core 1.0 Revision A, and it’s such a pretty page and easy on the eyes, but way at the top where you’re likely to miss it is a notice saying it’s obsolete. The notice says to use RFC 5849: The OAuth 1.0 Protocol and, although hideous, it’s up to date and more complete.

How’s the signature algorithm written?
Here’s some pseudo-code:
http://gist.github.com/462169.js?file=signRequest.pseudo_code

If you’re writing in JavaScript as well I recommend Crypto-JS.

What’s the format for the timestamp?
It’s just a UNIX timestamp (in seconds).

How do I generate a nonce value?
The OAuth spec just says it’s a random string. I think the Google documentation says something about using a string representation of a 64 bit integer. I had no idea what they were talking about, but somewhere I read you just need to md5 hash a random integer, and it worked for me.

If developing for a Google service, use their OAuth playground.
Their OAuth Playground is a great way to see the process you have to go through and what the requests look like. If trying to authenticate with another provider see if they also have an API test app.

Don’t expect detailed errors.
You’ll be lucky if the response tells you “signature invalid”, but you won’t be told what’s wrong with it. My strategy was to compare my signatures and parameters to those used by the Google Playground; taking values from there that you know are valid and using them to test your code is a good way to debug.

The scope parameter has to EXACTLY match the URLs used in your API calls
In the Google OAuth Playground, selecting “Picasa Web” will input “https://picasaweb.google.com/data/” for the scope. Note the use of https:// for the protocol. If you make API calls using that URL, it will fail since none of the Picasa services are served over https. If you try to make calls using regular http you will get an OAuth error saying invalid scope. In order for it all to work, you have to use “http://picasaweb.google.com/data/” for the scope.

MugTug Darkroom, Online/Offline Photo Editing

For those of you who don’t know, a few weeks ago I joined a project called Darkroom from MugTug.com. It’s an image processing application using cutting edge HTML 5 features such as the <canvas> element, localStorage, and application cache, and all the editing (and most of the GUI) is done client side using JavaScript, so it works even without an Internet connection.

Yesterday it was demoed during the Google I/O 2010 Keynote Speech:

There’s currently a development version live, feel free to visit the site and try it out!