Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Crossing the Boundaries of Web Applications with OpenSocial

1,387 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×