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