Flashから新規ウィンドウ開いてOAuth認証した場合のおおまかな流れ。目次はこちら。
ユーザーから見た場合の流れ
Flashやサーバーサイドがやってる、表に出ない裏側を割愛した、そのサイトを使うだけのユーザーから見た流れ。
- メインのFlash上に置かれた「twitterで認証する」ボタンをユーザーが押す (*1)
- 新規ウィンドウが開き、twitterのおなじみの認証画面が表示される
- ユーザーが「許可」ボタンを押す(*2)
- 新規ウィンドウが閉じてメインのFlashで続きが動く
*1 文言や形は勿論自由です
*2 今回のエントリでは「拒否」を押された場合は考えてません。
Flasherから見た場合の流れ
サーバーサイドは誰かがやってくれるよ!って場合の、Flasher視点の流れ。細かいサーバー側処理を割愛。
- メインのswf(以後、親swf)上に置かれた「twitterで認証する」ボタンをユーザーが押す
- OAuth認証用の処理を記述したPHP(*3)を新規ウィンドウ(以上、子ウィンドウ)で開く
- PHPの処理で子ウィンドウがtwitterのおなじみの認証画面に遷移する
- ユーザーが「許可」ボタンを押す
- 子ウィンドウがコールバック処理用のPHPに遷移する
- コールバック処理用PHPで表示したHTML内に、親swfに値を渡すためのswf(以後、子swf)を読み込む
- 親swfに渡したい値(OAuth認証により取得したAPIキーなど)をFlashVarsなどで子swfに渡す
- 子swfから親swfにLocalConnectionを張り、値を渡す(*4)
- 渡し終わったら子ウィンドウを閉じる
- 親swfで続きの処理を行う
*3 もちろん他言語でも可だが便宜上PHPと表現しておく
*4 Javascriptのwindow.opener経由で新規ウィンドウ―(Javascriptのwindow.opener経由)→親ウィンドウ―(ExternalInterface.addCallback経由)→メインswfでキーを渡すことも試みましたが、IEで、一度ウィンドウが他ドメインに飛んだ時点でwindow.openerがとれなくなっており、無理でした。そしてLocalConnectionで渡すことにしました。
もう少し詳しい流れ
サーバーのほうの流れも組み込んだ、一連の流れ。
OAuth関連処理でハッシュ値の生成とか固有じゃない部分(*5)を割愛。
とはいえ、PEARのOAuthライブラリとか使う場合は、ややこしい値の生成はもちろん、多くの流れが隠蔽されるので全然知らなくてもいい気もするのだけども。
事前準備
- twitterのアプリケーション登録をTwitterアプリケーションページ(http://twitter.com/oauth_clients)で登録する
- アプリケーションの種類で「ブラウザアプリケーション」を選ぶ
- ユーザーがtwitterの「許可」ボタンを押した後に戻ってくるアドレス(例えばhttp://ikekou.jp/oauth_callback.phpとか)を決めておく
- ただしここで入力するコールバックURLは実はあまり意味がない模様。認証処理時にも値としてコールバックURLを渡すが、そちらにしか意味がない気がする。
- 登録が完了すると取得できる
- Consumer key
- Consumer secret
を覚えておく。
認証処理
- メインのswf(以後、親swf)上に置かれた「twitterで認証する」ボタンをユーザーが押す。
- OAuth認証用の処理を記述したPHPを新規ウィンドウ(以上、子ウィンドウ)で開く
- 「http://twitter.com/oauth/request_token」にアクセス。
渡すもの
- Consumer key
- Consumer secret
- コールバックURL
- 他の色々(*5)
形式
http://twitter.com/oauth/request_token?oauth_callback=xxx&oauth_consumer_key=xxx&oauth_nonce=xxx&oauth_signature=xxx&oauth_signature_method=HMAC-SHA1&oauth_timestamp=xxx
- 戻ってくるデータ
oauth_token=xxx&oauth_token_secret=xxx&oauth_callback_confirmed=true
そこから
- oauth_token(とあるけど実体はRequest tokenかと)
- oauth_token_secret(とあるけど実体はRequest token secretかと)
を取得する。
- 「https://twitter.com/oauth/authorize」にアクセス。
渡すもの(は前のステップで取得したやつ)
- oauth_token
- oauth_token_secret
形式
https://twitter.com/oauth/authorize?oauth_token=xxx&oauth_token_secret=xxx
- 子ウィンドウがtwitterのおなじみの認証画面に遷移する
- ユーザーが許可ボタンを押す
- 子ウィンドウが「http://twitter.com/oauth/request_token」にアクセスした際に指定したコールバック処理用のPHPに遷移。
戻ってくるデータ
oauth_token=xxx&oauthVerifier=xxx
そこから
を取得する。
- 「http://twitter.com/oauth/access_token」にアクセス。
渡すもの
- oauth_consumer_key
- oauth_token
- oauth_verifier
- 他の色々(*5)
形式
http://twitter.com/oauth/access_token?oauth_consumer_key=aaaa&oauth_nonce=xxx&oauth_signature=xxx&oauth_signature_method=HMAC-SHA1&oauth_timestamp=xxx&oauth_token=xxx&oauth_verifier=xxx&oauth_version=1.0
-
戻ってくるデータ
oauth_token=xxx&oauth_token_secret=xxx&user_id=xxx&screen_name=xxx
分解してこちらを取得
- oauth_token(とついてるけどさきにでてきたものとは別で、Access tokenのことだと思う)
- oauth_token_secret(Access token secretとついているけどさきにでてきたものとは別で、Access token secretのことだと思う)
この二つを持っておけばAPIにアクセスできる、一番大事なキー。
悪用されるとまずいので、公開環境においたら基本的にダメだと思う。swfに書き込むのもデコンパイルされたら見れちゃうからダメ。
あとは「User ID」と「Screen name」もなにげに戻ってくる。
- 子ウィンドウ内に、親swfに値を渡すためのswf(以後、子swf)を読み込む
- 親swfに渡したい値(OAuth認証により取得したAPIキーなど)をFlashVarsなどで子swfに渡す
- 子swfから親swfにLocalConnectionを張り、値を渡す(*5)
- 渡し終わったら子ウィンドウを閉じる
- 親swfで続きの処理を行う
*5 他にも渡すパラメータがあるがConsumer keyのように固有のものではないし、すごくややこしいので割愛。
こういうやつ。
- OAuthのバージョン (oauth_version )
- タイムスタンプ ( oauth_timestamp )
- 当該アクセスに対して、一意性を表す文字列( oauth_nonce )
- 署名のプロトコル( oauth_signature_method )
- 署名( oauth_signature )
その部分を生成してくれるソースをひろってきて使うのがよい。詳しくはhttp://techno-st.net/2009/11/26/twitter-api-oauth-0.htmlなど参照
で、なにがこんなにわかりづらいのか?
考えてみたんだけど
- なんかステップ多いよね。
- 登場するキーや値も妙に多いよね。
- 管理画面でCallback URLを設定しなくても、認証時に渡せばOKとか、なんかいいかげんじゃない?(Twitterだけ?)
- http://twitter.com/oauth/request_tokenにアクセスして取得できるものはRequest tokenだと思うんだけど戻り値のキーはoauth_tokenだったりしてわかりづらい。
- http://twitter.com/oauth/access_tokenにアクセスして取得できるものはAccess tokenなんだけどやっぱり戻り値のキーはoauth_tokenでわかりづらい。しかもRequest tokenのときと名前は同じだけどモノは違うんだよね。
- アプリケーションの登録ができる画面がhttp://twitter.com/oauth_clientsとhttp://dev.twitter.com/appsの二つあるっぽいのだけど気のせい?
とかそうこらへんかなと。
とはいえ仕様なんで、なんとかできるもんではありませんが 笑
だいぶややこしいので間違ってる箇所があるかもしれません。あったらご指摘いただければと。
実際のソースあげれればいいなー