Post on 31-Oct-2014
description
Crossing the boundaries of Web Applications with OpenSocial
Bastian HofmannResearchGate GmbH
Questions? Ask!
A set of APIs to access the social graph of users
A specification for including 3rd party
applications (gadgets) into social services
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
Views
CANVAS
PROFILE
POPUP
GROUP
EMBED
PREVIEW
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
Embedded Experience
From: notifications@socialnetwork.comTo: johndoe@example.comSubject: 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}
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
mail@bas2anhofmann.de