Crossing the Boundaries of Web Applications with OpenSocial

•

0 j'aime•813 vues

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

Recommandé

$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

Recommandé

$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

Contenu connexe

Tendances

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

Tendances (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

En vedette

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

En vedette (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

Similaire à 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

Similaire à 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

Plus de 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

Plus de 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

Dernier

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Scaling API-first – The story of a global engineering organizationRadu Cotescu

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Histor y of HAM Radio presentation slidevu2urc

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Artificial Intelligence: Facts and MythsJoaquim Jorge

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

A Year of the Servo Reboot: Where Are We Now?Igalia

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Slack Application Development 101 Slidespraypatel2

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech

How to convert PDF to text with Nanonetsnaman860154

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Dernier (20)

Breaking the Kubernetes Kill Chain: Host Path Mount

Scaling API-first – The story of a global engineering organization

GenCyber Cyber Security Day Presentation

Histor y of HAM Radio presentation slide

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Artificial Intelligence: Facts and Myths

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

A Year of the Servo Reboot: Where Are We Now?

What Are The Drone Anti-jamming Systems Technology?

CNv6 Instructor Chapter 6 Quality of Service

Slack Application Development 101 Slides

Handwritten Text Recognition for manuscripts and early printed texts

Advantages of Hiring UIUX Design Service Providers for Your Business

How to convert PDF to text with Nanonets

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Exploring the Future Potential of AI-Enabled Smartphone Processors

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