How to create OpenSocial Apps in 45 minutes
3 likes2,148 views
The document discusses how to create an OpenSocial gadget in 45 minutes by going over the OpenSocial specification which defines a way for third party applications called gadgets to be included in social services, and how gadgets communicate with containers like Shindig through APIs to access user social graphs and features using technologies like JavaScript and Flash. It also covers the authorization process gadgets go through to access social APIs by obtaining access tokens from services like Twitter.
![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?](https://image.slidesharecdn.com/surfnetopensocial-111103064632-phpapp01/85/How-to-create-OpenSocial-Apps-in-45-minutes-51-320.jpg)
How to create OpenSocial Apps in 45 minutes
- 1. How to create an OpenSocial Gadget in 45 minutes (hopefully) Bastian Hofmann
- 18. I. A set of APIs to access the social graph of users
- 19. II. A specification for including 3rd party applications (gadgets) into social services
- 20. CONTAINER GADGET meinvz.net apivz.net
- 22. Rendering
- 23. Features
- 25. Container Shindig vz.net apivz.net HTTP GET Gadget apivz.net/gadgets/render? apivz.net xml=....
- 26. Container Shindig vz.net apivz.net HTML Page with OpenSocial Gadget JavaScript API apivz.net
- 27. Container Shindig vz.net apivz.net Ajax Requests to API Gadget apivz.net
- 28. Container vz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
- 30. Container vz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
- 31. Container Shindig vz.net apivz.net Ajax Gadget Gadget Backend apivz.net api.twitter.com
- 32. Container Shindig vz.net apivz.net Ajax HTTP Gadget Gadget Backend apivz.net api.twitter.com
- 33. Container Shindig vz.net apivz.net Ajax HTTP Owner ID Viewer ID Gadget OAuth Signature apivz.net Gadget Backend api.twitter.com
- 34. Shindig apivz.net HTTP Gadget Backend api.twitter.com
- 35. Container vz.net Not Allowed Gadget apivz.net
- 37. JavaScript RPC Container - window.postMessage vz.net Message - Iframes with relay files Gadget - Flash bridge apivz.net
- 39. JavaScript based Container Shindig vz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
- 40. Flash Container Shindig vz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
- 41. Redirecting Container Shindig vz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
- 42. Additional Iframe Container Shindig vz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
- 43. Views
- 44. CANVAS
- 45. PROFILE
- 46. GROUP
- 47. Proxied Content OpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming
- 50. DEMO
- 51. 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?
- 52. Templates
- 53. DEMO
- 54. Authorization
- 56. Pre Registration of Client at Twitter: twitter.com - Shared Consumer Key - Shared Consumer Secret lanyrd.com
- 57. HTTP POST Connect with Twitter lanyrd.com
- 58. twitter.com HTTP POST Connect with Twitter HTTP GET lanyrd.com Consumer Key Redirect URI Signature (Consumer Secret)
- 59. twitter.com HTTP POST Connect with Twitter lanyrd.com Request Token Request Token Secret
- 60. HTTP Redirect http://twitter.com/authorize? requestToken=...&consumerKey=... lanyrd.com
- 61. HTTP GET twitter.com/ authorize
- 62. Login twitter.com/ authorize
- 63. Grant permission twitter.com/ authorize Create verifier and bind it to User and Request Token
- 64. HTTP Redirect Redirect URI?verifier=... twitter.com/ authorize
- 65. HTTP GET lanyrd.com (RedirectURI? verifier=...)
- 66. twitter.com HTTP GET HTTP GET lanyrd.com Consumer Key Verifier Signature (Consumer & Request Token Secret)
- 67. twitter.com HTTP GET lanyrd.com Access Token Access Token Secret
- 68. twitter.com HTTP GET lanyrd.com API Request Consumer Key Signature (Consumer & Access Token Secret)
- 69. DEMO
- 70. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
- 71. Rate and Comment http://spkr8.com/t/8873