Embed Size (px)
DESCRIPTION
Presentation from SURFnet OpenSocial Code Jam
Citation preview
How to create an OpenSocial Gadget in 45 minutes
Bastian Hofmann
(hopefully)
Questions? Ask!
A set of APIs to access the social graph of users
I.
A specification for including 3rd party applications (gadgets) into social services
II.
GADGETapivz.net
CONTAINERmeinvz.net
Rendering
Features
Containervz.net
Gadget apivz.net
HTTP GETapivz.net/gadgets/render?xml=....
Shindigapivz.net
Containervz.net
Gadget apivz.net
HTML Page with OpenSocial JavaScript API
Shindigapivz.net
Containervz.net
Gadget apivz.net
Ajax Requests to API
Shindigapivz.net
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
Same Origin Policy
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
HTTP
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
HTTPOwner IDViewer IDOAuth Signature
Gadget Backendapi.twitter.com
Shindigapivz.net
HTTP
Containervz.net
Gadget apivz.net
Not Allowed
Containervz.net
Gadget apivz.net
Message
- window.postMessage
- Iframes with relay files
- Flash bridge
JavaScript RPC
Application models
JavaScript basedContainervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
HTTP
Shindigapivz.net
HTTP
FlashContainervz.net
Gadget apivz.net Gadget Backend
api.twitter.comHTTP
Shindigapivz.net
Flash
Ajax
HTTP
HTTP
RedirectingContainervz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
iframeapi.twitter.com
HTTP
Ajax
Additional IframeContainervz.net
Gadget apivz.net Gadget Backend
api.twitter.com
Shindigapivz.net
iframe
Ajax
Ajax
HTTP
Views
CANVAS
PROFILE
GROUP
Let‘s start programming
OpenSocial Templates
Embedded Experiences
OAuth Proxy Requests
DataPipelining
OSAPI
Proxied Content
https://github.com/bashofmann/statusnet_gadget_2nd
http://www.partuza.nl/
https://github.com/bashofmann/partuza
DEMO
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?
Templates
DEMO
Authorization
lanyrd.com
twitter.com
Pre Registration of Client at Twitter:
- Shared Consumer Key- Shared Consumer Secret
HTTP POSTConnect with Twitter
lanyrd.com
twitter.com
HTTP POSTConnect with Twitter
HTTP GETConsumer KeyRedirect URISignature (Consumer Secret)
lanyrd.com
twitter.com
HTTP POSTConnect with Twitter
Request TokenRequest Token Secret
lanyrd.com
http://twitter.com/authorize?requestToken=...&consumerKey=...
HTTP Redirect
lanyrd.com
HTTP GET
twitter.com/authorize
Login
twitter.com/authorize
Grant permission
twitter.com/authorize
Create verifier and bind it to User and Request Token
Redirect URI?verifier=...HTTP Redirect
twitter.com/authorize
HTTP GET
lanyrd.com(RedirectURI?
verifier=...)
HTTP GET
HTTP GETConsumer KeyVerifierSignature (Consumer & Request Token Secret)
twitter.com
lanyrd.com
HTTP GET
Access TokenAccess Token Secret
twitter.com
lanyrd.com
HTTP GET
API RequestConsumer KeySignature (Consumer & Access Token Secret)
twitter.com
lanyrd.com
DEMO
Documentation
http://developer.studivz.net/wiki/index.php/Gadgets_Technical_Documentation
http://docs.opensocial.org
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann
