![Page 1: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/1.jpg)
Crossing the boundaries of Web Applications with OpenSocial
Bastian HofmannResearchGate GmbH
![Page 2: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/2.jpg)
![Page 3: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/3.jpg)
![Page 4: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/4.jpg)
![Page 5: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/5.jpg)
![Page 6: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/6.jpg)
![Page 7: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/7.jpg)
Questions? Ask!
![Page 10: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/10.jpg)
![Page 11: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/11.jpg)
![Page 13: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/13.jpg)
![Page 14: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/14.jpg)
![Page 15: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/15.jpg)
![Page 16: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/16.jpg)
![Page 17: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/17.jpg)
![Page 18: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/18.jpg)
![Page 19: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/19.jpg)
![Page 20: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/20.jpg)
![Page 21: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/21.jpg)
A set of APIs to access the social graph of users
![Page 22: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/22.jpg)
A specification for including 3rd party
applications (gadgets) into social services
![Page 23: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/23.jpg)
GADGETapivz.net
CONTAINERmeinvz.net
![Page 24: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/24.jpg)
![Page 25: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/25.jpg)
Rendering
![Page 26: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/26.jpg)
Features
![Page 27: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/27.jpg)
![Page 28: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/28.jpg)
Containervz.net
Gadget apivz.net
HTTP GETapivz.net/gadgets/render?xml=....
Shindigapivz.net
![Page 29: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/29.jpg)
Containervz.net
Gadget apivz.net
HTML Page with OpenSocial JavaScript API
Shindigapivz.net
![Page 30: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/30.jpg)
Containervz.net
Gadget apivz.net
Ajax Requests to API
Shindigapivz.net
![Page 31: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/31.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
![Page 32: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/32.jpg)
Same Origin Policy
![Page 33: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/33.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
![Page 34: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/34.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
![Page 35: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/35.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
HTTP
![Page 36: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/36.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
HTTPOwner IDViewer IDOAuth Signature
![Page 37: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/37.jpg)
Gadget Backendapi.twitter.com
Shindigapivz.net
HTTP
![Page 38: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/38.jpg)
Containervz.net
Gadget apivz.net
Not Allowed
![Page 39: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/39.jpg)
![Page 40: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/40.jpg)
Containervz.net
Gadget apivz.net
Message
- window.postMessage
- Iframes with relay files
- Flash bridge
JavaScript RPC
![Page 41: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/41.jpg)
Views
![Page 42: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/42.jpg)
CANVAS
![Page 43: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/43.jpg)
PROFILE
![Page 44: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/44.jpg)
POPUP
![Page 45: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/45.jpg)
GROUP
![Page 46: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/46.jpg)
EMBED
![Page 47: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/47.jpg)
PREVIEW
![Page 48: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/48.jpg)
Let‘s start programming
OpenSocial Templates
Embedded Experiences
OAuth Proxy Requests
DataPipelining
OSAPI
Proxied Content
![Page 49: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/49.jpg)
https://github.com/bashofmann/statusnet_gadget_2nd
![Page 50: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/50.jpg)
http://www.partuza.nl/
https://github.com/bashofmann/partuza
![Page 51: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/51.jpg)
DEMO
![Page 52: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/52.jpg)
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?
![Page 53: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/53.jpg)
Templates
![Page 54: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/54.jpg)
DEMO
![Page 55: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/55.jpg)
Authorization
![Page 56: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/56.jpg)
![Page 57: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/57.jpg)
lanyrd.com
twitter.com
Pre Registration of Client at Twitter:
- Shared Consumer Key- Shared Consumer Secret
![Page 58: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/58.jpg)
HTTP POSTConnect with Twitter
lanyrd.com
![Page 59: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/59.jpg)
twitter.com
HTTP POSTConnect with Twitter
HTTP GETConsumer KeyRedirect URISignature (Consumer Secret)
lanyrd.com
![Page 60: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/60.jpg)
twitter.com
HTTP POSTConnect with Twitter
Request TokenRequest Token Secret
lanyrd.com
![Page 61: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/61.jpg)
http://twitter.com/authorize?requestToken=...&consumerKey=...
HTTP Redirect
lanyrd.com
![Page 62: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/62.jpg)
HTTP GET
twitter.com/authorize
![Page 63: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/63.jpg)
Login
twitter.com/authorize
![Page 64: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/64.jpg)
Grant permission
twitter.com/authorize
Create verifier and bind it to User and Request Token
![Page 65: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/65.jpg)
Redirect URI?verifier=...HTTP Redirect
twitter.com/authorize
![Page 66: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/66.jpg)
HTTP GET
lanyrd.com(RedirectURI?
verifier=...)
![Page 67: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/67.jpg)
HTTP GET
HTTP GETConsumer KeyVerifierSignature (Consumer & Request Token Secret)
twitter.com
lanyrd.com
![Page 68: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/68.jpg)
HTTP GET
Access TokenAccess Token Secret
twitter.com
lanyrd.com
![Page 69: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/69.jpg)
HTTP GET
API RequestConsumer KeySignature (Consumer & Access Token Secret)
twitter.com
lanyrd.com
![Page 70: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/70.jpg)
DEMO
![Page 71: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/71.jpg)
![Page 72: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/72.jpg)
Embedded Experience
![Page 73: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/73.jpg)
From: [email protected]: [email protected]: 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}
![Page 74: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/74.jpg)
DEMO
![Page 75: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/75.jpg)
Documentation
http://developer.studivz.net/wiki/index.php/Gadgets_Technical_Documentation
http://docs.opensocial.org
![Page 77: Crossing the Boundaries of Web Applications with OpenSocial](https://reader034.vdocument.in/reader034/viewer/2022051816/54533626af7959bd2b8b819f/html5/thumbnails/77.jpg)
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann