OpenSocialのアーキテクチャ
Upcoming SlideShare
Loading in...5
×
 

OpenSocialのアーキテクチャ

on

  • 5,036 views

 

Statistics

Views

Total Views
5,036
Views on SlideShare
3,632
Embed Views
1,404

Actions

Likes
5
Downloads
21
Comments
0

11 Embeds 1,404

https://ocean.cybozu-dev.com 808
http://devlog.agektmr.com 463
http://blog.agektmr.com 58
https://ocean.s.cybozu-dev.com 31
http://wiki.dev.cybozu.co.jp 26
http://www.slideshare.net 10
http://74.125.153.132 4
http://webcache.googleusercontent.com 1
https://cybozulive.com 1
http://agektmr.blogspot.com 1
http://opcaofinal.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

OpenSocialのアーキテクチャ OpenSocialのアーキテクチャ Presentation 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="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コンテナに登録 mixiアプリ gooホーム 16
  • ガジェットを表示 17
  • ガジェットはどうやって表示され ているのか? 18
  • ブログパーツ? 19
  • XSSを避ける4つの方法•  ドメインを分ける•  安全性の確認されたJavaScriptのみ許可する•  JavaScriptの危険な部分のみ無力化する(Caja)•  iframeで表示する 20
  • ShindigでのGadget表示方法 21
  • iframe対応による課題•  認証方法•  コンテナとShindigの通信方法•  外部サーバーとの通信方法•  セキュリティ 22
  • OpenSocialアーキテクチャ Database External Service metadata GadgetContainer Shindig XML json-rpc proxy opensocial gadgets SNS Gadget Browser 23
  • ガジェットが表示されるまで 24
  • 1. ブラウザからSNSにアクセス Database External Service GadgetContainer Shindig XML Browser 25
  • 2. ガジェットに関する情報を収集 Database External Service metadata Gadget Container Shindig XML Browser 26
  • 3. SNSをレンダリング Database External Service GadgetContainer Shindig XML SNS Browser 27
  • 4. iframeにガジェットをレンダリング Database External Service Gadget Container Shindig XML Token SNS Gadget Browser 28
  • 5. iframeにガジェットをレンダリング Database External Service Gadget Container Shindig XML SNS Gadget Browser 29
  • OpenSocial APIを使う 30
  • OpenSocial APIを使う Database External Service GadgetContainer Shindig XML json-rpc opensocial Token SNS Gadget Browser 31
  • 外部サーバーと通信する 32
  • 外部サーバーとの通信 Database External Service GadgetContainer Shindig XML proxy gadgets SNS Gadget Browser 33
  • Signed Request•  別名OAuth Consumer Request、2 Legged OAuth•  ガジェットが外部サーバーと通信する際のオプ ション•  リクエストに署名を付け加えることができる•  外部サーバーは、署名を元にリクエスト内容が 改ざんされていないかチェック可能 34
  • ケース1 悪意のあるサーバー External Service Evil•  無関係なガジェットやサーバーからデータを書 き換えられる 35
  • ケース2悪意のあるスクリプト gadgets proxy External Service Gadget Shindig Browser •  GreaseMonkey等を使って他人に成り済まされ る 36
  • ケース3 悪意のある仲介者 gadgets proxy External Service Gadget Shindig Browser•  通信途中のノードでリクエストを書き換えられ る 37
  • Signed Requestで解決 gadgets proxy External Service ............ ....... Gadget Shindig ............ ......... Browser•  サーバーで正確な情報を追加 ‒  opensocial_viewer_id ‒  opensocial_owner_id ‒  opensocial_app_url•  電子署名を追加 38
  • OAuth•  ガジェットが外部サーバーと通信する際のオプ ション•  外部サーバーの認証の仕組みを使い、ガジェッ トが認可を得ることができる•  OAuth Proxy 39
  • OAuthを用いないマッシュアップ ID/Pass Browser Application Service•  ユーザーは信頼できるとは限らないアプリケー ションに、サービスのクレデンシャル(ID/Pass) を預けざるを得なかった 40
  • 一般的なOAuth Token ID/PassBrowser Application Serviceユーザー コンシューマ サービスプロバイダ 41
  • OpenSocialにおける OAuth Proxy Token ID/PassBrowser gadgets proxy External Service Gadget Shindigユーザー コンシューマ コンシューマ? サービスプロバイダ 42
  • OpenSocialアーキテクチャ Database External Service metadata GadgetContainer Shindig XML json-rpc proxy opensocial gadgets SNS Gadget Browser 43
  • 最後に•  現在日本のOpenSocialコンテナはgoo、mixi•  既にDeNA、リクルートが対応を表明•  smart.fmも対応予定 日本のソーシャルウェブを 盛り上げて行きましょう! 44