Here’s a sample code showing how to upload files with jsOAuth.

I’ve extracted the code from my own application, so… ItWorksForMe™ and YMMV, however any sane API should just work.

Update

Looks like posterous didn’t include the Gist, so here’s the link

Update – following code examples work with 1.1 version of the library, however jsOAuth comes with more helper functions which I had to implement myself at the time of writing this post. Please consult the docs

Let’s do some OAuth communication in Javascript, shall we?

This morning, after a quick research I found three potential libraries that can be used:

1. Made by Netflix – javascript oauth
2. United Heroes' – OAuthSimple
3. Rob Griffiths' jsOAuth

The first one looks quite old, and I couldn’t find any good docs.

Second one, has some docs, but leaks with variables like crazy (the sign() method returns DOMWindow).

Third – jsOAuth is actively developed – and what is more there are some working examples. But again – not many docs.

Fear not, I’ll take you there

Assume you want to use OAuth in your desktop application (or Chrome App) and you want your users to authorize with a PIN as opposing to the standard callback way, which doesn’t really work in our scenario.

You got your consumer key and secret – we can now ask the user to approve our application:

var op = { consumerKey : 'YOURKEY', consumerSecret : 'YOURSECRET'},
    requestParams,
    accessParams;

var oauth = OAuth(op);

oauth.get('http://exmaple.com/oauth/request_token',
  // success
  function(data) {
    console.dir(data);
    openURL('http://example.com/oauth/authorize?'+data.text);
    requestParams = data.text
  },
  // fail!
  function(data) { console.dir(data) }
);

As we can see – we’re requesting URL params which will be used for authorizing our application at the API endpoint.

The openURL method depends on your environment – it can be chrome.tab.create({url : url}) or window.create, whatever works for you.

Once the user authorizes our app (by selecting ‘Allow’ or simillar option) she/he will be presented with a PIN, which we later use to get the access tokens:

// user approved and now we have a pin:
var pin = userApproves();

oauth.get('http://example.com/oauth/access_token?oauth_verifier='+pin+'&'+requestParams,
  function(data) {
    console.dir(data);
    accessParams = getVarsFromQueryString(data.text);
    oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);
  },
  // fail!
  function(data) { console.dir(data) }
)

Here we notify our endpoint that the user acknowledged our app. You can store accessParams for later use, so that subsequent requests can be made:

// standard GET request
oauth.get('http://api.example.com/timeline.json',callbacks.success, callbacks.fail);

// POSTing some data
oauth.post('http://api.example.com/update.json', { 'body' : 'trolololo'}, callbacks.success, callbacks.fail);

Are we there yet?

That’s all really – the “OAuth dance” isn’t pretty, but once the access tokens are retrieved it’s pretty much standard REST-talk, I hope someone will find it useful.

I’ve tested this code agains Twitter, Blip.pl and Vimeo and it looked good.