![// 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);](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-27-320.jpg)
![var callbacks = [];
function remoteCall(method, args, callback) {
var id;
id = uuid++;
callbacks[id] = callback;
sendToServer({
uuid: id,
method: method,
args: args
});
}](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-41-320.jpg)
![function returnResponse(e) {
var call = e.data,
method = call.method,
args = call.args,
uuid = call.uuid
publicMethods[method].call(this, args, uuid);
}](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-43-320.jpg)
![function receiveResult(e) {
var result = e.data,
uuid = result.uuid,
response = result.response;
callbacks[uuid].call(this, response);
}](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-46-320.jpg)
![http://api.twitter.com/
remoteCall(‘method’, [], ...);
example.html](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-48-320.jpg)
![var callbacks = [];
function remoteCall(method, args, token, callback) {
var id;
id = uuid++;
callbacks[id] = callback;
sendToServer({
uuid: id,
method: method,
args: args,
token: token
});
}](https://image.slidesharecdn.com/anywheretxjs-100605140158-phpapp01/85/Building-Anywhere-for-TXJS-68-320.jpg)
Building @Anywhere (for TXJS)
- 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 / [email protected]) TM
- 11. Building Cross Domain APIs Dan Webb (@danwrong / [email protected]) TM
- 12. ‣ Secure ‣ Frictionless ‣ Unobtrusive
- 13. Overview ‣ Cross domain communication ‣ Building an RPC layer ‣ Wrapping the REST API ‣ Adding Authentication and Authorization
- 15. How do we communicate with api.twitter.com?
- 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
- 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
- 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 }); }
- 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 }); } }); } };
- 46. function receiveResult(e) { var result = e.data, uuid = result.uuid, response = result.response; callbacks[uuid].call(this, response); }
- 48. http://api.twitter.com/ remoteCall(‘method’, [], ...); example.html
- 49. Client User Authorization
- 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
- 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?