opensocialのアーキテクチャ
TRANSCRIPT
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="[email protected]" > <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
日本のソーシャルウェブを 盛り上げて行きましょう！