![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](https://image.slidesharecdn.com/opensocial-091114084123-phpapp01/75/OpenSocial-14-2048.jpg)
OpenSocialのアーキテクチャ
- 1. OpenSocialのアーキテクチャ えーじ 1
- 2. 自己紹介 • 北村英志 (id: agektmr) ‒ NTTレゾナント株式会社(gooホーム) ‒ Google API Expert (OpenSocial) ‒ Shindig committer ‒ SocialWeb Japan主催 ‒ ブログ: Tender Surrender http://devlog.agektmr.com/ 2
- 3. OpenSocial 3
- 4. OpenSocialアプリとは？ 4
- 5. 成り立ち • 2007年11月 Google Campfireで発表 • MySpace、hi5、orkutといった米国大手のSNS が賛同 • Googleの先導で始まったものの、現在は OpenSocial Foundationが取りまとめている 5
- 6. 特徴 • オープンな仕様 ‒ Learn Once, Write Anywhere • オープンな仕様作成プロセス ‒ http://groups.google.com/group/opensocial • 豊富な関連オープンソースプロダクト ‒ Apache Shindig ‒ OpenSocial Client Libraries ‒ OpenSocial Development Environment ‒ OpenSocial‒jQuery ‒ etc. 6
- 7. 仕様策定プロセス • オープンなメーリングリストで議論 • 誰でも仕様の提案が可能 • 仕様について議論 • 投票 • Apache Shindigで実装 • 仕様完成 7
- 8. OpenSocialの仕様 8
- 9. 2つの側面 • JavaScript API (ガジェットプラットフォーム) ‒ SNS内に埋め込むアプリケーション • RESTful API (外部サーバー連携) ‒ SNS外にソーシャルグラフを提供 9
- 10. OpenSocialガジェットでできること • HTML, CSS, JavaScript, Flash等を使った、 SNS上で動作するアプリケーションの開発 • ソーシャルグラフの取得 • プロフィールの取得 • アクティビティの送信、取得 • アプリデータの保存、取得 • メッセージの送信 • 外部サーバーとの通信 • etc. 10
- 11. ガジェットの作り方 11
- 12. 手順 1. XMLファイルを書く 2. ウェブサーバーにアップロード 3. OpenSocialコンテナに登録 4. ガジェットを表示 12
- 13. XMLファイルの構成 • メタ情報 ‒ ガジェット名 ‒ 概要 ‒ 利用する機能(feature) ‒ その他設定、定義 • ガジェットの表示内容 ‒ ビューごとに指定 ‒ HTML, CSS, JavaScript, Flash, etc.を記述 13
- 14. 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
- 15. サーバーにアップロード • Webサーバー • Google AppEngine • Dropbox 15
- 16. OpenSocialコンテナに登録 mixiアプリ gooホーム 16
- 17. ガジェットを表示 17
- 18. ガジェットはどうやって表示され ているのか？ 18
- 19. ブログパーツ? 19
- 20. XSSを避ける4つの方法 • ドメインを分ける • 安全性の確認されたJavaScriptのみ許可する • JavaScriptの危険な部分のみ無力化する(Caja) • iframeで表示する 20
- 21. ShindigでのGadget表示方法 21
- 22. iframe対応による課題 • 認証方法 • コンテナとShindigの通信方法 • 外部サーバーとの通信方法 • セキュリティ 22
- 23. OpenSocialアーキテクチャ Database External Service metadata Gadget Container Shindig XML json-rpc proxy opensocial gadgets SNS Gadget Browser 23
- 24. ガジェットが表示されるまで 24
- 25. 1. ブラウザからSNSにアクセス Database External Service Gadget Container Shindig XML Browser 25
- 26. 2. ガジェットに関する情報を収集 Database External Service metadata Gadget Container Shindig XML Browser 26
- 27. 3. SNSをレンダリング Database External Service Gadget Container Shindig XML SNS Browser 27
- 28. 4. iframeにガジェットをレンダリング Database External Service Gadget Container Shindig XML Token SNS Gadget Browser 28
- 29. 5. iframeにガジェットをレンダリング Database External Service Gadget Container Shindig XML SNS Gadget Browser 29
- 30. OpenSocial APIを使う 30
- 31. OpenSocial APIを使う Database External Service Gadget Container Shindig XML json-rpc opensocial Token SNS Gadget Browser 31
- 32. 外部サーバーと通信する 32
- 33. 外部サーバーとの通信 Database External Service Gadget Container Shindig XML proxy gadgets SNS Gadget Browser 33
- 34. Signed Request • 別名OAuth Consumer Request、2 Legged OAuth • ガジェットが外部サーバーと通信する際のオプ ション • リクエストに署名を付け加えることができる • 外部サーバーは、署名を元にリクエスト内容が 改ざんされていないかチェック可能 34
- 35. ケース1 悪意のあるサーバー External Service Evil • 無関係なガジェットやサーバーからデータを書 き換えられる 35
- 36. ケース2 悪意のあるスクリプト gadgets proxy External Service Gadget Shindig Browser • GreaseMonkey等を使って他人に成り済まされ る 36
- 37. ケース3 悪意のある仲介者 gadgets proxy External Service Gadget Shindig Browser • 通信途中のノードでリクエストを書き換えられ る 37
- 38. Signed Requestで解決 gadgets proxy External Service ............ ....... Gadget Shindig ............ ......... Browser • サーバーで正確な情報を追加 ‒ opensocial_viewer_id ‒ opensocial_owner_id ‒ opensocial_app_url • 電子署名を追加 38
- 39. OAuth • ガジェットが外部サーバーと通信する際のオプ ション • 外部サーバーの認証の仕組みを使い、ガジェッ トが認可を得ることができる • OAuth Proxy 39
- 40. OAuthを用いないマッシュアップ ID/Pass Browser Application Service • ユーザーは信頼できるとは限らないアプリケー ションに、サービスのクレデンシャル(ID/Pass) を預けざるを得なかった 40
- 41. 一般的なOAuth Token ID/Pass Browser Application Service ユーザー コンシューマ サービスプロバイダ 41
- 42. OpenSocialにおける OAuth Proxy Token ID/Pass Browser gadgets proxy External Service Gadget Shindig ユーザー コンシューマ コンシューマ? サービスプロバイダ 42
- 43. OpenSocialアーキテクチャ Database External Service metadata Gadget Container Shindig XML json-rpc proxy opensocial gadgets SNS Gadget Browser 43
- 44. 最後に • 現在日本のOpenSocialコンテナはgoo、mixi • 既にDeNA、リクルートが対応を表明 • smart.fmも対応予定 日本のソーシャルウェブを 盛り上げて行きましょう！ 44