More Related Content Similar to Building @Anywhere (for TXJS) Similar to Building @Anywhere (for TXJS) (20) 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");
});
});
});
});
12. ‣ Secure
‣ Frictionless
‣ Unobtrusive
13. Overview
‣ Cross domain communication
‣ Building an RPC layer
‣ Wrapping the REST API
‣ Adding Authentication and Authorization
21. api.twitter.com
✔
XMLHTTPRequest
Possible?
http://api.twitter.com/
server.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);
29. Browser support for postMessage
‣ Firefox 3 and up
‣ Safari 4 and up
‣ Chrome
‣ Opera 9 and up
‣ IE 8 and up
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)
39. var publicMethods = {
'account/verify_credentials': function(args, uuid) {
$.ajax('/1/account/verify_credentials.json', {
complete: function(data) {
sendResponseToClient({
uuid: uuid,
response: data
});
}
});
}
};
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);
}
53. Client User
access_token=913-38h3ekjl2hc238e2238
Authorization
54. How do we get the
access token to the client?
61. HTTP/1.1 302 Moved Temporarily
Date: Fri, 04 Jun 2010 19:59:41 GMT
Location: http://twaud.io/#oauth_access_token=913-...
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
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
