教你構建多樣化的Facebook應用程序
使用Flash Platform,您可以構建豐富的用戶體驗。使用Facebook Platform,您可以構建豐富的社交體驗。將兩者結合使用,您可以構建出納入更具交互性、表現力和響應性應用程序社交功能的殺手級應用程序。
您可以構建與Facebook相整合的三種類型的Flash Platform應用程序:Facebook上的應用程序、外部Web應用程序和桌面應用程序。
Facebook上的應用程序是托管在您自己服務器上的Web應用程序,但是用戶可用從Facebook網站上進行訪問。用戶可以看到內部嵌入您的應用程序的Facebook chrome。您可以在Facebook上訪問應用程序(通常通過響應朋友的邀請或通過搜索應用程序時跟蹤一個鏈接),而且 Facebook 服務器代理向您的服務器發出的請求并檢索應用程序頁面(包括嵌入Flash Platform應用程序的 HTML 和 JavaScript),以在 Facebook 網站上顯示。
這可以為Facebook網站上的用戶提供無縫體驗;用戶從不離開Facebook網站。Flash Platform應用程序使用Adobe ActionScript 3 SDK for Facebook Platform(Facebook Graph API 的包裝)反復檢索和/或發送數據至Facebook。
外部Web應用程序同樣托管在您自己的服務器上,但是用戶通過您的 URL 而不是 Facebook 網絡進行訪問。您可以通過結合使用 Adobe ActionScript 3 SDK for Facebook Platform 和 Facebook JavaScript SDK 為應用程序添加單點登錄和注銷功能,將 Facebook 社交特性添加到應用程序。您可以將登錄和注銷按鈕添加到應用程序,而且當用戶登錄時,她在彈出窗口中適合位置看到 Facebook 登錄和/或應用程序授權對話框。
彈出窗口對于安全性是必要的,這樣用戶知道她正在登錄 Facebook。這種單點登錄 Facebook 功能可以簡化您的應用程序的登錄流程,使其可以訪問用戶的個人資料,從而讓您個性化網頁(通過顯示用戶的姓名、照片等)和用戶體驗(通過顯示朋友購買的產品、朋友評論或意見,向用戶的墻或朋友的新提要發布評論或意見等方式)。對于 Facebook.com 上的應用程序,Flash Platform 應用程序使用 Adobe ActionScript 3 SDK for Facebook Platform(Facebook Graph API 的包裝)反復檢索和/或發送數據至 Facebook。示例網站包括 Ben and Jerry's、RedBull Connect 和 City Search。
桌面應用程序與外部Web應用程序相似,但是您將 Flash Platform 應用程序作為一個 AIR 應用程序部署到桌面,而不是將其托管到一個web 服務器。與外部網站一樣,桌面應用程序使用 Adobe ActionScript 3 SDK for Facebook Platform 添加了 Facebook 中的登錄功能和社交功能。
Facebook.com 上的非 Flash Platform 應用程序
當用戶在Facebook上向一個應用程序發出請求時,Facebook 將一個 Facebook 網頁返回到包含一個 iFrame(您的應用程序被加載到該 iFrame)的 Facebook chrome(參見圖 1)。
注:這時,您可以在 Facebook.com 上創建 iFrame 或 FBML 應用程序。您應該僅創建 iFrame 應用程序,因為 Facebook 正在逐步淘汰使用 FBML 應用程序,并打算在 2010 年底停止創建這種應用程序。這種對應用程序創建流程的簡化是 Facebook 為了消除開發 Facebook.com 應用程序和非 Facebook.com 應用程序之間的差別所做出的部分努力。
圖 1. Facebook.com 上的應用程序的架構
中文注釋:
1.網頁請求;
2. HTML/JS 網頁;
3.網頁請求;
4. HTTP 請求 API;
5. JSON;
6.在 Facebook 網頁的 iFrame 中顯示的 HTML/JS 網頁;
7. JS 調用您的服務器;
8. HTTP 請求 API;
9. JSON;
10. JSON;
11. JS 調用 API;
12. JSON。
用戶在 Facebook 網站上向您的應用程序發出請求;瀏覽器向 Facebook 發出 HTTP 請求。
iFrame HTML 標記的 HTML/JavaScript (JS)網頁。
用戶的瀏覽器向您的服務器發出在 iFrame 中顯示網頁的請求。通常情況是一個應用程序服務器頁面(如,PHP、ColdFusion 或 JSP),但是也可能是一個 HTML 頁面。該頁面應該包含邏輯檢查,以查看用戶是否登錄了 Facebook。當用戶登錄 Facebook 時,會話數據被存儲到一個名為 fbs_applicationID 的 cookie 中,其中應用程序 ID 就是注冊到 Facebook Developer 應用程序時分配給應用程序的 ID。cookie 包含一個名為 access_token 的變量,您可以對其進行檢索,然后隨著向 Facebook Graph API 發出的所有后續調用進行傳遞。如果用戶沒有登錄 Facebook,如 cookie 無 access_token 屬性,應將瀏覽器重定向至合適的 Facebook 登錄頁面。
應用程序服務器頁面被執行,根據需求對數據庫或其他服務器進行任何調用,包括使用其 Graph API 對 Facebook 進行的調用。每個 API 都必須包含從會話 cookie 中檢索的訪問記號。
Facebook將請求的數據作為JSON格式化數據返回至您的服務器。
您的服務器將 HTML/JS 頁面返回至在 iFrame 中顯示的用戶瀏覽器。
當用戶與您的應用程序進行交互時,可能發生下面的情況:
如果您的應用程序包含新服務器端頁面鏈接,重復 3-6 步。
或者,如果您的應用程序包含對您的服務器的異步 JavaScript 調用。這種情況下,執行圖 1 中的步驟 7-10,其中唯一區別是 JSON 被返回至需由頁面的 JavaScript 處理的用戶瀏覽器。
另一種情況是您的頁面中的 JavaScript 代碼使用 Facebook JavaScript SDK 直接對 Facebook 服務器進行調用,而不必通過您的應用程序服務器(圖 1 中的步驟 11-12)。
注:您也可以將一個小 FBML 標記集放到您的應用程序中,與 JavaScript SDK 結合使用,JavaScript SDK 掃描 DOM 以獲取標記,然后向 Facebook 發送 API 請求。
Facebook.com 上的 Flash Platform 應用程序
我們已經了解了 Facebook.com 上非 Flash Platform 應用程序的基礎知識,現在讓我們看看如何將 Flash Platform 內容整合到您的應用程序中(參見圖 2)。
圖 2. Facebook.com 上的 Flash Platform 應用程序
1.網頁請求;
2. HTML/JS 網頁;
3.網頁請求;
4.在 Facebook 網頁的 iFrame 中顯示的 HTML/JS 網頁;
5. Flash Platform 應用程序請求(SWF);
6. SWF;
7. ActionScript 調用 API;
8. JSON;
9. ActionScript 調用您的應用程序服務器;
10. HTTP 請求 API;
11. JSON;
12. AMF(或 XML、JSON 或 SOAP)
用戶在 Facebook 網站上對您的應用程序發出請求;瀏覽器向 Facebook 服務器發出 HTTP 請求。
Facebook 服務器返回一個包含 Facebook 網站 chrome 和一個 iFrame HTML 標記的 HTML/JS 網頁。
用戶的瀏覽器向您的服務器發出在 iFrame 中顯示網頁的請求。向之前一樣,這是一個 HTML 頁面或應用程序服務器頁面,但是現在該頁面還嵌入了一個 SWF 文件,Flash Platform 應用程序。
您的服務器向用戶的瀏覽器返回一個在 iFrame 中顯示的 HTML/JS 頁面。該頁面必須包含邏輯檢查,以查看用戶是否登錄 Facebook,但是現在該檢查可以使用 Adobe ActionScript 3 SDK for Facebook Platform 在嵌入的 SWF 中完成。該應用程序包含可以檢查訪問記號是否存在的代碼。如果無訪問記號,您必須像以前一樣添加代碼,以將用戶重定向至 Facebook 登錄頁面。
用戶的瀏覽器向您的服務器發送另一個請求,這次是將 SWF 嵌入到 iFrame 中的 HTML 頁面。
您的服務器返回 SWF 文件。
當用戶與應用程序進行交互時,它使用 Adobe ActionScript 3 SDK for Facebook Platform 向 Facebook 發出異步調用。每個 API 調用必須包含訪問記號;這是由 SDK 自動處理的。
由于 Flash Player 的安全限制,SWF 文件僅可以對 SWF 文件被服務的服務器或具有一個列出 SWF 文件出處的跨域策略文件的服務器(也就是,您的服務器)進行數據調用。這意味著,為了使 SWF 文件可以直接向 Facebook 服務器發出調用請求,Facebook 服務器必須具有一個列出您服務器訪問中的 SWF 文件的跨域策略文件。如果您查看 Facebook 跨域策略文件,會看到一個通配符項,授權從所有服務器訪問 SWF 文件。
Facebook 將 JSON 數據返回應用程序。
當用戶與應用程序進行交互時,它也可以使用典型的遠程程序調用方法對您的服務器(以保存您的服務器上的任何數據或進行任何其他服務器端處理)進行異步調用。對于采用 Flex構建的 Flash Platform 應用程序,這包括 HTTP、web 服務和 Flash Remoting 請求。最快速和最小的調用是使用 Flash Remoting 而產生的,Flash Remoting 使用開放源二進制協議 Action Message Format (AMF)在服務器和 Flash Player 之間交換數據。
如果服務器出于任何原因需要與 Facebook 對話,它可以進行。
您的服務器端代碼處理來自 Facebook 的結果。
您的服務器將任何數據返回至用戶瀏覽器中您的 Flash Platform 應用程序。
外部 Flash 和 Facebook Platform web 應用程序
外部 Flash 和 Facebook Platform web 應用程序(參見圖 3)與 Facebook.com 上的web 應用程序非常相似。兩者的主要區別是如何處理用戶登錄和應用程序授權。不是簡單地將瀏覽器重定向至 Facebook 登錄和/或授權頁面,您可以結合使用 Facebook JavaScript SDK 和 Adobe ActionScript 3 SDK for Facebook Platform,以在彈出窗口中展示 Facebook 登錄和/或授權頁面。
盡管 Facebook 登錄是用 JavaScript 處理的,您通常無須寫任何 JavaScript 代碼;您僅調用 Adobe ActionScript 3 SDK for Facebook Platform 中的類方法即可。內部發生的事情是 ActionScript SDK 中的代碼調用包裝頁面中包含的 JavaScript 方法,包裝頁面反過來調用 Facebook JavaScript SDK 中的方法。Adobe ActionScript 3 SDK for Facebook Platform 包含一個名為FBJSBridge.js 的文件,該文件包含這些需要包含到您的應用程序的包裝頁面中的 JavaScript 方法。應用程序的包裝頁面必須包含該 JavaScript 文件以及 Facebook JavaScript SDK。
外部 Flash 和 Facebook Platform web 應用程序
1.網頁請求;
2. HTML/JS 網頁;
3. Flash Platform 應用程序請求(SWF);
4. SWF;
5. ActionScript 調用 API;
6. JSON
7. ActionScript 調用您的應用程序服務器;
8. HTTP 請求 API;
9. JSON;
10. AMF(或 XML、JSON 或 SOAP)
用戶在您的網站上向您的應用程序發出請求;瀏覽器向您的服務器發出 HTTP 請求。該請求可以是 HTML 頁面或者任何應用程序服務器頁面,但是下面的內容僅針對 HTML 頁面。
您的服務器返回一個嵌入您的 SWF 文件的 HTML/JS 頁面。該包裝頁面必須包含 Facebook JavaScript SDK 和 Adobe ActionScript 3 SDK for Facebook Platform 使用的 FBJSBridge。
用戶瀏覽器向您的服務器發出將 SWF 文件嵌入 HTML 頁面的請求。
您的服務器返回 SWF 文件。應用程序使用 Adobe ActionScript 3 SDK for Facebook Platform 代碼(使用 FBJSBridge 和 Facebook JavaScript SDK)檢查和查看該用戶和應用程序是否有一個當前訪問記號。如果沒有,它將在一個彈出瀏覽器窗口中呈現 Facebook 登錄和/或授權網頁。
當用戶與應用程序交互時,它使用 Adobe ActionScript 3 SDK for Facebook Platform 對 Facebook 進行異步調用。每個 API 都必須包含訪問記號(這是由 SDK 自動處理的)且 Facebook 服務器必須由一個列出您的服務器訪問中的 SWF 文件的跨域策略文件。
Facebook 將 JSON 格式化數據返回至您的應用程序,您的應用程序處理數據。
如果您希望保存您服務器上的任何數據或進行任何其他服務器端處理,您的 ActionScript 代碼可以使用典型的遠程程序調用方法對您的服務器進行調用(HTTP、web 服務和 Flash Remoting 請求)。
如果您的服務器出于任何原因需要與 Facebook 對話,它可以進行。
您的服務器端代碼處理來自 Facebook 的結果。
您的服務器將任何數據返回至用戶瀏覽器中您的 Flash Platform 應用程序。
Flash 和 Facebook Platform 桌面應用程序
最后,讓我們看一下 Flash 和 Facebook Platform 桌面應用程序的架構(參見圖 4)。桌面應用程序與外部 Flash 和 Facebook Platform web 應用程序非常相似,區別是用戶安裝應用程序后 SWF 文件保存在用戶的電腦上,而且 Adobe ActionScript 3 SDK for Facebook Platform 獨立處理登錄。為了將 Flash Platform 應用程序部署為桌面應用程序,您需要創建一個用戶可以安裝的 AIR 應用程序。
圖 4. Flash 和 Facebook Platform 桌面應用程序
1.安裝 AIR 運行時和您的 AIR 應用程序;
2. ActionScript 調用 API;
3. JSON;
4. ActionScript 調用您的應用程序服務器;
5. HTTP 請求 API;
6. JSON;
7. AMF(或 XML、JSON 或 SOAP)
用戶安裝并打開您的 AIR 桌面應用程序。應用程序使用 Adobe ActionScript 3 SDK for Facebook Platform 代碼檢查和查看該用戶和應用程序是否有一個當前訪問記號。如果沒有,它將在新操作系統窗口呈現 Facebook 登錄和/或授權網頁。
您的 SWF 文件中的 ActionScript 代碼使用 Adobe ActionScript 3 SDK for Facebook Platform 對 Facebook 直接進行異步調用。訪問記號自動隨每個 API 調用被傳遞。
Facebook 將 JSON 格式化數據返回至您的應用程序,您的應用程序處理數據。
如果您希望保存您的服務器上的任何數據或者進行任何其他服務器端處理,您的 ActionScript 代碼可以使用典型的遠程程序調用方法對您的服務器進行調用(HTTP、web 服務和 Flash Remoting 請求)。
如果您的服務器出于任何原因需要與 Facebook 對話,它可以進行。
您的服務器處理來自 Facebook 的結果。
您的服務器將任何數據返回至 Flash Platform 桌面應用程序。
后續工作
本文呈現了Facebook.com 上的非 Flash Platform 應用程序、Facebook.com 上的 Flash Platform 應用程序、外部 Flash 和 Facebook Platform web 應用程序,以及 Flash 和 Facebook Platform 桌面應用程序的架構圖和處理流程。