• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building @Anywhere (for TXJS)
 

Building @Anywhere (for TXJS)

on

  • 12,102 views

 

Statistics

Views

Total Views
12,102
Views on SlideShare
11,728
Embed Views
374

Actions

Likes
19
Downloads
88
Comments
0

10 Embeds 374

http://www.slideshare.net 339
http://twitter.com 11
http://a0.twimg.com 9
http://www.twylah.com 5
https://twimg0-a.akamaihd.net 4
https://twitter.com 2
http://thehoard.org 1
http://jointheconf.tumblr.com 1
http://www.iweb34.com 1
http://facebook.slideshare.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Building @Anywhere (for TXJS) Building @Anywhere (for TXJS) Presentation Transcript

  • @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