@Anywhere

Helping Twitter escape from
twitter.com

<script src="http://platform.twitter.com/ anywhere.js?3e3222e3aed"></script> <script> twttr.anywhere(1,
function(T) { T("#login").connectButton(); T.hovercards(); T("#comments").tweetBox(); T("#user-details").followButton('dsa'); }); </script>

twttr.anywhere(1, function(T) { T.bind('authComplete', function()
{ $('#current-user').html( "You are logged in as " + T.currentUser.screenName ); $('#follow-me').click(function() { T.User.find('danwrong').follow(function() { alert("Thanks, man, but I probably won't follow you back"); }); }); }); });

Building @anywhere Dan Webb (@danwrong
/ dan@twitter.com) TM

Building Cross Domain APIs Dan
Webb (@danwrong / dan@twitter.com) TM

‣ Secure ‣ Frictionless ‣
Unobtrusive

Overview ‣ Cross domain communication
‣ Building an RPC layer ‣ Wrapping the REST API ‣ Adding Authentication and Authorization

REST API: api.twitter.com

How do we communicate with
api.twitter.com?

Same origin policy

api.twitter.com
XMLHTTPRequest

api.twitter.com
✖
XMLHTTPRequest

api.twitter.com
XMLHTTPRequest
http://api.twitter.com/
server.html

api.twitter.com
✔
XMLHTTPRequest
http://api.twitter.com/
server.html

api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
server.html

<iframe>

api.twitter.com
http://api.twitter.com/
server.html

api.twitter.com
✖
http://api.twitter.com/
example.html

HTML 5: postMessage

http://api.twitter.com/
server.postMessage(‘blah’, ...);
example.html

// from http://twaud.io... var $iframe
= $('#twitter_server'), server = $iframe[0].contentWindow; server.postMessage('Hello Twitter!', 'http://api.twitter.com/server.html'); // from http://api.twitter.com/server.html window.addEventListener('message', function(event) { var message = event.data; doSomethingAmazingWith(message); }, false);

// from http://api.twitter.com/server.html window.parent.postMessage('Hello yourself!',
'*'); // to http://twaud.io window.addEventListener('message', function(event) { var reply = event.data; doSomethingAmazingWithReply(reply); }, false);

Browser support for postMessage ‣
Firefox 3 and up ‣ Safari 4 and up ‣ Chrome ‣ Opera 9 and up ‣ IE 8 and up

Poor man’s postMessage

Flash LocalConnection

http://api.twitter.com/
example.html

window.name

window.name = “{ some: ‘data’
}” http://api.twitter.com/ server.html

var oldMessage; function pollWindowName() {
var message = window.name; if(message != oldMessage) { oldMessage = message; handle(message); } } setInterval(pollWindowName, 20);

Works in IE 6 &
7 but... Limited message size Problems when posting messages in quick succession A lot less secure Strings only (will need JSON)

Implementing RPC

var publicMethods = { 'account/verify_credentials':
function(args, uuid) { $.ajax('/1/account/verify_credentials.json', { complete: function(data) { sendResponseToClient({ uuid: uuid, response: data }); } }); } };

Sending the method call

var callbacks = []; function
remoteCall(method, args, callback) { var id; id = uuid++; callbacks[id] = callback; sendToServer({ uuid: id, method: method, args: args }); }

Returning the response

function returnResponse(e) { var call
= e.data, method = call.method, args = call.args, uuid = call.uuid publicMethods[method].call(this, args, uuid); }

var publicMethods = { 'account/verify_credentials':
function(args, uuid) { $.ajax('/1/account/verify_credentials.json', { complete: function(data) { sendResponseToClient({ uuid: uuid, response: data }); } }); } };

Receiving the result

function receiveResult(e) { var result
= e.data, uuid = result.uuid, response = result.response; callbacks[uuid].call(this, response); }

Authentication &
Authorization

http://api.twitter.com/
remoteCall(‘method’, [], ...);
example.html

Client User
Authorization

@lukeshepard / sociallipstick.com

OAuth 2 (User Agent Flow)
http://wiki.oauth.net/OAuth-2.0

Client User
access_token=913-38h3ekjl2hc238e2238
Authorization

How do we get the
access token to the client?

anywhere.js
SSL

http://oauth.twitter.com/2/authorize?
type=user_agent&
client_id=32ro23rfjd3&
redirect_uri=http://twaud.io/

http://oauth.twitter.com/2/authorize?
type=user_agent&
client_id=32ro23rfjd3&
redirect_uri=http://twaud.io/

http://oauth.twitter.com/2/authorize?
type=user_agent&
client_id=32ro23rfjd3&
redirect_uri=http://twaud.io/

Callback verification allows you to
prove that the site owns the client ID

anywhere.js

HTTP/1.1 302 Moved Temporarily Date:
Fri, 04 Jun 2010 19:59:41 GMT Location: http://twaud.io/#oauth_access_token=913-...

GET / HTTP/1.1
Host: twaud.io

That’s magic! Access token communicated
back to browser securely. No SSL support required for client site.

anywhere.js

var accessToken = parseTokenFromHash(); if
(accessToken && window.opener && window.opener.setToken) { window.opener.setToken(accessToken); } self.close();

Couple of warnings ‣ It’s
secure, but not that secure ‣ Don’t store access tokens in a cookie (localStorage works) ‣ It’s fairly easy for developers to accidentally leak tokens ‣ Make them expire after a very short amount of time ‣ Can use ‘immediate’ mode to refresh expired tokens

Using the token to make
privileged calls

var callbacks = []; function
remoteCall(method, args, token, callback) { var id; id = uuid++; callbacks[id] = callback; sendToServer({ uuid: id, method: method, args: args, token: token }); }

var publicMethods = { 'account/verify_credentials':
function(args, uuid, token) { $.ajax('/1/account/verify_credentials.json', { beforeSend: function(xhr) { xhr.setRequestHeader( 'Authorization', 'Oauth oauth_access_token=' + token ); }, complete: function(data) { sendResponseToClient({ uuid: uuid, response: data }); } }); } };

Overview ‣ Cross domain communication
‣ Building an RPC layer ‣ Wrapping the REST API ‣ Adding Authentication and Authorization

Questions?

@danwrong
@jointheflock
twitter.com/jobs