くらラボ研究記録

ID関連などのエンジニア的な技術記録を残していきます。

OAuth 2.0って知ってますかぁ?その2

おはようです、好きな調味料はマヨネーズのくらです。

前回の OAuth 2.0って知ってますかぁ?ではOAuth 2.0のサーバ側のアプリ用のプロトコルであるAuthorization Code Flowをお話しました。今回はその2ということで、エンドユーザさんのブラウザ側で実行されるアプリのタイプである「Implicit Flow」についてまとめますよ〜♪

Implicit Flowとは

f:id:kura_lab:20120308233028p:plain

Implicit FlowとはOAuth 2.0プロトコルのひとつなんです。サーバサイドで利用されるAuthorization Code Flowとちがって、Javascriptなどのスクリプト言語によってブラウザ上で実行されるアプリのフローになります。では、さっそくこの「Implicit Flow」について理解していきましょー!

1. やっぱりすぐにはAPIにアクセスできませんッ

また具体例としてFacebookのウォールに投稿するアプリでお話していきます。

はじめてこのアプリを利用としましょう。ウォールに書き込むためのAPIをつかおうとすると、ブラウザ上のJavascriptからFacebook側の認可サーバ(Authorization Server)にリクエストがおくられます。APIをつかうためにはやっぱり合鍵となるアクセストークン(Access Token)が必要なんですね。Implicit Flowでもすぐにはアクセストークンはもらえず、ユーザさんの認可をもとめられますッ

f:id:kura_lab:20120308235804p:plain

2. ログイン&同意はお約束ごとッ

FacebookTwitter連携のアプリにはお決まりになっているログインと同意をします。この認可の手順はOAuthのプロトコルではお約束なのでスキップはできないんですよ。同意をすると認可サーバからアクセストークンがもらえます…!?なんとImplicit FlowではAuthorization Code Flowにあった正しいサイトを確かめるための認可コードのやりとりがないんです!Implicitは「暗黙の」という意味のとおり同意のあと認可サーバはだまってアクセストークンをおくるんです。

フローが簡単になって便利だけど、認可コードによるサイトの確認をスキップしちゃっていいの?と思うかもしれません。でも大丈夫なんです。なぜなら、このフローはブラウザすなわちユーザさんと認可サーバで直接アクセストークンをやりとりするので、サイト側にアクセストークンをわたすことがないからなんです。きちんとブラウザ上のJavascriptなどのスクリプト言語で実行されるアプリであれば問題ないわけですねッ

f:id:kura_lab:20120308235829p:plain

3. トークンはブラウザ上で管理しますッ

おくられてきたアクセストークンはユーザさんの手元すなわちブラウザ上で管理することになります。必要に応じてJavascriptから保管してるアクセストークンをつかってAPIたたいて、ウォールに書き込みができるわけですッ

f:id:kura_lab:20120308235845p:plain

本日のまとめ

  • Implicit FlowはJavascriptなどのスクリプト言語によるブラウザ上のアプリのフロー
  • ユーザと認可サーバで直接アクセストークンのやりとりをするため、認可コードによるアプリ提供サイトの確認を省略
  • アクセストークンはブラウザ上(ユーザ側)で管理

アクセストークンをブラウザで管理する方法ですが、例えばいまだとHTML5のWeb Storageでローカルに保存しておく方法などが利用できるとおもいます。でも、ユーザさん自身で管理しないといけないため、他の人にトークンをわたさないよう注意が必要ですよ!

これでようやくOAuth 2.0の基本は理解できましたね。次回はトークンの置き換えによるお話をしたいとおもいます〜☆