2010年6月30日 星期三

Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記


Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記

由於Facebook說他們要開始使用New Data Model的Deadline是六月三十號(連結在這http://developers.facebook.com/blog/post/392),因此一些之前已經寫好並且正在線上的iframe、connect app的使用者權限方式要做改變,否則將會發生要什麼資料就沒什麼資料的冏境。雖然說New Data Model仍然可以使用舊的Facebook Connect的permissionDialog來額外讓使用者同意New Data Model的一些新permission,但是我總覺得麻煩,而且希望畢其工於一役,要改就一次改,免得之後又來個什麼東東的deadline,就又要焦頭爛額的去改。

因此,原本還想觀望一下graph api的我(因為之前bug實在太多),就乾脆直接建立一個js及as3的graph api類別庫,js的部份一併處理並簡化登入的判斷及一些access_token的取得,以及跟flash之間溝通傳值的運作,as3的部份則是簡化api呼叫的方式並且將一些常用的呼叫分別寫成類別以方便使用。一方面希望能加速我們團隊未來開發OpenGraph的速度,另一方面由於我們之前已經為了Facebook Connect建立了一套類別庫,因此這次編寫OpenGraph的類別庫的方向就是盡量在類別名稱及method、properties的使用方式都跟前一套相同,就可以進行無痛轉移。
由於這套類別庫是團隊內部專案要使用,因此抱歉暫時無法分享出來(而且搞不好還有很多bug),我大概用這個類別庫寫了一個測試用app(方便自己測試及debug用),列舉一些常用到的命令,其實基本的核心就是graph api及FQL的搭配組合,flash裡可以選擇這個命令是要使用flash直接呼叫graph api或是透過js使用js sdk。
有興趣的可以去玩一玩參考一下,透過httpWatch看一下的話應該就可以清楚的知道哪些命令我是怎麼去跟facebook要資料的。
http://apps.facebook.com/jasonlab/


接下來記錄一下這之間遇到的問題及心得,希望遇到同樣問題的人可以得到一點幫助:
1. 原本Flash在IE裡透過https去要資料會造成IOError,這bug Facebook已經不知不覺把它修好了,可以放心使用。

2. 但是IE仍然有get的長度限制,可是偏偏graph api取得資料是用get在取得的(post是送出資料),因此有某些狀況下IE直接用graph api無法很正確的取得資料(例如一次查詢一百多個好友資料時,得送出一百多個uid),但是如果透過js sdk卻可以查詢成功,因此一但知道自己要送出大量資料量時,可以考慮透過js sdk。

3. 在使用者已經登入facebook且已經授權使用你的app時,一進入到你的app頁面,如果沒有先去執行FB.getLoginStatus的話,cookies裡是不會存有access_token的。

4. IE在iframe執行FB.getLoginStatus無效的bug也在不知不覺中被Facebook修好了,但是另一個問題就產生了,IE在iframe下即使跑完FB.getLoginStatus,cookies裡仍然沒有access_token。(第五點會講解法)

5. 官方文件裡告訴我們只要判斷FB.getLoginStatus裡的response.session是否有值就可視為是否已經登入,但是後來我好奇trace了一下,發現response.session裡藏了很多有用的東西,有uid、access_toke、session_key、secret等等…。後兩者可以讓舊的Facebook Connect的Flash使用,access_token及uid則是可以直接在這邊取得,不需要再去從cookies裡找,uid也不用再額外的跑一次graph api來取得。

6. 又是IE!!! 使用FB.ui跳出stream.publish dialog時,在某些電腦下的IE8會被擋掉,理由是偵測到cross-site script attack,目前這問題我還沒找到解法…。

7. 現在透過FB.ui來跳出對話框的時候,可以強迫指定跳出來的對話框是要像以前一樣,或是變成一個像登入視窗一樣的popup,這麼一來,flash也許就不一定要設成wmode=transparent了,但是聽說popup的大小控制好像有時不會很聽話,不過我測了一下,如果是stream.publish的話它都會自動調整大小,會出現大小有問題的狀況是我把邀請好友的介面塞到FB.ui裡會發生。

8. Graph api的一些資料裡的屬性名稱會跟FQL的名稱不一樣…(幹嘛不統一一下??) ,例如個人資料裡的姓別在graph api裡叫gender,在FQL裡叫做sex,偏偏很多資料也只能靠FQL才能取得或是只有Graph api才能取得,因此這部份交叉使用時要小心。

9. Graph api說要取得一個人的照片很簡單,只要http://graph.facebook.com/me/picture就可以取得,這是事實,但是如果是透過flash去讀取圖片然後又不小心要用BitmapData去draw它的話,會發生安全性錯誤(即使已經把loaderContext的checkPolicy給設成true也一樣) ,因為事實上這圖片的實際位置是在另一個地方的,因此我最後只好捨棄這個簡易的方式,仍然乖乖的去跟FQL要實際的圖檔位址。

10. Graph api裡理論上每個東西都有一個id,這id其實叫做object_id,但是真正的還有另一個id,例如每個相簿有自己的aid,這個aid跟object_id一定不一樣,跟FQL要資料時,FQL認的是aid不是object_id。


其它想到再補充…

19 則留言:

  1. 請問往這上傳圖片的詳細步驟

    我目前作到用js登入開上傳權限跟
    取得access_token

    但對往https://api.facebook.com/method/photos.upload
    post
    上傳圖片還是無頭緒 請前輩給予提示 感謝

    回覆刪除
  2. antonis:
    上傳的話要使用multi-form的方式送出,AS3的部份已經有些好心人寫好上傳檔案的類別,我也是直接使用他們的類別來處理上傳檔案的部份.如果你是要上傳本機的檔案,甚至直接使用FileReference就可以.
    你可以試試看google一下com.jooce.net.uploadFile
    或ru.inspirit.net.MultipartURLLoader
    這兩個都可以幫你做到從flash裡上傳bytearray出去的功能.

    回覆刪除
  3. 前輩抱歉 忘了說我沒有用flash
    我想要在c#或者單純使用js上傳圖片
    該怎樣作呢?
    我已經使用
    Facebook OpenGraph的js登入成功了

    回覆刪除
  4. antonis:
    js是無法直接上傳的喔
    你還是需要一個form來做上傳的動作. C#的話,你可以直接從server端傳東西給graph (但前提是你還是得把東西從client端丟到你的server端, 所以一樣要有一個form)

    回覆刪除
  5. ok 了解了 那我該查哪個 OpenGraph的api來上傳圖片呢?
    我有看到瀏覽器裡的cookies 有 access_token的值了
    另外還有
    expires
    secret
    session_key
    sig
    等值
    功能為何?
    哪些會在上傳圖片到相簿時用到呢?

    回覆刪除
  6. antionis:
    建議你有空多看在官方文件裡晃晃(雖然寫得不太好,但至少看了一遍心裡會有底,那些東西應該要call哪一個api)
    http://developers.facebook.com/docs/reference/api/
    看一下photo的部份.

    OpenGraph認證只認access_token,其它的那些值你可以不用去管. (硬要知道也是可以, 只不過可能要花很多時間去try, 像secret及session_key我直覺就是用在Connect上的, 但沒真的丟進去試過, 無法證實)

    回覆刪除
  7. 您好 請問
    post圖片到
    http://graph.facebook.com/PROFILE_ID/photos
    這路徑裡的PROFILE_ID是指哪種
    是用戶的uid嗎
    還是appId?

    回覆刪除
  8. antonis:
    文件裡有說明:
    You can publish an individual photo to a user profile with a POST to http://graph.facebook.com/PROFILE_ID/photos We automatically create an album for your application if it does not already exist. All photos from your application will be published to the same automatically created album.

    You can publish a photo to a specific, existing photo album with a POST to http://graph.facebook.com/ALBUM_ID/photos.

    說的是"a user profile", 所以是指人的id, 不是appId(而且app本身自己沒有相簿啊...)

    回覆刪除
  9. 老師你要不要開班授課啊..XD 我想學..

    回覆刪除
  10. 想請教一下版主,我可以在粉絲頁的FBML中加入Social plugins的Like Button?我加入comments可以看見東西,但要加入Like Button卻無法成功,想請教版主知道有解決的辦法嗎?還是說Like Button無法加入FBML 而是要開一個app來加入粉絲頁? 謝謝

    回覆刪除
  11. Jason大,我用as來發布訊息到塗鴉牆上是利用js的streamPublish() , 那請問我如果要邀請好友來玩我這個遊戲呢? 我應該call JS的那一個function? 麻煩老師了@@

    回覆刪除
  12. EricKuo,
    邀請朋友並沒有現成的function,但你可以參考我這一篇:http://blog.iamjason.com/2010/08/facebook-fbui.html

    回覆刪除
  13. Jason :

    不好意思,我試著用 FQL 抓出了圖片的路徑
    但是依然沒辦法 load.content

    Facebook.fqlQuery("SELECT uid, name, pic_big FROM user WHERE uid = me()", setbgURL);

    是我 Query 的地方錯誤嗎?

    >"< 卡兩天了

    回覆刪除
  14. 自己找到錯誤了,Loader 後面要加 checkPolicyFile
    orz

    ==

    Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");
    var context:LoaderContext = new LoaderContext();
    context.checkPolicyFile = true;
    context.applicationDomain = ApplicationDomain.currentDomain;

    bgLoader.load(bgRequest,context);

    回覆刪除
  15. Jason老師您好 :
    請問我重複FQLQuery同一個METHOD時,他有暫存的問題嗎?因為我有一個EVENT是要做 先FQLQuery User的相簿,之後去判斷他是否有相簿了,有的話就不建立相簿,沒有的話就建立,不過第一次點了沒有相簿當然就是建立相簿沒有錯,但是我第二次點的時候query出來的竟然跟第一次query的東西是一樣的,照道理說是應該query出來的result是有更新了,怎麼還是一樣? 是因為有cache的問題嗎? 還是同步與非同步的問題呢? 再麻煩老師解答了~

    回覆刪除
  16. Eric:
    我猜會不會是flash的cache?flash如果送出的URLRequest兩次的url是一樣的話,會有cache的問題.你試著額外送出一個亂數的變數看看.

    回覆刪除
  17. 謝謝Jason老師的解說,我try出來了,我用兩種方式 :

    (1)用兩組不同的SQL去騙,不過兩組的SQL目的都是一樣。例如加個 AND 1=1 之類的。

    (2)等久一點..,就是其實送出同一個QUREY確實有cache的問題,不過delay大概一分鐘吧,在送一次就會不一樣了,總之就是會有delay的問題。


    謝謝Jason~^^,我繼續研究~

    回覆刪除
  18. Jason 大大

    我再測試的時候

    使用
    AntFB.init(api_id , permission, "channel.html", ); // 不帶 _redirect

    在ie 上都會出現沒有使用權限的問題

    但其他瀏覽器都是正常的

    但是主要原因查完
    應該是http://forum.developers.facebook.net/viewtopic.php?pid=361577
    這個

    orz 看起來是ie上的問題;

    回覆刪除