Crossing the Boundaries of Web Applications with OpenSocial

Bastian HofmannResearchGate GmbHCrossing the boundaries of WebApplications with OpenSocial

Questions? Ask!

http://slideshare.net/bashofmann

http://www.opensocial.org/

Foundationhttp://www.opensocial.org/

A set of APIs to access the social graph of users

A speciﬁcation for including 3rd partyapplications (gadgets) into social services

CONTAINER GADGETmeinvz.net apivz.net

Rendering

Features

Container Shindigvz.net apivz.net HTTP GET Gadget apivz.net/gadgets/render? apivz.net xml=....

Container Shindigvz.net apivz.net HTML Page with OpenSocial Gadget JavaScript API apivz.net

Container Shindigvz.net apivz.net Ajax Requests to API Gadget apivz.net

Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com

Same Origin Policy

Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com

Container Shindigvz.net apivz.net Ajax Gadget Gadget Backend apivz.net api.twitter.com

Container Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend apivz.net api.twitter.com

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

Shindigapivz.net HTTP Gadget Backend api.twitter.com

Containervz.net Not Allowed Gadget apivz.net

JavaScript RPCContainer - window.postMessagevz.net Message - Iframes with relay ﬁles Gadget - Flash bridge apivz.net

CANVAS

PROFILE

PREVIEW

Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming

https://github.com/bashofmann/statusnet_gadget_2nd

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

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

Authorization

Pre Registration of Client atTwitter: twitter.com- Shared Consumer Key- Shared Consumer Secret lanyrd.com

HTTP POST Connect with Twitterlanyrd.com

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

twitter.com HTTP POST Connect with Twitterlanyrd.com Request Token Request Token Secret

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

HTTP GET twitter.com/ authorize

Login twitter.com/ authorize

Grant permission twitter.com/ authorize Create veriﬁer and bind it to User and Request Token

HTTP RedirectRedirect URI?veriﬁer=... twitter.com/ authorize

HTTP GET lanyrd.com(RedirectURI? veriﬁer=...)

twitter.com HTTP GET HTTP GETlanyrd.com Consumer Key Veriﬁer Signature (Consumer & Request Token Secret)

twitter.com HTTP GETlanyrd.com Access Token Access Token Secret

twitter.com HTTP GETlanyrd.com API Request Consumer Key Signature (Consumer & Access Token Secret)

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

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

Rate and Comment http://spkr8.com/t/8739

h"p://twi"er.com/Bas2anHofmannh"ps://proﬁles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

Crossing the Boundaries of Web Applications with OpenSocial

by Bastian Hofmann

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 12

Statistics

Crossing the Boundaries of Web Applications with OpenSocial Presentation Transcript

http://speakerrate.com	7
http://lanyrd.com	4
http://a0.twimg.com	1