Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@Anywhere
Helping Twitter escape from
twitter.com
<script src="http://platform.twitter.com/
anywhere.js?3e3222e3aed"></script>

<script>
  twttr.anywhere(1, function(T) {
 ...
twttr.anywhere(1, function(T) {
  T.bind('authComplete', function() {
    $('#current-user').html(
       "You are logged ...
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 ...
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/
                       ...
api.twitter.com


                            ✔
                   XMLHTTPRequest




                  http://api.twitter...
api.twitter.com


                            ✔
                   XMLHTTPRequest


 Possible?
                  http://ap...
<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...
// from http://api.twitter.com/server.html

window.parent.postMessage('Hello yourself!', '*');




// to http://twaud.io

...
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/
                               serve...
var oldMessage;

function pollWindowName() {
  var message = window.name;
  if(message != oldMessage) {
    oldMessage = m...
Works in IE 6 & 7 but...
Limited message size
Problems when posting messages in quick succession
A lot less secure
Strings...
Implementing RPC
var publicMethods = {
   'account/verify_credentials': function(args, uuid) {
     $.ajax('/1/account/verify_credentials.j...
Sending the method call
var callbacks = [];

function remoteCall(method, args, callback) {
  var id;

    id = uuid++;
    callbacks[id] = callbac...
Returning the response
function returnResponse(e) {
  var call = e.data,
      method = call.method,
      args = call.args,
      uuid = call.uu...
var publicMethods = {
   'account/verify_credentials': function(args, uuid) {
     $.ajax('/1/account/verify_credentials.j...
Receiving the result
function receiveResult(e) {
  var result = e.data,
      uuid = result.uuid,
      response = result.response;

    callba...
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.set...
Couple of warnings	
‣   It’s secure, but not that secure
‣   Don’t store access tokens in a cookie (localStorage works)
‣ ...
Using the token to make
privileged calls
var callbacks = [];

function remoteCall(method, args, token, callback) {
  var id;

  id = uuid++;
  callbacks[id] = call...
var publicMethods = {
   'account/verify_credentials': function(args, uuid, token) {
     $.ajax('/1/account/verify_creden...
Overview
‣   Cross domain communication
‣   Building an RPC layer
‣   Wrapping the REST API
‣   Adding Authentication and ...
Questions?
@danwrong
@jointheflock
twitter.com/jobs
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/
Prochain SlideShare
Chargement dans…5
×

api.twitter.com ✔ XMLHTTPRequest Possible? http://api.twitter.com/ Building @Anywhere (for TXJS)

19 843 vues

Publié le

api.twitter.com



XMLHTTPRequest


Possible?
http://api.twitter.com/
server.html

Publié dans : Technologie
  • Soyez le premier à commenter

×