OpenSocial 2.0 - Viva la Open App Revolution

Talk about OpenSocial 2.0 at Confoo 2012

Transcript

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

   View Slide

2. Your web application
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. Questions? Ask!
   

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. http://www.opensocial.org/
    

    View Slide

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

    View Slide

29. A specification for including 3rd party
    applications (gadgets) into social services
    II.
    

    View Slide

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

    View Slide

31. View Slide

32. View Slide

33. GADGET
    apivz.net
    CONTAINER
    meinvz.net
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. Same Origin Policy
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Container
    vz.net
    Gadget
    apivz.net
    Gadget Backend
    api.twitter.com
    Shindig
    apivz.net
    Ajax
    HTTP
    Owner ID
    Viewer ID
    OAuth Signature
    

    View Slide

44. View Slide

45. Container
    vz.net
    Gadget
    apivz.net
    Not Allowed
    

    View Slide

46. Same Origin Policy
    

    View Slide

47. Container
    vz.net
    Gadget
    apivz.net
    Message
    - window.postMessage
    - Iframes with relay files
    - Flash bridge
    JavaScript RPC
    

    View Slide

48. Features
    

    View Slide

49. View Slide

50. Views
    

    View Slide

51. CANVAS
    

    View Slide

52. PROFILE
    

    View Slide

53. POPUP
    

    View Slide

54. GROUP
    

    View Slide

55. PREVIEW
    

    View Slide

56. Let‘s start programming
    

    View Slide

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

    View Slide

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

    View Slide

59. DEMO
    

    View Slide

60. var html="";
    for (var i=0; i < viewers.length; i++) {
    html += "" + viewers[i].displayName
    + "";
    }
    html += "";
    document.getElementById("div").innerHTML =
    html;
    Where is the error?
    

    View Slide

61. Templates
    

    View Slide

62. DEMO
    

    View Slide

63. REST API
    

    View Slide

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
    
    
    34KJDCSKJN2HHF0DW20394
    
    Jane Doe
    
    female
    
    
    

    View Slide

65. • People
    • Activities
    • AppData
    • Messages
    • MediaItems
    • Albums
    • Groups
    

    View Slide

66. DEMO
    

    View Slide

67. Authorization
    

    View Slide

68. View Slide

69. lanyrd.com
    twitter.com
    Pre Registration of Client at
    Twitter:
    - Shared Consumer Key
    - Shared Consumer Secret
    

    View Slide

70. HTTP POST
    Connect with Twitter
    lanyrd.com
    

    View Slide

71. twitter.com
    HTTP POST
    Connect with Twitter
    HTTP GET
    Consumer Key
    Redirect URI
    Signature (Consumer
    Secret)
    lanyrd.com
    

    View Slide

72. twitter.com
    HTTP POST
    Connect with Twitter
    Request Token
    Request Token Secret
    lanyrd.com
    

    View Slide

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

    View Slide

74. HTTP GET
    twitter.com/
    authorize
    

    View Slide

75. Login
    twitter.com/
    authorize
    

    View Slide

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

    View Slide

77. Redirect URI?verifier=...
    HTTP Redirect
    twitter.com/
    authorize
    

    View Slide

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

    View Slide

79. HTTP GET
    HTTP GET
    Consumer Key
    Verifier
    Signature (Consumer &
    Request Token Secret)
    twitter.com
    lanyrd.com
    

    View Slide

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

    View Slide

81. View Slide

82. http://oauth.net/
    

    View Slide

83. Web-Server Profile
    

    View Slide

84. lanyrd.com
    twitter.com
    Pre Registration of Client at
    Twitter:
    - Shared Client ID
    - Shared Client Secret
    - Redirect URI
    

    View Slide

85. HTTP(S) POST
    Connect with Twitter
    lanyrd.com
    

    View Slide

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

    View Slide

87. HTTPS GET
    twitter.com/
    authorize
    

    View Slide

88. Login
    twitter.com/
    authorize
    

    View Slide

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

    View Slide

90. Redirect URI?authorizationCode=...
    HTTPS Redirect
    twitter.com/
    authorize
    

    View Slide

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

    View Slide

92. HTTPS GET
    HTTPS GET
    Consumer Key
    Authorization Code
    Consumer Secret
    twitter.com
    lanyrd.com
    

    View Slide

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

    View Slide

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

    View Slide

95. HTTPS GET
    HTTPS GET
    Consumer Key
    Refresh Token
    Consumer Secret
    twitter.com
    lanyrd.com
    

    View Slide

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

    View Slide

97. Embedded Experience
    

    View Slide

98. View Slide

99. View Slide

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
     
     
     
     --XXXXboundary text
     Content-Type: application/embed+json
     {
     "gadget" : "http://www.socialnetwork.com/embedded/
     commentgadget.xml",
     "context" : 123
     }
     

     View Slide

101. DEMO
     

     View Slide

102. Declarative actions
     

     View Slide

103. View Slide

104. 
     
     
     
     dataObject="opensocial.Person" label="Call using VOIP
     Phone"
     view="DialByPerson" icon="http://ww.samplervoip.org/
     phone.gif" />
     
     ]]>
     
     
     
     

     View Slide

105. 
     <br/>// Bind javascript function to action ID<br/>function mycallback{<br/>...<br/>}<br/>var myaction = {<br/>id: "org.samplevoip.callbyperson",<br/>callback: mycallback<br/>}<br/>container.actions.updateAction(myaction);<br/>
     ]]>
     
     
     

     View Slide

106. OpenSearch
     

     View Slide

107. View Slide

108. 
     
     
     Example Search
     Realtime Example Search
     template="http://search.example.com/search.atom?
     q={searchTerms}"/>
     http://search.example.com/
     favicon.png
     UTF-8
     http://search.example.com/
     
     ]]>
     
     
     

     View Slide

109. Documentation
     http://developer.studivz.net/wiki/index.php/
     Gadgets_Technical_Documentation
     http://docs.opensocial.org
     

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide