Facebook Open Graph的登入授權方式

上一篇有說過，Open Graph的登入授權已經不像是以前Facebook Connect一樣。在Connect的時候，我們需要取得session_key以及動態的secret，而現在Open Graph則主要只需要一個key值，他們叫它access_token。
老實說我不知道這樣會不會比較安全，但是既然Facebook這樣做，我們靠它吃飯的也只好跟著做，不過至少，Open Graph取得access_token的方式可說是十分簡易呢，不用像Connect時代一樣傷透腦筋。

就像剛說的，要取得access_token很簡單。官方文件寫很多，但是歸納起來就是兩種方法而已，一個是透過網頁導向授權取得，另一種則是透過JS Api來取得。最常使用的當然是用JS Api，但是一定有某些因素Facebook才會提供導向式的方式取得授權，也許是某些application需要使用者一開始就是登入狀態，或是一些Desktop application無法使用JS Api… etc。




從網頁導向取得：
網頁導向的有兩種，一種是這for Web Application的：http://developers.facebook.com/docs/authentication/
往下拉去看「Authenticating Users in a Web Application」。
另外一種是for Desktop的：http://developers.facebook.com/docs/authentication/desktop
(還有for Mobile device的，但大同小異)

但是基本上我覺得第一種實在太麻煩了…。它要先導向到某頁面，然後Facebook會丟一個code給我們，我們再用這個code去跟Facebook的某頁面取得真正的access_token，步驟不少。
第二種比較直覺，直接把參數帶一帶，導過去，Facebook就會把access_token帶在網址後端回傳回來了。原本Facebook的文件裡說要傳一個type=user-agent的參數，結果我試了老半天怎麼試都不ok，最後才發現應該是type=user_agent才對，現在的文件終於寫對了。
第二種感覺雖然比較直覺，但是我發現在IE上跑會導不回來(我是用IE6測試的，不確定其它版本的IE是否也會這樣)，所以如果第二種方法遇到了IE6就死路一條，永遠得不到access_token…。(雖然我知道IE6早就是人神共憤了，可是偏偏客戶很愛啊…)

從JS Api取得：
Open Graph的JS Api處理登入的部份真的簡單到很可愛，基本上只要照前一篇文章的方法把JS的code放到html裡，然後處理一下是否登入的事件判斷：
<br /> <div id="fb-root"><br /> </div><br /> <script><br /> var api_id = “你申請的application id”;<br /> window.fbAsyncInit = function() {<br /> FB.init({appId: api_id, status: true, cookie: true, xfbml: true});<br /> FB.Event.subscribe('auth.sessionChange', function(response) {<br /> if (response.session) {<br /> //使用者登入，資料寫入cookies裡<br /> } else {<br /> //使用者登出，cookies被清掉 <br /> }<br /> });<br /> };<br /> (function() {<br /> var e = document.createElement('script'); e.async = true;<br /> e.src = document.location.protocol + '//connect.facebook.net/zh_TW/all.js';<br /> document.getElementById('fb-root').appendChild(e);<br /> }());<br /> </script><br />

在if(response.session)成立時，表示使用者進行登入的動作成功，這時我們就需要在這邊來拿取我們所要的access_token。
Open Graph會把一些資訊儲存在cookies裡，其中就包含了access_token。Open Graph是把資料存在名為”fbs_”+你的api_id的cookies裡，裡面會是一堆aaa=abcd&bbb=bcde的字串資料，access_token就埋在裡面，所以我們只要取出access_token=xxx就好。

取得了access_token之後，就可以直接使用這個access_token來跟Graph Api進行溝通。
但是我目前還不是很確定我們取得的這個access_token的「使用範圍」，這就是我對於access_token是否安全會有疑問的地方。假設我現在是用chrome來取得access_token，理論上這個access_token應該只能在同一個session的瀏覽器中才可以被使用(一般web的既定想法是這樣)，但是我卻可以使用這個access_token在Firefox上…。所以就是說，我可以先開一個視窗取得access_token之後，把這個access_token拿去別的地方使用也可以work。


嗯，對的，Flash裡也可以用。
所以這一點順便解決了Flash裡處理Open Graph認證的問題。