OpenSocial 2.0 - Viva la Open App Revolution

OpenSocial 2.0 - Viva la Open App Revolution @BastianHofmann

Your web application

Questions? Ask!

http://speakerdeck.com/u/bastianhofmann

http://www.opensocial.org/

A set of APIs to access the social graph of
users I.

A speciﬁcation for including 3rd party applications (gadgets) into social
services II.

http://www.opensocial.org/ Foundation

GADGET apivz.net CONTAINER meinvz.net

Container vz.net Gadget apivz.net HTTP GET apivz.net/gadgets/render? xml=.... Shindig apivz.net
(II.)

Container vz.net Gadget apivz.net HTML Page with OpenSocial JavaScript API
Shindig apivz.net (II.)

Container vz.net Gadget apivz.net Ajax Requests to API Shindig apivz.net
(I.)

External Page yourclient.com Shindig apivz.net HTTP (I.)

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

Same Origin Policy

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

Container vz.net Gadget apivz.net Gadget Backend api.twitter.com Shindig apivz.net Ajax

HTTP

HTTP Owner ID Viewer ID OAuth Signature

Container vz.net Gadget apivz.net Not Allowed

Same Origin Policy

Container vz.net Gadget apivz.net Message - window.postMessage - Iframes with
relay ﬁles - Flash bridge JavaScript RPC

Features

CANVAS

PROFILE

PREVIEW

Let‘s start programming

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

https://github.com/bashofmann/statusnet_gadget_2nd

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

REST API

GET /rest/people/34KJDCSKJN2HHF0DW20394/@self? fields=name,gender&format=xml HTTP/1.1 HOST api.example.org Authorization: hh5s93j4hdidpola HTTP/1.1 200
OK Content-Type: text/xml <response xmlns="http://ns.opensocial.org/ 2008/opensocial"> <person> <id>34KJDCSKJN2HHF0DW20394</id> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> </response>

• People • Activities • AppData • Messages • MediaItems
• Albums • Groups

Authorization

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

HTTP POST Connect with Twitter lanyrd.com

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

twitter.com HTTP POST Connect with Twitter Request Token Request 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 veriﬁer and bind it to
User and Request Token

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

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

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

HTTP GET Access Token Access Token Secret twitter.com lanyrd.com

http://oauth.net/

Web-Server Proﬁle

lanyrd.com twitter.com Pre Registration of Client at Twitter: - Shared
Client ID - Shared Client Secret - Redirect URI

HTTP(S) POST Connect with Twitter lanyrd.com

http://twitter.com/authorize?&clientId=... HTTPS Redirect lanyrd.com

HTTPS GET twitter.com/ authorize

Login twitter.com/ authorize

Grant permission twitter.com/ authorize Create authorization code and bind it
to User and ClientID

Redirect URI?authorizationCode=... HTTPS Redirect twitter.com/ authorize

HTTPS GET lanyrd.com (RedirectURI? authorizationCode= ...)

HTTPS GET HTTPS GET Consumer Key Authorization Code Consumer Secret
twitter.com lanyrd.com

HTTPS GET Access Token (Refresh Token) twitter.com lanyrd.com

HTTPS GET HTTPS API Request Access Token twitter.com lanyrd.com

HTTPS GET HTTPS GET Consumer Key Refresh Token Consumer Secret
twitter.com lanyrd.com

HTTPS GET Access Token Refresh Token twitter.com lanyrd.com

Embedded Experience

From: [email protected] To: [email protected] Subject: Social Network: Mary Has Commented
On Your Status MIME-Version: 1.0 Content-Type: multipart/alternative; boundary="XXXXboundary text" --XXXXboundary text Content-Type: text/html <html>  </html> --XXXXboundary text Content-Type: application/embed+json { "gadget" : "http://www.socialnetwork.com/embedded/ commentgadget.xml", "context" : 123 }

Declarative actions

<Content type="html"> <![CDATA[ <script> // Bind javascript function to action
ID function mycallback{ ... } var myaction = { id: "org.samplevoip.callbyperson", callback: mycallback } container.actions.updateAction(myaction); </script> ]]> </Content> </Module>

OpenSearch

<Optional feature="opensearch"> <Param name="description"> <![CDATA[ <OpenSearchDescription xmlns="http://a9.com/-/spec/ opensearch/1.1/"> <ShortName>Example Search</ShortName>
<Description>Realtime Example Search</Description> <Url type="application/atom+xml" method="get" template="http://search.example.com/search.atom? q={searchTerms}"/> <Image width="16" height="16">http://search.example.com/ favicon.png</Image> <InputEncoding>UTF-8</InputEncoding> <SearchForm>http://search.example.com/</SearchForm> </OpenSearchDescription> ]]> </Param> </Optional>

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

http://shindig.apache.org/ Integrate it into your site

Rate and Comment https://joind.in/talk/view/6080

h"p://twi"er.com/Bas2anHofmann h"ps://proﬁles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://speakerdeck.com/u/bas2anhofmann [email protected]

OpenSocial 2.0 - Viva la Open App Revolution

OpenSocial 2.0 - Viva la Open App Revolution

Transcript

More Decks by Bastian Hofmann

Other Decks in Programming

Featured