Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OpenSocial 2.0 - Viva la Open App Revolution

OpenSocial 2.0 - Viva la Open App Revolution

Talk about OpenSocial 2.0 at Confoo 2012

Bastian Hofmann

March 02, 2012
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

Transcript

  1. OpenSocial 2.0 - Viva la Open App Revolution @BastianHofmann

  2. Your web application

  3. None
  4. None
  5. None
  6. None
  7. None
  8. Questions? Ask!

  9. http://speakerdeck.com/u/bastianhofmann

  10. http://www.opensocial.org/

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. http://www.opensocial.org/

  28. A set of APIs to access the social graph of

    users I.
  29. A specification for including 3rd party applications (gadgets) into social

    services II.
  30. http://www.opensocial.org/ Foundation

  31. None
  32. None
  33. GADGET apivz.net CONTAINER meinvz.net

  34. Container vz.net Gadget apivz.net HTTP GET apivz.net/gadgets/render? xml=.... Shindig apivz.net

    (II.)
  35. Container vz.net Gadget apivz.net HTML Page with OpenSocial JavaScript API

    Shindig apivz.net (II.)
  36. Container vz.net Gadget apivz.net Ajax Requests to API Shindig apivz.net

    (I.)
  37. External Page yourclient.com Shindig apivz.net HTTP (I.)

  38. Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Ajax

  39. Same Origin Policy

  40. Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Ajax

  41. Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Shindig apivz.net Ajax

  42. Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Shindig apivz.net Ajax

    HTTP
  43. Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Shindig apivz.net Ajax

    HTTP Owner ID Viewer ID OAuth Signature
  44. None
  45. Container vz.net Gadget apivz.net Not Allowed

  46. Same Origin Policy

  47. Container vz.net Gadget apivz.net Message - window.postMessage - Iframes with

    relay files - Flash bridge JavaScript RPC
  48. Features

  49. None
  50. Views

  51. CANVAS

  52. PROFILE

  53. POPUP

  54. GROUP

  55. PREVIEW

  56. Let‘s start programming

  57. http://www.partuza.nl/ https://github.com/bashofmann/partuza

  58. https://github.com/bashofmann/statusnet_gadget_2nd

  59. DEMO

  60. 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?
  61. Templates

  62. DEMO

  63. REST API

  64. GET /rest/people/34KJDCSKJN2HHF0DW20394/@self? fields=name,gender&format=xml HTTP/1.1 HOST api.example.org Authorization: hh5s93j4hdidpola HTTP/1.1 200

    OK Content-Type: text/xml <response xmlns="http://ns.opensocial.org/ 2008/opensocial"> <person> <id>34KJDCSKJN2HHF0DW20394</id> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> </response>
  65. • People • Activities • AppData • Messages • MediaItems

    • Albums • Groups
  66. DEMO

  67. Authorization

  68. None
  69. lanyrd.com twitter.com Pre Registration of Client at Twitter: - Shared

    Consumer Key - Shared Consumer Secret
  70. HTTP POST Connect with Twitter lanyrd.com

  71. twitter.com HTTP POST Connect with Twitter HTTP GET Consumer Key

    Redirect URI Signature (Consumer Secret) lanyrd.com
  72. twitter.com HTTP POST Connect with Twitter Request Token Request Token

    Secret lanyrd.com
  73. http://twitter.com/authorize? requestToken=...&consumerKey=... HTTP Redirect lanyrd.com

  74. HTTP GET twitter.com/ authorize

  75. Login twitter.com/ authorize

  76. Grant permission twitter.com/ authorize Create verifier and bind it to

    User and Request Token
  77. Redirect URI?verifier=... HTTP Redirect twitter.com/ authorize

  78. HTTP GET lanyrd.com (RedirectURI? verifier=...)

  79. HTTP GET HTTP GET Consumer Key Verifier Signature (Consumer &

    Request Token Secret) twitter.com lanyrd.com
  80. HTTP GET Access Token Access Token Secret twitter.com lanyrd.com

  81. None
  82. http://oauth.net/

  83. Web-Server Profile

  84. lanyrd.com twitter.com Pre Registration of Client at Twitter: - Shared

    Client ID - Shared Client Secret - Redirect URI
  85. HTTP(S) POST Connect with Twitter lanyrd.com

  86. http://twitter.com/authorize?&clientId=... HTTPS Redirect lanyrd.com

  87. HTTPS GET twitter.com/ authorize

  88. Login twitter.com/ authorize

  89. Grant permission twitter.com/ authorize Create authorization code and bind it

    to User and ClientID
  90. Redirect URI?authorizationCode=... HTTPS Redirect twitter.com/ authorize

  91. HTTPS GET lanyrd.com (RedirectURI? authorizationCode= ...)

  92. HTTPS GET HTTPS GET Consumer Key Authorization Code Consumer Secret

    twitter.com lanyrd.com
  93. HTTPS GET Access Token (Refresh Token) twitter.com lanyrd.com

  94. HTTPS GET HTTPS API Request Access Token twitter.com lanyrd.com

  95. HTTPS GET HTTPS GET Consumer Key Refresh Token Consumer Secret

    twitter.com lanyrd.com
  96. HTTPS GET Access Token Refresh Token twitter.com lanyrd.com

  97. Embedded Experience

  98. None
  99. None
  100. From: notifications@socialnetwork.com To: johndoe@example.com Subject: Social Network: Mary Has Commented

    On Your Status MIME-Version: 1.0 Content-Type: multipart/alternative; boundary="XXXXboundary text" --XXXXboundary text Content-Type: text/html <html> <!-- HTML representation here --> </html> --XXXXboundary text Content-Type: application/embed+json { "gadget" : "http://www.socialnetwork.com/embedded/ commentgadget.xml", "context" : 123 }
  101. DEMO

  102. Declarative actions

  103. None
  104. <Module> <ModulePrefs title="Sample VOIP"> <Optional feature="actions"> <Param name="action-contributions"> <![CDATA[ <action

    id="org.samplevoip.callbyperson" dataObject="opensocial.Person" label="Call using VOIP Phone" view="DialByPerson" icon="http://ww.samplervoip.org/ phone.gif" /> <action id="org.samplervoip.navLink" path="container/ navigationLinks" label="Phone" /> ]]> </Param> </Optional> </ModulePrefs>
  105. <Content type="html"> <![CDATA[ <script> // Bind javascript function to action

    ID function mycallback{ ... } var myaction = { id: "org.samplevoip.callbyperson", callback: mycallback } container.actions.updateAction(myaction); </script> ]]> </Content> </Module>
  106. OpenSearch

  107. None
  108. <Optional feature="opensearch"> <Param name="description"> <![CDATA[ <OpenSearchDescription xmlns="http://a9.com/-/spec/ opensearch/1.1/"> <ShortName>Example Search</ShortName>

    <Description>Realtime Example Search</Description> <Url type="application/atom+xml" method="get" template="http://search.example.com/search.atom? q={searchTerms}"/> <Image width="16" height="16">http://search.example.com/ favicon.png</Image> <InputEncoding>UTF-8</InputEncoding> <SearchForm>http://search.example.com/</SearchForm> </OpenSearchDescription> ]]> </Param> </Optional>
  109. Documentation http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation http://docs.opensocial.org

  110. http://shindig.apache.org/ Integrate it into your site

  111. Rate and Comment https://joind.in/talk/view/6080

  112. h"p://twi"er.com/Bas2anHofmann h"ps://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://speakerdeck.com/u/bas2anhofmann mail@bas2anhofmann.de