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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,973
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

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