2010年5月17日 星期一

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裡,然後處理一下是否登入的事件判斷:


在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認證的問題。

14 則留言:

  1. 大大 我想請教一下 access_token似乎是在第一次申裝應用程式時才會回傳 有什麼方法是在我登入facebook後 每次都可以取得access_token 不好意思 我會這樣問的原因也是因為我在cookies裡面真的沒有”fbs_”+你的api_id

    回覆刪除
  2. 老王:
    你用的是JS的方法嗎?
    如果是用JS, 而且你已經登入facebook的狀況之下時, FB.Event.subscribe('auth.sessionChange')似乎不會被觸發.
    我想Graph的JS api應該還有其它的事件可以補足這一塊, 我還沒時間仔細研究.
    目前我是進入網頁時就先判斷cookies是否已經有access_token了, 如果沒有的話就讓user先進行登入的動作, 基本上測試了一下這樣做我是都有辦法在cookies裡得到access_token的.

    回覆刪除
  3. (雖然我知道IE6早就是人神共憤了,可是偏偏客戶很愛啊…)

    ——哈哈,言下之意,客户不是人。

    回覆刪除
  4. 請問怎麼用java取得cookiee的 access_token=”fbs_”+你的api_id呢,可否張貼一篇文章呢,我真的很急,卡在這邊取不到acces_token,謝謝。

    回覆刪除
  5. 你好,請問有遇過使用IE(7&8)讀 https://graph.facebook.com/me 連不進去的狀況嗎?

    回覆刪除
  6. rein,
    沒遇過這狀況, access_token有帶過去嗎?

    回覆刪除
  7. 如果是 Flash,又可以使用 Facebook Connect 嗎?

    回覆刪除
  8. 感謝你的回答,其實 我遇到的狀況是:直接在ie網址列https://graph.facebook.com/me/friends?access_token=xxx會跑出一個下載視窗→然後若從flash裡直接丟接值(有帶access_token)在ie會出現連不到的錯誤,但詭異的是 如果用JS Api取資料可以撈的到,我用ie使用你的app是沒問題的,想說是不是我哪個地方應該設定?另,感謝你的幾篇FB教學,獲益良多

    回覆刪除
  9. 匿名:
    現在都改用Graph了, Facebook Connect應該已經無法work了.

    rein:
    你可以試試看打開那個下載的檔案來看看,我猜是一些facebook回傳的JSON吧?我一直沒遇到過這個問題, 所以可能幫不上什麼忙, 不過可以觀察一下facebook回傳什麼東西回來, 搞不好有錯誤訊息在裡面.

    回覆刪除
  10. 您好~~
    想打听一个问题~~~~~~~


    我想用web appliaction获取access_token

    到到最后一步的请求
    也返回给我
    只不过是它把facebook直接输出到我当前页面了
    那我要怎样获取呢?
    其实我原意是想在servlet中获取access_token

    之前的js方式没有采纳是为了后面可能要做非动态页面的版本。

    谢谢!!!!^_^

    回覆刪除
  11. Gavin.H:
    "只不过是它把facebook直接输出到我当前页面了"<==感覺你是被導回facebook了? 那你可能要確認一下你帶過去的redirect_uri有沒有正確囉

    回覆刪除
  12. Gavin.H:
    我也遇到Gavin.H的那個情況,redirect_uri確定是對的沒錯,
    只不過我發現facebook並沒有把資料傳回到我指定的 redirect_uri,而是直接吐一個response出來。

    回覆刪除
  13. 我是新手的開發者
    想請問Jason大哥 你有使用過facebook 提供給 android 的sdk 來取得聯絡人資料(姓名、朋友、興趣、愛好....)嗎?
    我有試過下列的範例
    http://www.ibm.com/developerworks/cn/xml/x-androidfacebookapi/index.html
    但似乎抓取不到資料

    有沒有相關的教學黨可以參考
    麻煩了:(((

    facebook所提供的開發文件看不太懂耶

    回覆刪除
  14. 请问在擁有操控權限后,如何在对方的涂鸦墙发布信息呢?

    回覆刪除