OpenSocialのアーキテクチャ

4,654 views

Published on

Published in: Technology
  • Be the first to comment

OpenSocialのアーキテクチャ

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

×