Your SlideShare is downloading. ×
0
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
PFI Seminar 2012/02/24
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PFI Seminar 2012/02/24

2,051

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,051
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Twitter アプリ、 Facebook アプリを作ろう! <ul><li>株式会社プリファードインフラストラクチャー </li></ul><ul><li>今村祐一郎 </li></ul><ul><li>2012 年 2 月 23 日 </li></ul>
  • 2. 自己紹介(2度目なので軽く) <ul><li>今村祐一郎 </li></ul><ul><ul><li>昨年1月入社 </li></ul></ul><ul><ul><li>Web ザッピングサービス「 Xappy 」の開発・運営を担当 </li></ul></ul><ul><ul><ul><li>PFI では数少ない (?) 「サービスを直接手がけている」メンバー </li></ul></ul></ul><ul><ul><li>Rails とか Javascript とか Actionscript とか できます </li></ul></ul>
  • 3. SNS とアプリ連携 <ul><li>大手 SNS の持つ情報量は膨大で有益 </li></ul><ul><ul><li>ユーザの発言内容やその傾向 </li></ul></ul><ul><ul><li>ユーザの行動 </li></ul></ul><ul><ul><li>ユーザ同士のつながり </li></ul></ul><ul><li>アプリ連携を行うことで、その情報に API でアクセスできる </li></ul><ul><ul><li>許可モデルによっては API で新たに行動を起こすことも可能 </li></ul></ul><ul><ul><ul><li>発言、フォロー、お気に入り、 etc… </li></ul></ul></ul><ul><ul><li>自サービスへのログイン手段の代替としても使える </li></ul></ul><ul><li>API にアクセスするために OAuth という認証を経る </li></ul>
  • 4. SNS 連携を扱う注意点 <ul><li>OAuth 認証(とくに Twitter の)は仕組みが複雑 </li></ul><ul><ul><li>各言語に用意されたライブラリを使わないとやってられない </li></ul></ul><ul><ul><li>しかしライブラリにもバグが多かったりする </li></ul></ul><ul><li>認証含め、 SNS 連携 API は仕様が目まぐるしく変わる </li></ul><ul><ul><li>公式ドキュメントすら更新が現状に追いついてないことも </li></ul></ul><ul><ul><li>日本語のドキュメントはほとんど揃ってない </li></ul></ul><ul><ul><li>このプレゼン資料の内容もいつ Deprecated になるやら… </li></ul></ul><ul><li>同時に、開発側に立って初めてわかった、 SNS 連携を許可する際に注意すべきことについても説明する </li></ul>
  • 5. OAuth 認証 (1) <ul><li>セキュアな API 認証を提供するオープンプロトコル </li></ul><ul><li>SNS へのログインは通常、ユーザ名 / パスワードの対で行う </li></ul><ul><ul><li>第三者にそれをまるごと渡すのはすごく危険 </li></ul></ul><ul><ul><li>API を使ってサービスを提供したい側もそれは避けたい </li></ul></ul><ul><ul><li>だけどその人の情報にはアクセスしたい… </li></ul></ul><ul><ul><li>そこで OAuth 認証! </li></ul></ul><ul><li>現在 OAuth2.0 が主流 </li></ul><ul><ul><li>Facebook -&gt; 2.0 </li></ul></ul><ul><ul><li>Twitter -&gt; 1.0 </li></ul></ul>
  • 6. OAuth 認証 (2) <ul><li>ソーシャルメディア S 上のとあるアプリ A を想定 </li></ul><ul><ul><li>アプリベンダは、 A が S 上のアプリであることを示すトークンを得る </li></ul></ul><ul><ul><li>さらに、各ユーザ U について以下を示すトークンを得る </li></ul></ul><ul><ul><ul><li>U が S 上のユーザである </li></ul></ul></ul><ul><ul><ul><li>U が A を用いることに許可を出している </li></ul></ul></ul><ul><ul><li> これらのトークンを用いて、認証を行う </li></ul></ul>Consumer Key Consumer Secret Access Token Access Token Secret
  • 7. OAuth のいいところ <ul><li>「ユーザ U がメディア S を介してアプリ A を使う」という事実1つにトークン1つが割り当てられる、ということ </li></ul><ul><ul><li>ユーザ名・パスワードの対がアプリ側に知られない </li></ul></ul><ul><ul><li>トークンさえ無効化すればアプリはユーザに触れられなくなる </li></ul></ul><ul><ul><ul><li>ユーザはちょっとの作業でトークンを無効化できる </li></ul></ul></ul><ul><ul><li>アプリ or トークンごとに個別のパーミッションが設定可能 </li></ul></ul>
  • 8. アプリのパーミッション(許可) (1) <ul><li>Twitter(OAuth 1.0) </li></ul><ul><ul><li>Read Only </li></ul></ul><ul><ul><ul><li>ツイートを見れる </li></ul></ul></ul><ul><ul><ul><li>フォロー関係を知れる </li></ul></ul></ul><ul><ul><li>Read and Write (Read Only の上位互換 ) </li></ul></ul><ul><ul><ul><li>新しく誰かをフォローする </li></ul></ul></ul><ul><ul><ul><ul><li>アンフォロー、ブロック、スパム報告まで可能 </li></ul></ul></ul></ul><ul><ul><ul><li>プロフィールを更新する </li></ul></ul></ul><ul><ul><ul><li>ツイートする(ソースはそのアプリから) </li></ul></ul></ul><ul><ul><ul><ul><li>ダイレクトメッセージも送れる </li></ul></ul></ul></ul><ul><ul><li>Read, Write and Direct Messages (R&amp;W の上位互換 ) </li></ul></ul><ul><ul><ul><li>ダイレクトメッセージを見る </li></ul></ul></ul><ul><ul><li>パーミッションはアプリごとに設定される </li></ul></ul>
  • 9. アプリのパーミッション(許可) (2) <ul><li>Facebook </li></ul><ul><ul><li>なんかもう、めいっぱい </li></ul></ul><ul><ul><ul><li>Facebook 上でログインユーザがアクセス / 更新できる個々の要素について、パーミッションを要求できる </li></ul></ul></ul><ul><ul><ul><li>http://developers.facebook.com/docs/reference/api/permissions/ に一覧があります </li></ul></ul></ul><ul><ul><ul><li>パーミッションはトークンごとに設定される </li></ul></ul></ul><ul><ul><li>重要: offline_access, publish_stream </li></ul></ul><ul><ul><ul><li>Facebook ユーザがログアウトしている状態でも、ユーザの情報にアクセスできる / 投稿できる </li></ul></ul></ul><ul><ul><ul><li>正確にはトークンの有効時間が事実上無限になる </li></ul></ul></ul><ul><ul><ul><li>ちなみに Twitter は常に offline_access 可能 </li></ul></ul></ul>
  • 10. Twitter で OAuth 認証を確立するまで(フロー) <ul><li>デベロッパーサイトでアプリ登録 </li></ul><ul><ul><li>Consumer Key / Secret を得る </li></ul></ul><ul><li>Request Token / Secret を獲得 </li></ul><ul><ul><li>ユーザに承認を求める画面を表示するために必要 </li></ul></ul><ul><li>ユーザからの承認を得る </li></ul><ul><li>Access Token / Secret を獲得 </li></ul><ul><li>完了! </li></ul>
  • 11. Twitter の OAuth 認証 (1. アプリ登録 ) <ul><li>アプリ登録 </li></ul><ul><ul><li>一度きりで OK </li></ul></ul><ul><li>https://dev.twitter.com/ に Twitter アカウントでログイン </li></ul><ul><li>右上のアカウント名から” My applications” -&gt; “Create a new application” </li></ul><ul><li>適切な情報を入力し、 Agreement と CAPTCHA を通して登録 </li></ul><ul><ul><li>“ WebSite” はツイート時のツイートソースの飛び先 </li></ul></ul><ul><ul><li>“ Callback URL” は空でよい </li></ul></ul><ul><li>Consumer Key / Secret の対が表示されるのでメモ </li></ul><ul><ul><li>パーミッションは登録後にのみ変更可能 </li></ul></ul>
  • 12. Twitter の OAuth 認証 (2.AccessToken を得るまで ) Twitter App User ConsumerKey/Secret を使い RequestToken を要求 RequestToken/Secret を譲渡 RequestToken を用い アプリ許可用 URL を踏ませる アプリ許可ページを見て、許可する CallbackURL に Verifier が届く ここまでの情報を用い、 AccessToken/Secret を要求 AccessToken/Secret を譲渡
  • 13. Twitter の OAuth 認証 (3. シグネチャ ) <ul><li>各トークンを獲得したり API アクセスを行う際にはシグネチャ oauth_signature がパラメータとして必要 </li></ul><ul><ul><li>メッセージ文字列とキー文字列から SHA-1 アルゴリズムでハッシュ値を得、 base64 したもの </li></ul></ul><ul><ul><li>メッセージ文字列は以下を &amp; でつなげたもの </li></ul></ul><ul><ul><ul><li>問い合わせのメソッド( ex. “GET” ) </li></ul></ul></ul><ul><ul><ul><li>問い合わせ先 URL ( URI エスケープ済み) </li></ul></ul></ul><ul><ul><ul><li>シグネチャ以外のパラメータを、そのキーについて昇順ソートし、 &amp; でつなげた上で URI エスケープしたもの </li></ul></ul></ul><ul><ul><li>キー文字列は各種 TokenSecret を URI エスケープして &amp; でつなげたもの </li></ul></ul>
  • 14. Twitter の OAuth 認証 (4.RequestToken 獲得 1) SHA-1 base64 PQkSRLEI6vynteEmxMKx3WvnryA= シグネチャ http ではなく https です、気をつけて! <ul><li>oauth_consumer_key=DUMMYCONSUMERKEY1234 </li></ul><ul><li>oauth_nonce=DUMMYNONCE4126    ← 問い合わせごとに変わるナンス </li></ul><ul><li>oauth_signature_method=HMAC-SHA1 </li></ul><ul><li>oauth_timestamp=123456789    ← UNIX 時間 </li></ul><ul><li>oauth_version=1.0 </li></ul>パラメータ GET https://twitter.com/oauth/request_token GET&amp; https%3A%2F%2Ftwitter.com%2Foauth%2Frequest_token&amp; oauth_consumer_key%3D DUMMYCONSUMERKEY1234 %26oauth_nonce%3DDUMMYNONCE4126%26oauth_signature_method%3DHMAC-SHA1%26oauth_timestamp%3D123456789%26oauth_version%3D1.0 メッセージ文字列 DUMMYCONSUMERSECRET7890&amp; キー文字列 末尾の &amp; を忘れないよう気をつけて!
  • 15. Twitter の OAuth 認証 (5.RequestToken 獲得 2) <ul><li>前頁で作ったシグネチャを oauth_signature というパラメータで追加し、リクエストを送ると、以下のような文字列が帰る </li></ul><ul><li>oauth_token だけ URL に付与して、ユーザにアプリ承認用ページを踏ませる </li></ul><ul><ul><li>http://twitter.com/oauth/ authorize </li></ul></ul><ul><ul><ul><li>承認完了後に PIN コードが表示され、それが Verifier となる </li></ul></ul></ul><ul><ul><li>http://twitter.com/oauth/ authenticate </li></ul></ul><ul><ul><ul><li>承認完了後に callback パラメータに示された URL へ、リクエストパラメータに Verifier が含まれた上でリダイレクトされる </li></ul></ul></ul>oauth_token= DUMMYOAUTHTOKEN77777777 &amp; oauth_token_secret= DUMMYOAUTHTOKENSECRET12121212121212 &amp; oauth_callback_confirmed= true
  • 16. Twitter の OAuth 認証 (6.AccessToken 獲得 1) SHA-1 base64 gyk/mXdgnE5KxT/NYCOZ4woihHo= シグネチャ ConsumerSecret と OauthTokenSecret を &amp; でつなげたもの <ul><li>oauth_consumer_key=DUMMYCONSUMERKEY1234 </li></ul><ul><li>oauth_nonce=DUMMYNONCE5656 </li></ul><ul><li>oauth_signature_method=HMAC-SHA1 </li></ul><ul><li>oauth_timestamp=123456799 </li></ul><ul><li>oauth_token=DUMMYOAUTHTOKEN77777777 </li></ul><ul><li>oauth_verifier=7654321    ← さきほどの Verifier </li></ul><ul><li>oauth_version=1.0 </li></ul>パラメータ GET https://twitter.com/oauth/ access_token (省略) メッセージ文字列 DUMMYCONSUMERSECRET7890&amp; DUMMYOAUTHTOKENSECRET12121212121212 キー文字列
  • 17. Twitter の OAuth 認証 (7.AccessToken 獲得 2) <ul><li>前頁で作ったシグネチャを oauth_signature というパラメータで追加し、リクエストを送ると、以下のような文字列が帰る </li></ul><ul><li>このトークン対を保管しておけば API を叩ける </li></ul>oauth_token= 11223344-DUMMYACCESSTOKEN &amp; oauth_token_secret= DUMMYACCESSTOKENSECRET &amp; user_id=11223344&amp; screen_name=i_am_twitter_user
  • 18. Twitter の OAuth 認証 (8.API を叩く ) SHA-1 base64 rvP0LVu0ZyGyzLLM7DDeogMXRG4= シグネチャ ConsumerSecret と AccessTokenSecret を &amp; でつなげたもの <ul><li>oauth_consumer_key=DUMMYCONSUMERKEY1234 </li></ul><ul><li>oauth_nonce=DUMMYNONCE7878 </li></ul><ul><li>oauth_signature_method=HMAC-SHA1 </li></ul><ul><li>oauth_timestamp=123456899 </li></ul><ul><li>oauth_token=11223344-DUMMYACCESSTOKEN    ← AccessToken </li></ul><ul><li>oauth_version=1.0 </li></ul><ul><li>status= 私は学長です。   ←つぶやき内容 </li></ul>パラメータ POST http://api.twitter.com/1/statuses/update.json POST&amp;... (以下省略) メッセージ文字列 DUMMYCONSUMERSECRET7890&amp; DUMMYACCESSTOKENSECRET キー文字列
  • 19. Twitter の API 群 <ul><li>RESTfulAPI </li></ul><ul><ul><li>適切なリソース URL 、メソッド、パラメータでリクエストする必要あり </li></ul></ul><ul><ul><li>リクエストの末尾につける拡張子によって、レスポンスを JSON, XML, RSS, Atom から選べる </li></ul></ul><ul><li>StreamAPI </li></ul><ul><ul><li>持続的な HTTP 接続により、情報を PUSH 形式で獲得する </li></ul></ul><ul><ul><li>一部 API は一般公開されていない </li></ul></ul>
  • 20. Facebook の OAuth 認証フロー <ul><li>Twitter のそれよりシンプル? </li></ul><ul><ul><li>シグネチャを作らなくてよい </li></ul></ul><ul><ul><li>RequestToken を取得する必要がない </li></ul></ul>Facebook App User AppID とパーミッションを付与して アプリ許可ページを見せる アプリ許可ページを見て、許可する CallbackURL に Code が届く Code と AppSecret を送信 AccessToken を譲渡
  • 21. Facebook の Oauth 認証 (1. アプリ登録 ) <ul><li>アプリ登録 </li></ul><ul><ul><li>1度きりで OK </li></ul></ul><ul><ul><li>本人認証が必要(クレジットカードか携帯電話) </li></ul></ul><ul><li>http://developers.facebook.com/ に Facebook アカウントでログイン </li></ul><ul><li>上のバーから「アプリ」を選択 </li></ul><ul><li>「 + 新しいアプリケーションを作成」 </li></ul><ul><li>適切にアプリ名と名前空間を設定し、 CAPTCHA を通して登録 </li></ul><ul><li>AppID/AppSecret の対が表示されるのでメモ </li></ul>
  • 22. Facebook の Oauth 認証 (2. アプリ登録 ) <ul><li>ユーザにアプリ許可ページを閲覧させる </li></ul><ul><ul><li>https://www.facebook.com/dialog/oauth?client_id=[AppId]&amp;redirect_uri=[callback_url]&amp;scope=[permissions ] </li></ul></ul>
  • 23. Facebook の Oauth 認証 (3.AccessToken の獲得 ) <ul><li>アプリ許可ページでユーザが許可すると、 redirect_uri に指定した URL にリダイレクトされる </li></ul><ul><ul><li>?code=DUMMYCODE123456 といった感じで code パラメータがついてくる </li></ul></ul><ul><li>アプリ側から、この code と AppSecret をあわせて Facebook に問い合わせる </li></ul><ul><ul><li>このリクエストはコールバックされないが、 redirect_uri はアプリ許可ページの redirect_uri と同一である必要がある </li></ul></ul><ul><ul><li>レスポンスとしてアクセストークンが帰ってくる </li></ul></ul>access_token=DUMMYACCESSTOKEN-12345678&amp; expires=123456789 <ul><ul><li>https://graph.facebook.com/oauth/access_token?client_id=[AppId]&amp;redirect_uri=[callback_url]&amp;client_secret=[AppSecret]&amp;code=[code ] </li></ul></ul>
  • 24. Facebook の OAuth 認証 (4.API を叩く ) <ul><li>先に獲得した access_token をパラメータに含める </li></ul><ul><ul><li>https://graph.facebook.com/me/home?access_token= DUMMYACCESSTOKEN-12345678 </li></ul></ul>
  • 25. Facebook の API 群 (1) <ul><li>Graph API (RESTful API) </li></ul><ul><ul><li>人やアクティビティをノード、それらのつながりをエッジとしたグラフに見立て、それにアクセスする </li></ul></ul><ul><ul><ul><li>user, group, photo, page, video, event, etc </li></ul></ul></ul><ul><ul><ul><li>https://graph.facebook.com/[NodeId ] </li></ul></ul></ul><ul><ul><li>あるノードにつながっている特定の関係をまとめて取得 </li></ul></ul><ul><ul><ul><li>https://graph.facebook.com/[NodeId]/[EdgeName ] </li></ul></ul></ul><ul><ul><ul><ul><li>自分の関係をとるときは NodeId = me </li></ul></ul></ul></ul><ul><ul><ul><li>home : ニュースフィード </li></ul></ul></ul><ul><ul><ul><li>feed : ウォール </li></ul></ul></ul><ul><ul><ul><li>likes : 自分が Facebook 内 で「いいね (Like) 」した記事 </li></ul></ul></ul><ul><ul><ul><ul><li>「 Facebook 外で Like ボタンを押したがコメントを残さなかったサイト」の一覧を取る手段は不明(たぶんまだない) </li></ul></ul></ul></ul>
  • 26. Facebook の API 群 (2) <ul><li>FQL (Facebook Query Language) </li></ul><ul><ul><li>https:// graph.facebook.com / fql /?q=[ エスケープ済み FQL ] </li></ul></ul><ul><ul><li>Facebook を1つの RDBMS に見立て、 SQL に似たクエリでデータを取得する </li></ul></ul><ul><ul><ul><li>読み取り (SELECT) だけ </li></ul></ul></ul><ul><ul><ul><li>ノード : テーブルとその各要素 </li></ul></ul></ul><ul><ul><ul><li>エッジ:テーブル同士の結合 </li></ul></ul></ul><ul><ul><li>例: SELECT name FROM user WHERE uid = me() </li></ul></ul><ul><ul><li>あくまで、ソーシャルグラフを RDB に「見立て」ているだけ </li></ul></ul><ul><ul><ul><li>実際にそのように保管されているわけではない </li></ul></ul></ul><ul><ul><ul><li>WHERE 句の条件には インデックスされたカラム しか使えない </li></ul></ul></ul>
  • 27. OAuth 認証まとめ Twitter Facebook 認証方式 OAuth1.0 OAuth2.0 認証フロー <ul><li>RequestToken 獲得 </li></ul><ul><li>ユーザの許可を得る </li></ul><ul><li>AccessToken 獲得 </li></ul><ul><li>ユーザの許可を得る </li></ul><ul><li>AccessToken 獲得 </li></ul>プロトコル 今は https (昔は http だった) すべて https パーミッション アプリごとに設定 トークンごとに設定 API アクセスに 必要なもの 各 Token/Secret と パラメータから生成した シグネチャ AccessToken そのもの
  • 28. Twitter アプリを認証するにあたって注意! <ul><li>Read and Write の権限は許可確認ページに書かれている以上に大きい! </li></ul><ul><ul><li>「ツイートする」と一言で書いてあるが実際には </li></ul></ul><ul><ul><ul><li>特定記事のリツイートもできる </li></ul></ul></ul><ul><ul><ul><li>自分の過去のツイートの削除もできる </li></ul></ul></ul><ul><ul><ul><li>ダイレクトメッセージも送れる </li></ul></ul></ul><ul><ul><ul><ul><li>DM の場合はソースが明示されない </li></ul></ul></ul></ul><ul><ul><li>「フォローする」と一言で書いてあるが実際には </li></ul></ul><ul><ul><ul><li>アプリ管理者以外もフォローさせられる </li></ul></ul></ul><ul><ul><ul><li>アンフォローもできる </li></ul></ul></ul><ul><ul><ul><li>ブロック、スパム報告もできる </li></ul></ul></ul>
  • 29. Facebook アプリの認証を作るにあたって注意! <ul><li>Facebook のパーミッションは多岐に渡る </li></ul><ul><ul><li>以下のパーミッションは重要 </li></ul></ul><ul><ul><ul><li>offline_access … オフライン時にもデータにアクセスできる </li></ul></ul></ul><ul><ul><ul><li>publish_stream … 各種投稿行為ができる(オフライン時でも) </li></ul></ul></ul><ul><ul><li>パーミッションは「必要最低限」に </li></ul></ul><ul><ul><ul><li>パーミッション=個人情報漏洩・撹乱のリスク </li></ul></ul></ul><ul><ul><ul><li>少なければ内容を精査しやすいが、多いと反射的に「不許可」 </li></ul></ul></ul><ul><ul><ul><li>実際スパムアプリは横行している </li></ul></ul></ul>
  • 30. アプリの許可をとりやめたい (Facebook)
  • 31. アプリの許可をとりやめたい (Twitter)
  • 32. <ul><li>Copyright © 2006-2012 </li></ul><ul><li>Preferred Infrastructure All Right Reserved. </li></ul>

×