Crossing the Boundaries of Web Applications with OpenSocial

•

0 gefällt mir•813 views

Bastian Hofmann

Technologie

A set of APIs to access the social graph of users

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

Container Shindig
vz.net apivz.net

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

Container Shindig
vz.net apivz.net

HTML Page with OpenSocial
Gadget JavaScript API
apivz.net

Container Shindig
vz.net apivz.net

Ajax Requests to API
Gadget
apivz.net

Container
vz.net

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

Container Shindig
vz.net apivz.net
Ajax

Gadget Gadget Backend
apivz.net api.twitter.com

Container Shindig
vz.net apivz.net
Ajax
HTTP

Gadget Gadget Backend
apivz.net api.twitter.com

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

Shindig
apivz.net

HTTP

Gadget Backend
api.twitter.com

Container
vz.net
Not Allowed
Gadget
apivz.net

JavaScript RPC
Container - window.postMessage
vz.net
Message - Iframes with relay ﬁles

Gadget - Flash bridge
apivz.net

Proxied Content
OpenSocial 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?

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

lanyrd.com

HTTP POST
Connect with Twitter

lanyrd.com

twitter.com

HTTP POST
Connect with Twitter

HTTP GET
lanyrd.com Consumer Key
Redirect URI
Signature (Consumer
Secret)

twitter.com

HTTP POST
Connect with Twitter

lanyrd.com
Request Token
Request Token Secret

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

lanyrd.com

Grant permission

twitter.com/
authorize

Create veriﬁer
and bind it to
User and Request
Token

HTTP Redirect
Redirect URI?veriﬁer=...

twitter.com/
authorize

HTTP GET

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

twitter.com

HTTP GET

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

twitter.com

HTTP GET

lanyrd.com
Access Token
Access Token Secret

twitter.com

HTTP GET

lanyrd.com
API Request
Consumer Key
Signature (Consumer &
Access Token Secret)

From: notifications@socialnetwork.com
To: johndoe@example.com
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 representation here -->
</html>

--XXXXboundary text
Content-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/Bas2anHofmann
h"ps://proﬁles.google.com/bashofmann
h"p://lanyrd.com/people/Bas2anHofmann/
h"p://slideshare.net/bashofmann

mail@bas2anhofmann.de

Empfohlen

$Introduction to rg\injection$ $Introduction to rg\injection$

Introduction to rg\injectionBastian Hofmann

Working with Images in WordPress randyhoyt

OAuth Hacks A gentle introduction to OAuth 2 and Apache OltuAntonio Sanso

Using OAuth with PHPDavid Ingram

Facebook Social PluginsAizat Faiz

Jabber BotAizat Faiz

Approaching the unknown - Windows Phone application security assessment guideSecuRing

What the Heck is OAuth and OpenID Connect - RWX 2017Matt Raible

Empfohlen

$Introduction to rg\injection$ $Introduction to rg\injection$

Introduction to rg\injectionBastian Hofmann

Working with Images in WordPress randyhoyt

OAuth Hacks A gentle introduction to OAuth 2 and Apache OltuAntonio Sanso

Using OAuth with PHPDavid Ingram

Facebook Social PluginsAizat Faiz

Jabber BotAizat Faiz

Approaching the unknown - Windows Phone application security assessment guideSecuRing

What the Heck is OAuth and OpenID Connect - RWX 2017Matt Raible

Beginning WordPress Plugin DevelopmentAizat Faiz

Let's Build a ChatbotTessa Mero

Stateless authentication for microservices - Greach 2015Alvaro Sanchez-Mariscal

Your WordPress Site is and is not Hacked - You don't know until you checkAngela Bowman

Your WordPress Website Is/Not HackedAngela Bowman

Really Awesome WordPress Plugins You Should Know AboutAngela Bowman

Startups, Tech and Rock 'n' Roll iFusion Marketing

Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann

Arthur Edward Associates CV AdviceKGS Global

Integrated Marketing for Start-ups and Small BusinessesiFusion Marketing

On the implementation of the "UNICEF Guidelines for the Protection of the Rig...Tierra de hombres - Ayuda a la infancia

Sebastien Gourdon, Open Innovation Director, SpecialChemKGS Global

Patrick Ternier, CEO, Innovation Framework TechnologiesKGS Global

Lab 2) develop a java applicationtechbed

How to create OpenSocial Apps in 45 minutesBastian Hofmann

The Identity Problem of the Web and how to solve itBastian Hofmann

IGNITE OpenSocial 2.0 - Viva La OpenAppRevolution! Bastian Hofmann

Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann

Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...CA API Management

From ZERO to REST in an hour Cisco DevNet

Creating social games for millions of usersBastian Hofmann

