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的所有必要參數。
< script type="text/javascript"><br /> var api_key = “XXXXXXXXXXXXXXXXX”; //api key<br /> //取得網址列後面的所有參數字串<br /> var queryString = window.location.search;<br /> queryString = queryString.substring(1);<br /> var fields = queryString.split('&');<br /> //fb_sig_added這個值很重要，它指出了user有沒有認證使用你的application<br /> var fb_sig_added = 0;<br /> <br /> //將所有網址後的參數都原封不動帶入flashVars<br /> var flashVars ={};<br /> for (var i = 0; i < fields.length; i++) { var index = fields[i].indexOf('='); var key = fields[i].substring(0, index); var value = fields[i].substring(index + 1); if (key.toLowerCase() == "fb_sig_added"){ fb_sig_added = value; } flashVars[key] = value; } flashVars.api_key = api_key; if (fb_sig_added == 0) { //如果還沒登入或還沒授權就導向 window.parent.location = "http://www.facebook.com/login.php?api_key=" + api_key + "&next=index.htm&v=1.0&canvas=1"; } else { //如果已經ok就進行facebook javascript api初始化 initFB(); } < /script><br />
上面這段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。
<br /> < script type="text/javascript"><br /> function initFB() {<br /> FB_RequireFeatures(["Api","XFBML","Connect"], function() {<br /> FB.Facebook.init(api_key, "xd_receiver.htm");<br /> FB.Facebook.apiClient.requireLogin(function(exception){ <br /> //facebook api初始化之後<br /> //產生一個FB.ApiClient實體(以後有些功能會需要它)<br /> apiClient = new FB.ApiClient(api_key);<br /> //呼叫一個function來載入swf<br /> initFlash();<br /> })<br /> })<br /> }<br /> < /script><br />
初始化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裡很好用，就直接大方的用了吧。
<br /> package {<br /> //需要import以下類別<br /> //因為我是用document class，所以多import了MovieClip<br /> import flash.display.MovieClip;<br /> import com.facebook.Facebook;<br /> import com.facebook.utils.FacebookSessionUtil;<br /> import com.facebook.events.FacebookEvent;<br /> <br /> public class FB_documentClass extends MovieClip {<br /> private var _sessionUtil:FacebookSessionUtil;<br /> private var _facebook:Facebook;<br /> public function FB_documentClass() {<br /> //取得api_key<br /> var _apiKey:String = this.loaderInfo.parameters.api_key;<br /> //初始化FacebookSessionUtil<br /> //基於api secret的值不曝光，因此第二個值帶null<br /> _sessionUtil = new FacebookSessionUtil(_apiKey, null, this.loaderInfo);<br /> //監聽FacebookSession跟Facebook之間連線的事件<br /> _sessionUtil.addEventListener(FacebookEvent.CONNECT, fbConnectHandler);<br /> //如果使用FacebookSessionUtil的話<br /> //Facebook物件實體是由FacebookSessionUtil給的<br /> _facebook = _sessionUtil.facebook;<br /> <br /> //如果fb_sig_session_key這個值有值的話<br /> //直接請FacebookSessionUtil跟Facebook取得連線就可<br /> if (this.loaderInfo.parameters.fb_sig_session_key) {<br /> _sessionUtil.verifySession();<br /> } else {<br /> _sessionUtil.login(true);<br /> }<br /> }<br /> <br /> //理論上都正常的話是連線成功的<br /> //使用FacebookSessionUtil的話可以直接取得uid<br /> private function fbConnectHandler(e:FacebookEvent):void {<br /> trace("uid = " + _facebook.uid);<br /> }<br /> }<br />
基本上，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值。