2009年9月3日 星期四

Facebook Flash Application開發心得(4) – Iframe的架構下取得Session


相對於FB Connect在取得Facebook登入Session值的複雜度,Iframe架構下的Application在這方面反而方便許多。
前一篇已經有說到Flash api裡的FacebookSessionUtil在FB Connect的情況下會有bug,但是在iframe之下卻可以運作得非常順利。其中很大的原因,是因為iframe的架構原本就是附屬在Facebook裡的,登入的狀況都由Facebook先處理掉了,Facebook才會開始載入iframe,也就是說user很少會在還沒登入的狀況之下就接觸到你的iframe application,因此我們可以少掉一部份處理尚未登入的情況,但如果user真的有辦法在未登入的情況下進入我們的iframe application(會有,在某些情況下會發生),我們只要直接把頁面導回給Facebook處理就好,等登入後Facebook會自動再幫我們導回來(很方便吧!)。這個利用Facebook來做導向的機制也會發生在user第一次進入應用程式的時候的那個授權頁。
另一個很重要的原因,正由於iframe架構是由Facebook所載入的,因此Facebook「很貼心」的順便帶了一些十分有用的資訊放在url後面的變數裡給iframe,這一大堆的資訊裡面就包括了Session值。

既然知道了這很重要的兩點,就來實作吧。
首先當然是針對javascript下手。

依照剛剛所說的兩個重點,一開始先要取得的就是Facebook帶給iframe的所有必要參數。

上面這段code最重要的部份就在於取得所有網址列後面的變數並放在flashVars裡。
另一個重點就是fb_sig_added變數的取得,它代表了user是否已經授權使用你的application,如果是0(尚未登入的情況下好像也會是0),我們就把整個頁面導向到http://www.facebook.com/login.php?api_key=" + api_key + "&next=index.htm&v=1.0&canvas=1的這個網址,網址列後面的參數api_key就是你的api_key,next指的是授權後要再導回來的頁面,我習慣是再導回index.htm。(有興趣的人可以觀察一下,事實上Facebook如果是在你已經登入的情況但沒授權的時候是會導到另外一頁的,不過next也會跟著被帶過去,所以我們只要直接全交給login.php去處理就好)
當一切都就續時,我最後呼叫一個initFB的function,這個function裡我就開始初始化facebook javascript api。

初始化Facebook javascript api的部份,跟FB Connect不一樣,我這次採用FB_RequireFeatures來做為初始化的點,因為我很確定user已經是登入狀態,所以一開始就初始化所有該用到的東西。
而且如果我沒記錯的話(說真的印象有點久遠了),使用FB_RequireFeatures的話,Facebook會強制在你的appilication外層加上它的外框(上面的header及下面的footer),所以如果你是直接輸入你application實際的網址的話,遇到FB_RequireFeatures時還是會Facebook框起來。
因此之後有時候,我們將會遇到iframe及FB Connect同時應用在一個application的情況中,也就是說即使在iframe的情況之下,有時還是要用到FB Connect,這也是我先介紹FB Connect的原因之一。(如果我以後還會繼續寫下去的話)
至於FB_RequireFeatures裡所帶的一些值的意義,可以去官方的wiki上看,基本上我也沒有實際的去比較這幾個之間差多少,所以我就乾脆直接初始化三種我覺得可能會用到的。
通常這個function這樣應該就ok了,不需要改寫,直接拿去用就好。
等到一切都就緒後,就呼叫initFlash這個function來載入flash,這function我就不寫出來了,反正就是用swfObject載入就是了 (記得要將flashVars帶進去)

接下來就是Flash裡的code了。
既然已經說了FacebookSessionUtil在iframe裡很好用,就直接大方的用了吧。

基本上,user算是通過層層關卡才會到達flash這一層的驗證:Facebook本身一層,javascript有兩層驗證,第四層才會是FacebookSessionUtil,所以基本上在上面的code裡使用FacebookSessionUtil.login()是用於開發時直接在本機端跑的情況下,否則應該都是直接verifySession就可以取得登入uid了。
ps:如果是在開發的時候,api secret值需要寫入,否則無法登入,這就是Facebook建議我們不要把api secret值寫死在code裡的原因,因為一但被取得,其它cracker就可以利用本機端寫程式來破壞你的application,所以記得上線時要把api secret值從code裡拿掉,FacebookSessionUtil自動會從loadInfo裡所有的flashVars取得它該使用的secret值。