Integrating WordPress With Web APIsrandyhoyt

Weitere ähnliche Inhalte

Was ist angesagt?

Beginning WordPress Plugin DevelopmentAizat Faiz

Let's Build a ChatbotTessa Mero

Stateless authentication for microservices - Greach 2015Alvaro Sanchez-Mariscal

Your WordPress Site is and is not Hacked - You don't know until you checkAngela Bowman

Your WordPress Website Is/Not HackedAngela Bowman

Really Awesome WordPress Plugins You Should Know AboutAngela Bowman

Was ist angesagt? (6)

Beginning WordPress Plugin Development

Let's Build a Chatbot

Stateless authentication for microservices - Greach 2015

Your WordPress Site is and is not Hacked - You don't know until you check

Your WordPress Website Is/Not Hacked

Really Awesome WordPress Plugins You Should Know About

Andere mochten auch

Startups, Tech and Rock 'n' Roll iFusion Marketing

Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann

Arthur Edward Associates CV AdviceKGS Global

Integrated Marketing for Start-ups and Small BusinessesiFusion Marketing

On the implementation of the "UNICEF Guidelines for the Protection of the Rig...Tierra de hombres - Ayuda a la infancia

Sebastien Gourdon, Open Innovation Director, SpecialChemKGS Global

Patrick Ternier, CEO, Innovation Framework TechnologiesKGS Global

Lab 2) develop a java applicationtechbed

Andere mochten auch (8)

Startups, Tech and Rock 'n' Roll

Crossing the Boundaries of Web Applications with OpenSocial

Arthur Edward Associates CV Advice

Integrated Marketing for Start-ups and Small Businesses

On the implementation of the "UNICEF Guidelines for the Protection of the Rig...

Sebastien Gourdon, Open Innovation Director, SpecialChem

Patrick Ternier, CEO, Innovation Framework Technologies

Lab 2) develop a java application

Ähnlich wie Crossing the Boundaries of Web Applications with OpenSocial

How to create OpenSocial Apps in 45 minutesBastian Hofmann

The Identity Problem of the Web and how to solve itBastian Hofmann

IGNITE OpenSocial 2.0 - Viva La OpenAppRevolution! Bastian Hofmann

Crossing the Boundaries of Web Applications with OpenSocialBastian Hofmann

Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...CA API Management

From ZERO to REST in an hour Cisco DevNet

Creating social games for millions of usersBastian Hofmann

Integrating WordPress With Web APIsrandyhoyt

Centralise legacy auth at the ingress gateway, SREdayAndrew Kirkpatrick

Centralise legacy auth at the ingress gatewayAndrew Kirkpatrick

API Workshop: Deep dive into REST APIsTom Johnson

OAuth and OEmbedleahculver

Adding identity management and access control to your appÁlvaro Alonso González

アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -Naoki Nagazumi

Adding Identity Management and Access Control to your AppFIWARE

Api security with OAuththariyarox

Implementing OAuthleahculver

Best Practices for Architecting a Pragmatic Web API.Mario Cardinal

Stateless authentication for microservices - Spring I/O 2015Alvaro Sanchez-Mariscal

FIWARE ID ManagementMiguel García González

Ähnlich wie Crossing the Boundaries of Web Applications with OpenSocial (20)

How to create OpenSocial Apps in 45 minutes

The Identity Problem of the Web and how to solve it

IGNITE OpenSocial 2.0 - Viva La OpenAppRevolution!

Crossing the Boundaries of Web Applications with OpenSocial

Understanding Identity in the World of Web APIs – Ronnie Mitra, API Architec...

From ZERO to REST in an hour

Creating social games for millions of users

Integrating WordPress With Web APIs

Centralise legacy auth at the ingress gateway, SREday

Centralise legacy auth at the ingress gateway

API Workshop: Deep dive into REST APIs

OAuth and OEmbed

Adding identity management and access control to your app

アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -

Adding Identity Management and Access Control to your App

Api security with OAuth

Implementing OAuth

Best Practices for Architecting a Pragmatic Web API.

Stateless authentication for microservices - Spring I/O 2015

FIWARE ID Management

Mehr von Bastian Hofmann

Mashing up JavaScriptBastian Hofmann

Distributed Identities with OpenIDBastian Hofmann

Opening up the Social Web - Standards that are bridging the IslandsBastian Hofmann

Mashing up JavaScript – Advanced Techniques for modern Web AppsBastian Hofmann

Mashing up JavaScriptBastian Hofmann

How to create social apps for millions of users Bastian Hofmann

Distributed Identities with OpenIDBastian Hofmann

OpenSocial - Past, Present, FutureBastian Hofmann

Distributed Social NetworkingBastian Hofmann

