OpenSocial 2.0 - Viva la Open App Revolution

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: [email protected] To: [email protected] 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 [email protected]