15 則留言:

  1. 這篇文章真的救了我一命~~~~~
    已經成功了
    感謝m(_ _)m

    回覆刪除
  2. 原來傑森大大有部落格了~科科~~~

    回覆刪除
  3. 大大你好, 可以加個msn嗎?
    我目前也在研究這個 facebook 的 api , 我們公司有案子要跟facebook 結合...

    我的msn : noroi0625@msn.com

    回覆刪除
  4. @葉龜... 你怎麼會爬到這裡來..
    @noroi, 不好意思喔, 如果有問題就先在這邊問或去facebook加我吧~ (Jason Tseng), 我的msn聯絡人太多了, 不太方便再加了, sorry~

    回覆刪除
  5. Jason 大大:
    呵呵!!不好意思還是我!請問一下
    我有將API的KEY和SEC的KEY都填入.CTRL eNTER的時候會連到FACEBOOK的頁面.如果沒輸入帳號就會跳入登入頁!登入之後會有錯誤的訊息,[flashAPTest is under construction. Please try again later.]
    然後下面還有一段要我去 application settings editor設訂Canvas.
    於是我就到Canvas的選項設定
    Canvas Page URL:http://apps.facebook.com/flashaptest
    但設定好之後還是有問題!通常再按回flash,flash就會跳出錯誤然後關閉.
    是因為我沒有把檔案上傳嗎?要上傳到那邊??
    像FB Connect是把東西傳到自己的server或空間!
    但如果是iframe的話是不是要把東西上傳到facebook上還是那裡??
    不好意思~我一頭霧水阿~~好混亂~~再麻煩Jason大大跟我說!
    謝謝~^^~

    Nash

    回覆刪除
  6. Jason 大大:
    我有找到Canvas 設定的方法了~~^^~謝謝
    1.不過為什麼flash在 ctrl enter後就會出現"偵錯工具"按否之後就整個關閉!
    2.我輸入api_KEY和secr_key在flash中!會先彈出視窗!
    輸入帳號密碼後再按回flash就會出現問題1的問題!也沒有trace出東西....
    請問是為什麼~^^~
    Nash

    回覆刪除
  7. 謝啦
    沒錢補習只好自己看
    你這4篇很有用

    回覆刪除
  8. Nash:
    通常用FacebookSessionUtil在本機上開發時, 一定會開一個視窗出來, 這是正常的.
    但是至於跳出"偵錯工具", 我不知道你的偵錯工具是什麼...我猜這是你電腦上安裝的某個東西吧(好像VS這種的都有)? 不知道為什麼可能它把你的flash給弄掉了. 試著關掉看看.

    回覆刪除
  9. Jason 大大:
    不好意思的一直麻煩你~呵呵~^^~(感謝這幾天你的幫忙)
    沒錯跳出來的是VS的!我再想辦法關掉!
    想要在本機測試一直沒有成功.....試了三天!Orz..
    Jason大大再救救我吧....
    再本機測試時:
    var _apiKey:String="xxxxxxxxxxx"
    var _secretKey:String = "xxxxxxx";
    _sessionUtil = new FacebookSessionUtil(_apiKey, _secretKey, this.loaderInfo);
    [ctrl+enter]
    如果沒有登入會跳出登入畫面
    登入後FB的畫面會顯示:你現在可以關閉此視窗並返回應用程式。
    關掉後回來看flash的視窗沒有trace出東西!
    uid也沒有trace到
    只有一開始的連線有出現在輸出視窗http://api.facebook.com/restserver.php?v=1.0&api_key........(後面帶api的key..)
    請問是不是我有那個步驟忽略了?
    還是說有地方要設定~
    再麻煩Jason大大幫我一下!!感恩!
    Nash

    回覆刪除
  10. Nash:
    在本機端開發時,在跳出來的登入頁登入後,flash裡面並不會被觸發任何東西, 所以你會感覺沒反應.
    所以等到登入後, 需要在flash裡在放一個按鈕(或timer), 去執行一次facebook.refreshSession(), 讓FacebookSessionUtil主動去跟facebook更新登入資訊. (記得要堅聽facebook的FacebookEvent.CONNECT事件)

    回覆刪除
  11. Jason大大:
    真的太太太感謝你了!!
    我已經成功的試出來了!
    感謝這幾天的有問必達~
    日後若有機會遇到一定要讓我請你吃頓飯~哈哈~
    再次謝謝妳囉~^^~
    Nash

    回覆刪除
  12. 一整個搞不懂
    A App註冊FB 的API Key 為a_apiKey
    網頁設定為 AAA.com

    B App 註冊 b_apiKey 網址設定為 BBB.com,
    在 AAA.com js裡面使用 a_apiKey 在SWF內使用 b_apiKey ..竟然可以正常run..

    回覆刪除
  13. oh 高深學問,好想學,but未夠斑,等待吧!

    回覆刪除
  14. Jason大哥:
    不知您有空,想與您當面請教有關facebook APP的開發事宜!

    請益者:edwarde688@gmail.com

    回覆刪除