The document describes how to build a cross-domain API called @anywhere that allows Twitter functionality to be embedded on third-party sites. It discusses using postMessage to enable cross-domain communication and implementing an RPC layer to wrap Twitter's REST API. It also covers how to handle authentication and authorization using OAuth, passing the access token back to the embedding page securely using the window.name polling technique. The goal is to provide a secure, frictionless, and unobtrusive way to access Twitter APIs from any domain.

2. @Anywhere

3. Helping Twitter escape from
twitter.com

8. <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>

9. 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");
});
});
});
});

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

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

12. ‣ Secure
‣ Frictionless
‣ Unobtrusive

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

14. REST API: api.twitter.com

15. How do we
communicate with
api.twitter.com?

16. Same origin policy

17. api.twitter.com
XMLHTTPRequest

18. api.twitter.com
✖
XMLHTTPRequest

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

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

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

22. <iframe>

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

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

25. HTML 5: postMessage

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

27. // 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);

28. // 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);

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

30. Poor man’s postMessage

31. Flash LocalConnection

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

34. window.name

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

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

37. 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)

38. Implementing RPC

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

40. Sending the method call

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

42. Returning the response

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

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

45. Receiving the result

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

47. Authentication &
Authorization

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

49. Client User
Authorization

51. @lukeshepard / sociallipstick.com

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

53. Client User
access_token=913-38h3ekjl2hc238e2238
Authorization

54. How do we get the
access token to the client?

55. anywhere.js
SSL

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

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

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

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

60. anywhere.js

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

62. GET / HTTP/1.1
Host: twaud.io

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

64. anywhere.js

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

66. 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

67. Using the token to make
privileged calls

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

69. 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
});
}
});
}
};

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

71. Questions?

72. @danwrong
@jointheflock
twitter.com/jobs