opensocialのアーキテクチャ

OpenSocialのアーキテクチャ

えーじ

1

自己紹介 • 北村英志 (id: agektmr)

‒ NTTレゾナント株式会社(gooホーム) ‒ Google API Expert (OpenSocial) ‒ Shindig committer ‒ SocialWeb Japan主催 ‒ ブログ: Tender Surrender http://devlog.agektmr.com/

2

OpenSocial

3

OpenSocialアプリとは？

4

成り立ち •  2007年11月 Google Campfireで発表 • MySpace、hi5、orkutといった米国大手のSNSが賛同

• Googleの先導で始まったものの、現在はOpenSocial Foundationが取りまとめている

5

特徴 • オープンな仕様

‒ Learn Once, Write Anywhere • オープンな仕様作成プロセス

‒ http://groups.google.com/group/opensocial • 豊富な関連オープンソースプロダクト

‒ Apache Shindig ‒ OpenSocial Client Libraries ‒ OpenSocial Development Environment ‒ OpenSocial‒jQuery ‒ etc.

6

仕様策定プロセス • オープンなメーリングリストで議論 • 誰でも仕様の提案が可能 • 仕様について議論 • 投票 •  Apache Shindigで実装 • 仕様完成

7

OpenSocialの仕様

8

2つの側面

•  JavaScript API (ガジェットプラットフォーム) ‒ SNS内に埋め込むアプリケーション

•  RESTful API (外部サーバー連携) ‒ SNS外にソーシャルグラフを提供

9

OpenSocialガジェットでできること

• HTML, CSS, JavaScript, Flash等を使った、SNS上で動作するアプリケーションの開発

• ソーシャルグラフの取得 • プロフィールの取得 • アクティビティの送信、取得 • アプリデータの保存、取得 • メッセージの送信 • 外部サーバーとの通信 •  etc.

10

ガジェットの作り方

11

手順 1.  XMLファイルを書く 2. ウェブサーバーにアップロード 3. OpenSocialコンテナに登録 4. ガジェットを表示

12

XMLファイルの構成 • メタ情報

‒ ガジェット名 ‒ 概要 ‒ 利用する機能(feature) ‒ その他設定、定義

• ガジェットの表示内容 ‒ ビューごとに指定 ‒ HTML, CSS, JavaScript, Flash, etc.を記述

13

OpenSocialのガジェットXML <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="タイトル" description="概要文" author="Eiji

Kitamura" author_email="eiji@example.com" > <Require feature="opensocial-0.8" /> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html" view="canvas"> <![CDATA[ ガジェットに表示するソースコード ]]> </Content> </Module>

14

サーバーにアップロード • Webサーバー • Google AppEngine • Dropbox

15

OpenSocialコンテナに登録

16

mixiアプリ

gooホーム

ガジェットを表示

17

ガジェットはどうやって表示されているのか？

18

ブログパーツ?

19

XSSを避ける4つの方法 • ドメインを分ける • 安全性の確認されたJavaScriptのみ許可する •  JavaScriptの危険な部分のみ無力化する(Caja) •  iframeで表示する

20

ShindigでのGadget表示方法

21

iframe対応による課題 • 認証方法 • コンテナとShindigの通信方法 • 外部サーバーとの通信方法 • セキュリティ

22

OpenSocialアーキテクチャ

23

Shindig Container

Browser

Gadget

opensocial gadgets

Database

proxy json-rpc

metadata

External Service

Gadget XML

SNS

ガジェットが表示されるまで

24

1. ブラウザからSNSにアクセス

25

Shindig Container

Browser

Database External Service

Gadget XML

2. ガジェットに関する情報を収集

26

Shindig Container

Browser

Database

metadata

External Service

Gadget XML

3. SNSをレンダリング

27

Shindig Container

Browser

Database External Service

Gadget XML

SNS

4. iframeにガジェットをレンダリング

28

Shindig Container

Browser

Gadget

Database External Service

Gadget XML

SNS Token

5. iframeにガジェットをレンダリング

29

Shindig Container

Browser

Gadget

Database External Service

Gadget XML

SNS

OpenSocial APIを使う

30

OpenSocial APIを使う

31

Shindig Container

Browser

Gadget

opensocial

Database

json-rpc

External Service

Gadget XML

SNS Token

外部サーバーと通信する

32

外部サーバーとの通信

33

Shindig Container

Browser

Gadget

gadgets

Database

proxy

External Service

Gadget XML

SNS

Signed Request • 別名OAuth Consumer Request、2 Legged OAuth

• ガジェットが外部サーバーと通信する際のオプション

• リクエストに署名を付け加えることができる • 外部サーバーは、署名を元にリクエスト内容が改ざんされていないかチェック可能

34

ケース1

• 無関係なガジェットやサーバーからデータを書き換えられる

35

Evil External Service

悪意のあるサーバー

ケース2

• GreaseMonkey等を使って他人に成り済まされる

36

Shindig

Browser

Gadget

gadgets proxy External Service

悪意のあるスクリプト

ケース3

• 通信途中のノードでリクエストを書き換えられる

37

Shindig

Browser

Gadget

gadgets proxy External Service

悪意のある仲介者

Signed Requestで解決

• サーバーで正確な情報を追加 ‒ opensocial_viewer_id ‒ opensocial_owner_id ‒ opensocial_app_url

• 電子署名を追加 38

Shindig

Browser

Gadget

gadgets proxy External Service ............ ....... ............ .........

OAuth • ガジェットが外部サーバーと通信する際のオプション

• 外部サーバーの認証の仕組みを使い、ガジェットが認可を得ることができる

• OAuth Proxy

39

OAuthを用いないマッシュアップ

• ユーザーは信頼できるとは限らないアプリケーションに、サービスのクレデンシャル(ID/Pass)を預けざるを得なかった

40

Application Browser Service

ID/Pass

一般的なOAuth

41

Application Browser Service

ユーザー コンシューマ サービスプロバイダ

ID/Pass Token

OpenSocialにおける OAuth Proxy

42

Shindig

Browser

Gadget

gadgets proxy External Service

ユーザー コンシューマ サービスプロバイダ コンシューマ?

ID/Pass Token

OpenSocialアーキテクチャ

43

Shindig Container

Browser

Gadget

opensocial gadgets

Database

proxy json-rpc

metadata

External Service

Gadget XML

SNS

最後に • 現在日本のOpenSocialコンテナはgoo、mixi • 既にDeNA、リクルートが対応を表明 •  smart.fmも対応予定

44

日本のソーシャルウェブを 盛り上げて行きましょう！