Bastian HofmannResearchGate GmbHCrossing the boundaries of WebApplications with OpenSocial
Questions? Ask!
http://slideshare.net/bashofmann
http://www.opensocial.org/
Foundationhttp://www.opensocial.org/
A set of APIs to access the social graph of users
A specification for including 3rd partyapplications (gadgets) into social services
CONTAINER    GADGETmeinvz.net   apivz.net
Rendering
Features
Container            Shindigvz.net               apivz.net               HTTP GET   Gadget      apivz.net/gadgets/render? ...
Container           Shindigvz.net              apivz.net               HTML Page with OpenSocial   Gadget      JavaScript ...
Container           Shindigvz.net              apivz.net               Ajax Requests to API   Gadget   apivz.net
Containervz.net   Gadget             Gadget Backend               Ajax   apivz.net          api.twitter.com
Same Origin Policy
Containervz.net   Gadget             Gadget Backend               Ajax   apivz.net          api.twitter.com
Container             Shindigvz.net                apivz.net               Ajax   Gadget             Gadget Backend   apiv...
Container             Shindigvz.net                apivz.net               Ajax                                  HTTP   Ga...
Container             Shindigvz.net                apivz.net               Ajax                                  HTTP     ...
Shindigapivz.net            HTTP Gadget Backend api.twitter.com
Containervz.net   Not Allowed    Gadget    apivz.net
JavaScript RPCContainer          - window.postMessagevz.net       Message     - Iframes with relay files    Gadget         ...
Views
CANVAS
PROFILE
POPUP
GROUP
EMBED
PREVIEW
Proxied ContentOpenSocial Templates                       OAuth Proxy Requests   OSAPI           Embedded Experiences     ...
https://github.com/bashofmann/statusnet_gadget_2nd
http://www.partuza.nl/https://github.com/bashofmann/partuza
DEMO
var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>...
Templates
DEMO
Authorization
Pre Registration of Client atTwitter:                                twitter.com- Shared Consumer Key- Shared Consumer Sec...
HTTP POST   Connect with Twitterlanyrd.com
twitter.com   HTTP POST   Connect with Twitter                    HTTP GETlanyrd.com          Consumer Key                ...
twitter.com   HTTP POST   Connect with Twitterlanyrd.com                          Request Token                          R...
HTTP Redirect    http://twitter.com/authorize?    requestToken=...&consumerKey=...lanyrd.com
HTTP GET      twitter.com/      authorize
Login        twitter.com/        authorize
Grant permission        twitter.com/        authorize        Create verifier        and bind it to        User and Request ...
HTTP RedirectRedirect URI?verifier=...             twitter.com/             authorize
HTTP GET lanyrd.com(RedirectURI? verifier=...)
twitter.com    HTTP GET               HTTP GETlanyrd.com     Consumer Key               Verifier               Signature (C...
twitter.com    HTTP GETlanyrd.com               Access Token               Access Token Secret
twitter.com    HTTP GETlanyrd.com               API Request               Consumer Key               Signature (Consumer &...
DEMO
Embedded Experience
From: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME...
DEMO
Documentation                    http://docs.opensocial.org   http://developer.studivz.net/wiki/index.php/           Gadge...
Rate and Comment  http://spkr8.com/t/8739
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.n...
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Crossing the Boundaries of Web Applications with OpenSocial
Upcoming SlideShare
Loading in …5
×

Crossing the Boundaries of Web Applications with OpenSocial

1,198 views
1,140 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,198
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Crossing the Boundaries of Web Applications with OpenSocial

  1. 1. Bastian HofmannResearchGate GmbHCrossing the boundaries of WebApplications with OpenSocial
  2. 2. Questions? Ask!
  3. 3. http://slideshare.net/bashofmann
  4. 4. http://www.opensocial.org/
  5. 5. Foundationhttp://www.opensocial.org/
  6. 6. A set of APIs to access the social graph of users
  7. 7. A specification for including 3rd partyapplications (gadgets) into social services
  8. 8. CONTAINER GADGETmeinvz.net apivz.net
  9. 9. Rendering
  10. 10. Features
  11. 11. Container Shindigvz.net apivz.net HTTP GET Gadget apivz.net/gadgets/render? apivz.net xml=....
  12. 12. Container Shindigvz.net apivz.net HTML Page with OpenSocial Gadget JavaScript API apivz.net
  13. 13. Container Shindigvz.net apivz.net Ajax Requests to API Gadget apivz.net
  14. 14. Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
  15. 15. Same Origin Policy
  16. 16. Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
  17. 17. Container Shindigvz.net apivz.net Ajax Gadget Gadget Backend apivz.net api.twitter.com
  18. 18. Container Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend apivz.net api.twitter.com
  19. 19. Container Shindigvz.net apivz.net Ajax HTTP Owner ID Viewer ID Gadget OAuth Signature apivz.net Gadget Backend api.twitter.com
  20. 20. Shindigapivz.net HTTP Gadget Backend api.twitter.com
  21. 21. Containervz.net Not Allowed Gadget apivz.net
  22. 22. JavaScript RPCContainer - window.postMessagevz.net Message - Iframes with relay files Gadget - Flash bridge apivz.net
  23. 23. Views
  24. 24. CANVAS
  25. 25. PROFILE
  26. 26. POPUP
  27. 27. GROUP
  28. 28. EMBED
  29. 29. PREVIEW
  30. 30. Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming
  31. 31. https://github.com/bashofmann/statusnet_gadget_2nd
  32. 32. http://www.partuza.nl/https://github.com/bashofmann/partuza
  33. 33. DEMO
  34. 34. var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>";document.getElementById("div").innerHTML =html; Where is the error?
  35. 35. Templates
  36. 36. DEMO
  37. 37. Authorization
  38. 38. Pre Registration of Client atTwitter: twitter.com- Shared Consumer Key- Shared Consumer Secret lanyrd.com
  39. 39. HTTP POST Connect with Twitterlanyrd.com
  40. 40. twitter.com HTTP POST Connect with Twitter HTTP GETlanyrd.com Consumer Key Redirect URI Signature (Consumer Secret)
  41. 41. twitter.com HTTP POST Connect with Twitterlanyrd.com Request Token Request Token Secret
  42. 42. HTTP Redirect http://twitter.com/authorize? requestToken=...&consumerKey=...lanyrd.com
  43. 43. HTTP GET twitter.com/ authorize
  44. 44. Login twitter.com/ authorize
  45. 45. Grant permission twitter.com/ authorize Create verifier and bind it to User and Request Token
  46. 46. HTTP RedirectRedirect URI?verifier=... twitter.com/ authorize
  47. 47. HTTP GET lanyrd.com(RedirectURI? verifier=...)
  48. 48. twitter.com HTTP GET HTTP GETlanyrd.com Consumer Key Verifier Signature (Consumer & Request Token Secret)
  49. 49. twitter.com HTTP GETlanyrd.com Access Token Access Token Secret
  50. 50. twitter.com HTTP GETlanyrd.com API Request Consumer Key Signature (Consumer & Access Token Secret)
  51. 51. DEMO
  52. 52. Embedded Experience
  53. 53. From: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"--XXXXboundary textContent-Type: text/html<html><!-- HTML representation here --></html>--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml", "context" : 123}
  54. 54. DEMO
  55. 55. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
  56. 56. Rate and Comment http://spkr8.com/t/8739
  57. 57. h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

×