Facebook Flash Application開發心得(2) - FB Connect - 接上Flash

使用FB.init初始化Facebook之後，除了要藉由javascript的api來應用Facebook的一些功能以外，其實最重要的就是要取得Facebook的登入session資訊。
由於Facebook的判別登入權限是由很多參數所記錄及驗證的，flash的api也需要這些參數來進行資料的傳遞，因此取得這些參數是很必要的。
這些參數裡有兩個值是最重要的，分別是session_key及secret，前者是此次使用者登入的session值，後者則是facebook動態產生的secret值，這個secret值跟Application設定時所看到的secret不太一樣，基本上Facebook官方建議我們不要將Application設定畫面上的secret值直接寫在程式裡，因為很容易被有心人破解取得，所以Facebook的javascript api在進行驗證時會自己從Server取得一組由Facebook動態產生的secret來使用，但是Flash api就辦不到，必需要將secret寫死在flash或是flashvars裡，這也就是要使用javascript api來進行登入動作的原因之一。
另一個使用javascript api的原因就是session的取得，雖然官方的flash api的文件裡建議我們使用com.facebook.utils.FacebookSessionUtil類別來統一處理session，文件裡說FacebookSessionUtil會自己判斷是該使用DesktopSession、JSSession或是WebSession，但是我發現FacebookSessionUtil是有bug的，即使在網頁上跑flash，它仍然會使用DesktopSession來做為session的處理類別，但是這麼一來一但當頁面被refresh時，flash將會失去session的相關處理能力，需要再次重新登入一次，對使用者來說這會變得非常的不友善。
雖然說FacebookSessionUtil有這種缺點，但是它在iframe架構的application裡卻可以運作正常且很好用，因此關於FacebookSessionUtil的部份就留到iframe的時候再講，目前為止在FB connect的部份我將會直接使用WebSession。

現在要將flash放入到FB connect的application裡，會延用到上一篇的東西，但稍作改寫，由於我假設我們是要開發全Flash的application，因此我也將登入Facebook的按鈕從html裡搬到flash裡。

整個主要程式的運作流程會是：
1. 載入swf。
2. Swf呼叫javascript進行FB.init。
3. Javascript去跟Facebook驗證使用者是否已經登入。
4. 若是已經登入，javascript取得必要的session_key及secret，並將這兩個值傳給swf。
5. Swf依照這兩個參數進行WebSession的初始化。

一、 HTML上javascript的改寫：
<br />< script type="text/javascript" src="Scripts/swfobject.js"> < /script><br />< script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"> < /script><br />< div id="flashContent"> < /div><br />< script type="text/javascript"><br />//Application Key<br />var api_key = "cdxxxxxxxxxxxxxxxxxxxxxxxxx";<br /><br />//將Application Key藉由FlashVars傳給flash<br />var flashVars = new Object();<br />flashVars.api_key = api_key;<br />swfobject.embedSWF("FBStep2.swf","flashContent","550","400","9.0.47","Scripts/expressInstall.swf",flashVars, {}, {id:"fbSwf",name:"fbSwf"});<br /><br />//當Flash被載入後flash會呼叫這個function進行FB.init的初始化<br />function initFB() {<br /> FB.init(api_key, "xd_receiver.htm", {"ifUserConnected":onConnected,"ifUserNotConnected":onNotConnected});<br />}<br /><br />//判斷當User登入後，取得secret及session_key並傳給Flash。<br />//由於WebSession好像無法直接取得登入者的uid，<br />//因此這邊我順便將uid也傳入給flash<br />function onConnected() {<br /> //alert("onConnected");<br /> var apiClient = new FB.ApiClient(api_key);<br /> document.getElementById("fbSwf").fbConnected(apiClient.get_session().uid, apiClient.get_session().secret, apiClient.get_session().session_key);<br />}<br /><br />//如果沒登入，暫時不做任何事情<br />function onNotConnected() {<br /> //alert("not connected");<br />}<br />< /script><br />
應該很直覺，不用再多做解釋。

