flash iframe facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_04.html#swf_iframe

之前我们已经介绍了一般的iFrame和FBML app的流程,现在我们来看下怎样将Flash整合到app中。虽然我们可以构建一个混合多语言(包括HTML/JavaScript/ActionScript)的app,但在本例中为了简单起见,我们会把精力集中在构建整站都是Flash内容的app上。混合的app可以同时引用server端API以及client端API(如JavaScript API,以及本篇稍后将讨论的ActionScript API)。

我们可以将app的swf并入到iFrame或FBML中。图3展示了iframe app更为简单直接的嵌入方式。

图3. 基于Flash的iframe app结构

1. 用户在facebook站点上访问app;浏览器向facebook server发送HTTP request。

2. Facebook server返回包含了Facebook chrome和iframe标签的HTML/JS页面。

3. 用户浏览器向app server请求iframe中的页面以显示,与之前请求的是server page不同,这次是包装了swf文件的HTML wrapper。注意session信息会和普通的iframe app一样都以GET URL的形式传送给app server,server 的html wrapper将这些信息解析后以flashVars形式传给swf。Swf中的AS代码就可以使用它们直接引用Facebook server的API。

4. app server向用户浏览器返回HTML/JS页面,并在iframe中显示。

5. 用户浏览器再次向app server发出请求,请求HTML页面中的swf文件。

6. app server返回swf文件。

当用户与app交互时,swf向Facebook server或app server发送异步请求。

1. swf中的AS代码直接引用Facebook server API(7,8步)。参考官方ActionScript API

2. 由于Flash player的安全限制,swf只能请求相同域或在crossdomain文件中规定了允许本域访问的域中的数据。当swf访问Facebook server时,Facebook server必须持有让swf所在域访问的crossdomain策略文件。参考Facebook cross-domain policy file,Facebook server允许所有的域访问

     <cross-domain-policy>
      <site-control permitted-cross-domain-policies="master-only"/>
      <allow-access-from domain="*"/>
     </cross-domain-policy>

3. 当swf访问Facebook server时,我们需要传递api key以及引用标识(与之前的iframe和FBML app一样)。但这次我们只要关心API key和secret key,ActionScript library会处理生成引用标识。

不要将API key和secret key硬编码在程序中,因为swf可以通过反编译软件被编译,这样API key和secret key就比较危险。我们可以在swf中做一个安全的请求去请求包含相关key值的文件,之后使用这些值生成引用标识然后去引用Facebook server。

引用标识包括引用Facebook 方法所需的参数,session的MD5哈希值,app的api key以及其他信息、

4.如果想存储数据或做其他后台交互的工作,我们可以在AS代码使用RPC调用app server(9,10步)。基于Flex构建的flash平台包含有 HTTP, web service以及Flash Remoting requests。最快并且代价最小的引用是Flash Remoting,它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。图中没显示的还包括app server可以直接引用Facebook server API。

IFrame Facebook Application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_02.html

(FACEBOOK APPLICATION是在基于Facebook Api运行的应用程序, 本文中简称为app)

当用户访问Facebook app时(比如http://apps.facebook.com/someapp),Facebook的server会针对app的类型(iFrame或FBML)对用户的请求做不同的处理。如果是iframe类型的app,Facebook server会返回一个Facebook的页面,页面的chrome(这里不是指谷歌的浏览器,chrome包括顶部的菜单,右边的广告栏,底部的状态栏和相关的快捷方式和中间的content部分)中的content就是加载了用户app的iframe。


图1.Iframe app的结构

1. 用户在facebook站点上访问app;浏览器向facebook server发送HTTP request。

2. Facebook server返回包含了Facebook chrome和其中的iFrame HTML标签的HTML/JavaScript (JS)页面。

3. 用户浏览器向app server发送请求以以显示iFrame中的内容,一般都是app的页面(如php,ColdFusion或JSP)。Session信息会被包含在GET URL中,app server就会知道是什么用户在从Facebook上发出了请求。

4. app相关的页面会引用数据库或其他需要的服务,包括引用Facebook的REST API。API调用必须包含包括app的api key和引用标识(signature)在内的验证信息,应用标识由发送的参数,当前用户的session key生成的MD5哈希值,app的secret key以及其他信息组成。一般来说,引用标识会在server端页面生成,之后该页面使用相关的library代码引用Facebook。目前Facebook官方支持的library有PHP5,JavaScript和ActionScript3.0, 其他的一些library都是由community开发完成。

5. Facebook server向app server返回XML或JSON格式的数据。

6. app server向用户浏览器返回HTML/JS页面,之后在IFrame中显示。

当用户与app交互时,会发生以下事情

1. 如果app有链接到新的页面,重复第3和第6步。

2. 或者app中包含有异步的JavaScript引用(ajax),那么第7和10步会执行,与 之前返回新的页面不同的是这次返回XML或JSON格式的数据,这些数据会由页面的JavaScript处理。

3. 还一种选择是在app页面中使用JavaScript直接引用Facebook server(第11和12步)。Facebook官方支持JavaScript Client API。你可以把一系列单个的API引用分组到一个向Facebook发出的HTTP request里。这种方法有好处也有坏处,它减少了向Facebook server发出的HTTP request总数,但它需要app将许多页面结合在一起,这样导致页面十分复杂。