{"id":14,"date":"2011-08-25T22:46:36","date_gmt":"2011-08-25T22:46:36","guid":{"rendered":"http:\/\/www.w3.org\/community\/native-web-apps\/?p=14"},"modified":"2011-10-09T19:37:53","modified_gmt":"2011-10-09T19:37:53","slug":"oauth-and-widgets","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/native-web-apps\/2011\/08\/25\/oauth-and-widgets\/","title":{"rendered":"OAuth and Widgets"},"content":{"rendered":"

A little while back, I made a quick prototype<\/a> showing how widgets could work with OAuth (with Twitter). The problem is that most widget engines don’t support something like Android’s Web View<\/a>\u00a0and usually can’t pop up Windows. \u00a0Another issue is that OAuth authentication services usually use X-Frame-Options<\/a>\u00a0header, so that means you can’t just “popup” and iframe.<\/p>\n

The goal was just to see what the developer experience was, what is missing, and what complexity was added (I used Chrome with Web Security turned off<\/a> to get it to work like a widget). \u00a0How it works:<\/p>\n

    \n
  1. Index.html<\/a> contains\u00a0consumer key, and consumer secret.<\/li>\n
  2. I add the widget’s id as part of the callback url (e.g., http:\/\/example.com\/?widgetid=abc123)<\/li>\n
  3. I used\u00a0jsOAuth.js<\/a>\u00a0to do all the magic and get me an authentication token.<\/li>\n
  4. I then pop up a window.<\/li>\n
  5. I authenticate with twitter.<\/li>\n
  6. Twitter then redirects to the callback url.<\/li>\n
  7. I ‘window.opener.postMessage()<\/a>‘ the access token\u00a0back to the widget (yes, I know that is bad… whatever, it’s a prototype).<\/li>\n<\/ol>\n

    Costs, complexities, and security issues:<\/p>\n