二、 Flash裡的處理：
因為code不算多，直接全部po出來，加上註解。
<br />package {<br /> import flash.display.MovieClip;<br /> import flash.events.Event;<br /> import flash.events.MouseEvent;<br /> import flash.external.ExternalInterface;<br /> import com.facebook.Facebook;<br /> import com.facebook.session.WebSession;<br /> import com.facebook.events.FacebookEvent;<br /> <br /> public class FBStep2 extends MovieClip {<br /> private var _facebook:Facebook;<br /> private var _websession:WebSession;<br /> private var _uid:String;<br /> public var connect_mc:MovieClip; //這是登入鈕<br /> <br /> public function FBStep2():void {<br /> //呼叫javascript進行FB.ini，<br /> //並且註冊一個讓javascript callback的function<br /> ExternalInterface.call("initFB");<br /> ExternalInterface.addCallback("fbConnected", fbConnected);<br /> <br /> //給予登入鈕Click事件<br /> connect_mc.addEventListener(MouseEvent.CLICK, connectClickHandler);<br /> }<br /> <br /> //當登入後，會被javascript呼叫的function<br /> private function fbConnected(pUid:String, pSecret:String, pSessionKey:String):void {<br /> //隱藏登入鈕<br /> connect_mc.visible = false; <br /> <br /> _uid = pUid; //儲存uid<br /> //取得api_key<br /> var _apiKey:String = loaderInfo.parameters.api_key;<br /> //產生一個WebSession的instance<br /> //並且將api_key、secret及session_key帶入<br /> _websession = new WebSession(_apiKey, pSecret, pSessionKey);<br /> //監聽WebSession連線成功後的事件<br /> _websession.addEventListener(FacebookEvent.CONNECT, connectHandler);<br /> //產生一個Facebook instance並且指定使用的session<br /> _facebook = new Facebook();<br /> _facebook.startSession(_websession);<br /><br /> //與Facebook進行session的驗證<br /> _websession.verifySession();<br /> }<br /> <br /> //登入鈕按下之後，呼叫javascript跳出登入視窗<br /> private function connectClickHandler(e:MouseEvent):void {<br /> ExternalInterface.call("FB.Connect.requireSession",null,true);<br /> }<br /><br /> private function connectHandler(e:FacebookEvent):void {<br /> trace(e);<br /> if (e.success) {<br /> trace(“驗證成功”);<br /> }<br /> }<br /> }<br />}<br />

三、 其它解說：
在Flash裡，我捨棄了使用Flash api裡的login method，而決定呼叫javascript來處理的原因，是因為如果沒有將application secret傳出的話，facebook.login()不知為何一直無法正常運作，但是如果我把application secret寫入，那就又失去了安全性，因此我才又將登入動作交還給javascript處理。
FB.Connect.requireSession有兩個參數，第一個是登入後的callback function，由於我們已經實作了ifUserConnected，因此這個function可帶入null，第二個參數是決定是否要另開一個視窗當登入窗口，通常這個參數可以忽略，在純html的狀況之下呼叫FB.Connect.requireSession一定會另開，不過如果這個動作是由flash所觸發的話，預設值會是直接蓋在頁面上，可是flash的wmode沒有設成transparent的話flash反而會蓋在登入畫面之上，因此我特別將第二個參數設成true來強迫它另開一個視窗出來。
更正：經過實驗，似乎只有在IE才會跳出新視窗，FireFox裡好像不管怎樣都是跳lightbox...

這個程式的整個流程還沒有完全的完整，但是已經有考量到使用者是先登入再到這頁面或是來到這頁面才進行登入動作的兩種狀況，在一般自己的網頁上來處理應該是足夠了，但是還沒處理到使用者半途登出Facebook的情況，這一點可以事後再繼續補足，至少最麻煩的session取得已經解決。

接下來我也許會先介紹幾個從Facebook取得資料的類別，然後就可以再回過頭來介紹iframe的架構，其實iframe與FB connect最多最大的差別就只在於session的取得，其它的都大同小異。

下一篇
Facebook Flash Application開發心得(3) - 由Flash Api從Facebook取得資料