pfi seminar 2012/02/24

Twitter アプリ、Facebook アプリを作ろう！

株式会社プリファードインフラストラクチャー

今村祐一郎

2012 年 2 月 23 日

自己紹介（２度目なので軽く）

今村祐一郎 昨年１月入社 Web ザッピングサービス「 Xappy 」の開発・運営を担当

PFI では数少ない (?) 「サービスを直接手がけている」メンバー Rails とか Javascript とか Actionscript とか できます

2

SNS とアプリ連携

大手 SNS の持つ情報量は膨大で有益 ユーザの発言内容やその傾向 ユーザの行動 ユーザ同士のつながり

アプリ連携を行うことで、その情報に API でアクセスできる 許可モデルによっては API で新たに行動を起こすことも可能

発言、フォロー、お気に入り、 etc… 自サービスへのログイン手段の代替としても使える

API にアクセスするために OAuth という認証を経る

3

SNS 連携を扱う注意点

OAuth 認証（とくに Twitter の）は仕組みが複雑 各言語に用意されたライブラリを使わないとやってられない しかしライブラリにもバグが多かったりする

認証含め、 SNS 連携 API は仕様が目まぐるしく変わる 公式ドキュメントすら更新が現状に追いついてないことも 日本語のドキュメントはほとんど揃ってない このプレゼン資料の内容もいつ Deprecated になるやら…

同時に、開発側に立って初めてわかった、 SNS 連携を許可する際に注意すべきことについても説明する

4

OAuth 認証 (1)

セキュアな API 認証を提供するオープンプロトコル

SNS へのログインは通常、ユーザ名 /パスワードの対で行う 第三者にそれをまるごと渡すのはすごく危険 API を使ってサービスを提供したい側もそれは避けたい だけどその人の情報にはアクセスしたい… そこで OAuth 認証！

現在 OAuth2.0 が主流 Facebook -> 2.0 Twitter -> 1.0

5

OAuth 認証 (2)

ソーシャルメディア S 上のとあるアプリ A を想定 アプリベンダは、 A が S 上のアプリであることを示すトークンを

得る さらに、各ユーザ U について以下を示すトークンを得る

U が S 上のユーザである U が A を用いることに許可を出している

　これらのトークンを用いて、認証を行う

6

Consumer KeyConsumer Secret

Consumer KeyConsumer Secret

Access TokenAccess Token Secret

Access TokenAccess Token Secret

OAuth のいいところ

「ユーザ U がメディア S を介してアプリ A を使う」という事実１つにトークン１つが割り当てられる、ということ ユーザ名・パスワードの対がアプリ側に知られない トークンさえ無効化すればアプリはユーザに触れられなくなる

ユーザはちょっとの作業でトークンを無効化できる アプリ or トークンごとに個別のパーミッションが設定可能

7

アプリのパーミッション（許可） (1)

Twitter(OAuth 1.0) Read Only

ツイートを見れる フォロー関係を知れる

Read and Write (Read Only の上位互換 ) 新しく誰かをフォローする

– アンフォロー、ブロック、スパム報告まで可能 プロフィールを更新する ツイートする（ソースはそのアプリから）

– ダイレクトメッセージも送れる Read, Write and Direct Messages (R&W の上位互換 )

ダイレクトメッセージを見る パーミッションはアプリごとに設定される

8

アプリのパーミッション（許可） (2)

Facebook なんかもう、めいっぱい

Facebook 上でログインユーザがアクセス /更新できる個々の要素

について、パーミッションを要求できる http://developers.facebook.com/docs/reference/api/permissi

ons/

に一覧があります パーミッションはトークンごとに設定される

重要： offline_access, publish_stream Facebook ユーザがログアウトしている状態でも、ユーザの情報

にアクセスできる /投稿できる 正確にはトークンの有効時間が事実上無限になる ちなみに Twitter は常に offline_access 可能

9

Twitter で OAuth 認証を確立するまで（フロー）

1. デベロッパーサイトでアプリ登録 Consumer Key / Secret を得る

2. Request Token / Secret を獲得 ユーザに承認を求める画面を表示するために必要

3. ユーザからの承認を得る4. Access Token / Secret を獲得5. 完了！

10

Twitter の OAuth 認証 (1. アプリ登録 )

アプリ登録 一度きりで OK

1. https://dev.twitter.com/ に Twitter アカウントでログイン2. 右上のアカウント名から” My applications” -> “Create a new

application”

3. 適切な情報を入力し、 Agreement と CAPTCHA を通して登録 “WebSite” はツイート時のツイートソースの飛び先 “Callback URL” は空でよい

4. Consumer Key / Secret の対が表示されるのでメモ パーミッションは登録後にのみ変更可能