Technical Background of VZ-IDBastian Hofmann

Advanced Capabilities of OpenSocial AppsBastian Hofmann

Creating OpenSocial Apps for millions of usersBastian Hofmann

How to make your social games successfullBastian Hofmann

Opening up the Social Web - Standards that are bridging the Islands Bastian Hofmann

Distributed Identities with OpenIDBastian Hofmann

Creating OpenSocial AppsBastian Hofmann

OpenSocial in der PraxisBastian Hofmann

OpenSocial Done RightBastian Hofmann

Social apps done rightBastian Hofmann

Mehr von Bastian Hofmann (19)

Mashing up JavaScript

Distributed Identities with OpenID

Opening up the Social Web - Standards that are bridging the Islands

Mashing up JavaScript – Advanced Techniques for modern Web Apps

Mashing up JavaScript

How to create social apps for millions of users

Distributed Identities with OpenID

OpenSocial - Past, Present, Future

Distributed Social Networking

Technical Background of VZ-ID

Advanced Capabilities of OpenSocial Apps

Creating OpenSocial Apps for millions of users

How to make your social games successfull

Opening up the Social Web - Standards that are bridging the Islands

Distributed Identities with OpenID

Creating OpenSocial Apps

OpenSocial in der Praxis

OpenSocial Done Right

Social apps done right

Kürzlich hochgeladen

Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz

Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

"ML in Production",Oleksandr BaganFwdays

Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren

AI as an Interface for Commercial BuildingsMemoori

Gen AI in Business - Global Trends Report 2024.pdfAddepto

Powerpoint exploring the locations used in television show Time Clashcharlottematthew16

CloudStudio User manual (basic edition):comworks

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski

Kürzlich hochgeladen (20)

Vector Databases 101 - An introduction to the world of Vector Databases

Streamlining Python Development: A Guide to a Modern Project Setup

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

Anypoint Exchange: It’s Not Just a Repo!

My Hashitalk Indonesia April 2024 Presentation

Unraveling Multimodality with Large Language Models.pdf

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...

Ensuring Technical Readiness For Copilot in Microsoft 365

SAP Build Work Zone - Overview L2-L3.pptx

Are Multi-Cloud and Serverless Good or Bad?

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack

Designing IA for AI - Information Architecture Conference 2024

"ML in Production",Oleksandr Bagan

Advanced Test Driven-Development @ php[tek] 2024

AI as an Interface for Commercial Buildings

Gen AI in Business - Global Trends Report 2024.pdf

Powerpoint exploring the locations used in television show Time Clash

CloudStudio User manual (basic edition):

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...

Crossing the Boundaries of Web Applications with OpenSocial

1. Bastian Hofmann ResearchGate GmbH Crossing the boundaries of Web Applications with OpenSocial

7. Questions? Ask!

8. http://slideshare.net/bashofmann

9. http://www.opensocial.org/

10.

11.

12. Foundation http://www.opensocial.org/

13.

14.

15.

16.

17.

18.

19.

20.

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

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

23. CONTAINER GADGET meinvz.net apivz.net

24.

25. Rendering

26. Features

27.

28. Container Shindig vz.net apivz.net HTTP GET Gadget apivz.net/gadgets/render? apivz.net xml=....

29. Container Shindig vz.net apivz.net HTML Page with OpenSocial Gadget JavaScript API apivz.net

30. Container Shindig vz.net apivz.net Ajax Requests to API Gadget apivz.net

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

32. Same Origin Policy

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

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

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

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

37. Shindig apivz.net HTTP Gadget Backend api.twitter.com

38. Container vz.net Not Allowed Gadget apivz.net

39.

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

41. Views

42. CANVAS

43. PROFILE

44. POPUP

45. GROUP

46. EMBED

47. PREVIEW

48. Proxied Content OpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming

49. https://github.com/bashofmann/statusnet_gadget_2nd

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

51. DEMO

52. 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?

53. Templates

54. DEMO

55. Authorization

56.

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

58. HTTP POST Connect with Twitter lanyrd.com

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

60. twitter.com HTTP POST Connect with Twitter lanyrd.com Request Token Request Token Secret

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

62. HTTP GET twitter.com/ authorize

63. Login twitter.com/ authorize

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

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

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

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

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

69. twitter.com HTTP GET lanyrd.com API Request Consumer Key Signature (Consumer & Access Token Secret)

70. DEMO

71.

72. Embedded Experience

73. From: notifications@socialnetwork.com To: johndoe@example.com 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 }

74. DEMO

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

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

77. h"p://twi"er.com/Bas2anHofmann h"ps://proﬁles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://slideshare.net/bashofmann mail@bas2anhofmann.de