11

Twitter の OAuth 認証 (2.AccessToken を得るまで )

12

Twitter App User

ConsumerKey/Secret を使いRequestToken を要求

RequestToken/Secret を譲渡

RequestToken を用いアプリ許可用 URL を踏ませる

アプリ許可ページを見て、許可する

CallbackURL に Verifier が届く

ここまでの情報を用い、AccessToken/Secret を要求

AccessToken/Secret を譲渡

Twitter の OAuth 認証 (3. シグネチャ )

各トークンを獲得したり API アクセスを行う際にはシグネチャ

oauth_signature がパラメータとして必要 メッセージ文字列とキー文字列から SHA-1 アルゴリズムでハッシ

ュ値を得、 base64 したもの

メッセージ文字列は以下を & でつなげたもの 問い合わせのメソッド（ ex. “GET” ） 問い合わせ先 URL （ URIエスケープ済み） シグネチャ以外のパラメータを、そのキーについて昇順ソートし

、 & でつなげた上で URIエスケープしたもの キー文字列は各種 TokenSecret を URIエスケープして & でつな

げたもの

13

Twitter の OAuth 認証 (4.RequestToken獲得 1)

14

• oauth_consumer_key=DUMMYCONSUMERKEY1234• oauth_nonce=DUMMYNONCE4126 　　←問い合わせごとに変わるナンス• oauth_signature_method=HMAC-SHA1• oauth_timestamp=123456789 　　← UNIX 時間• oauth_version=1.0

• 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_tokenGET https://twitter.com/oauth/request_token

GET&https%3A%2F%2Ftwitter.com%2Foauth%2Frequest_token&oauth_consumer_key%3DDUMMYCONSUMERKEY1234%26oauth_nonce%3DDUMMYNONCE4126%26oauth_signature_method%3DHMAC-SHA1%26oauth_timestamp%3D123456789%26oauth_version%3D1.0

GET&https%3A%2F%2Ftwitter.com%2Foauth%2Frequest_token&oauth_consumer_key%3DDUMMYCONSUMERKEY1234%26oauth_nonce%3DDUMMYNONCE4126%26oauth_signature_method%3DHMAC-SHA1%26oauth_timestamp%3D123456789%26oauth_version%3D1.0

メッセージ文字列メッセージ文字列

DUMMYCONSUMERSECRET7890&DUMMYCONSUMERSECRET7890&

キー文字列キー文字列

末尾の & を忘れないよう気をつけて！SHA-1base64SHA-1base64

PQkSRLEI6vynteEmxMKx3WvnryA=

PQkSRLEI6vynteEmxMKx3WvnryA=

シグネチャシグネチャ

http ではなく https です、気をつけて！

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 が含まれた上でリダイレクトされる

15

oauth_token=DUMMYOAUTHTOKEN77777777&oauth_token_secret=DUMMYOAUTHTOKENSECRET12121212121212&oauth_callback_confirmed=true

Twitter の OAuth 認証 (6.AccessToken獲得 1)

16

• 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

• 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_tokenGET https://twitter.com/oauth/access_token

（省略）（省略）

メッセージ文字列メッセージ文字列

DUMMYCONSUMERSECRET7890&DUMMYOAUTHTOKENSECRET12121212121212

DUMMYCONSUMERSECRET7890&DUMMYOAUTHTOKENSECRET12121212121212

キー文字列キー文字列

SHA-1base64SHA-1base64

gyk/mXdgnE5KxT/NYCOZ4woihHo=gyk/mXdgnE5KxT/NYCOZ4woihHo=

シグネチャシグネチャConsumerSecret と OauthTokenSecret を& でつなげたもの

Twitter の OAuth 認証 (7.AccessToken獲得 2)

前頁で作ったシグネチャを oauth_signature というパラメータで追加し、リクエストを送ると、以下のような文字列が帰る

このトークン対を保管しておけば API を叩ける

17

oauth_token=11223344-DUMMYACCESSTOKEN&oauth_token_secret=DUMMYACCESSTOKENSECRET&user_id=11223344&screen_name=i_am_twitter_user

Twitter の OAuth 認証 (8.API を叩く )

18

• 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=私は学長です。　　←つぶやき内容

• 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 http://api.twitter.com/1/statuses/update.json

POST&... （以下省略）POST&... （以下省略）

メッセージ文字列メッセージ文字列

DUMMYCONSUMERSECRET7890&DUMMYACCESSTOKENSECRETDUMMYCONSUMERSECRET7890&DUMMYACCESSTOKENSECRET

キー文字列キー文字列

SHA-1base64SHA-1base64

rvP0LVu0ZyGyzLLM7DDeogMXRG4=

rvP0LVu0ZyGyzLLM7DDeogMXRG4=

シグネチャシグネチャConsumerSecret と AccessTokenSecret を& でつなげたもの

Twitter の API群

RESTfulAPI 適切なリソース URL 、メソッド、パラメータでリクエストする必

要あり リクエストの末尾につける拡張子によって、レスポンスを JSON,

XML, RSS, Atom から選べる StreamAPI

持続的な HTTP 接続により、情報を PUSH形式で獲得する 一部 API は一般公開されていない

19

Facebook の OAuth 認証フロー

Twitter のそれよりシンプル？ シグネチャを作らなくてよい RequestToken を取得する必要がない

20

Facebook App User

AppID とパーミッションを付与してアプリ許可ページを見せる

アプリ許可ページを見て、許可する

CallbackURL に Code が届く

Code と AppSecret を送信

AccessToken を譲渡

Facebook の Oauth 認証 (1. アプリ登録 )

アプリ登録 １度きりで OK 本人認証が必要（クレジットカードか携帯電話）

1. http://developers.facebook.com/ に Facebook アカウントでログイン

2. 上のバーから「アプリ」を選択3. 「 + 新しいアプリケーションを作成」4. 適切にアプリ名と名前空間を設定し、 CAPTCHA を通して登録5. AppID/AppSecret の対が表示されるのでメモ

21

Facebook の Oauth 認証 (2. アプリ登録 )

ユーザにアプリ許可ページを閲覧させる https://www.facebook.com/dialog/oauth?client_id=[AppId]&r

edirect_uri=[callback_url]&scope=[permissions

]

22

Facebook の Oauth 認証 (3.AccessToken の獲得 ) アプリ許可ページでユーザが許可すると、 redirect_uri に指定し

た URL にリダイレクトされる ?code=DUMMYCODE123456 といった感じで code パラメータ

がついてくる アプリ側から、この code と AppSecret をあわせて Facebook に問い合わせる

このリクエストはコールバックされないが、 redirect_uri はアプ

リ許可ページの redirect_uri と同一である必要がある レスポンスとしてアクセストークンが帰ってくる

23

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]

Facebook の OAuth 認証 (4.API を叩く )

先に獲得した access_token をパラメータに含める

24

https://graph.facebook.com/me/home?access_token=DUMMYACCESSTOKEN-12345678

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ボタンを押したがコメントを残さなかった

サイト」の一覧を取る手段は不明（たぶんまだない）

25

Facebook の API群 (2)

FQL (Facebook Query Language) https://graph.facebook.com/fql/?q=[エスケープ済み FQL] Facebook を１つの RDBMS に見立て、 SQL に似たクエリでデー

タを取得する 読み取り (SELECT) だけ ノード : テーブルとその各要素 エッジ：テーブル同士の結合

例： SELECT name FROM user WHERE uid = me()

あくまで、ソーシャルグラフを RDB に「見立て」ているだけ 実際にそのように保管されているわけではない WHERE句の条件にはインデックスされたカラムしか使えない

26

OAuth 認証まとめ

27

Twitter Facebook

認証方式 OAuth1.0 OAuth2.0

認証フロー1. RequestToken獲得2. ユーザの許可を得る3. AccessToken獲得

1. ユーザの許可を得る2. AccessToken獲得

プロトコル 今は https（昔は http だった） すべて https

パーミッション アプリごとに設定 トークンごとに設定

API アクセスに必要なもの

各 Token/Secret とパラメータから生成したシグネチャ

AccessToken そのもの

Twitter アプリを認証するにあたって注意！

Read and Write の権限は許可確認ページに書かれている以上に大きい！ 「ツイートする」と一言で書いてあるが実際には

特定記事のリツイートもできる 自分の過去のツイートの削除もできる ダイレクトメッセージも送れる

– DM の場合はソースが明示されない 「フォローする」と一言で書いてあるが実際には

アプリ管理者以外もフォローさせられる アンフォローもできる ブロック、スパム報告もできる

28

Facebook アプリの認証を作るにあたって注意！

Facebook のパーミッションは多岐に渡る 以下のパーミッションは重要

offline_access … オフライン時にもデータにアクセスできる publish_stream … 各種投稿行為ができる（オフライン時でも）

パーミッションは「必要最低限」に パーミッション＝個人情報漏洩・撹乱のリスク 少なければ内容を精査しやすいが、多いと反射的に「不許可」 実際スパムアプリは横行している

29

アプリの許可をとりやめたい (Facebook)

30

アプリの許可をとりやめたい (Twitter)

31

Copyright © 2006-2012

Preferred Infrastructure All Right Reserved.