使用fb:swf所要注意的几点

参考地址: http://wiki.developers.facebook.com/index.php/Fb:swf

1. 当前fb:swf标签使用Flash版本为9.0.115

2. 参数”flashvars”必须小写。Facebook只认小写的”flashvars”,不认”flashVars”.

3. 目前Facebook使用fb:swf标签,它会把flash包装在一个div中,所以尽管embed/object标签不是block-level(关于block_level,请点击这里), 但如果连续的使用<fb:swf>标签,后来的flash内容会盖在前一个的上面。(官方的wiki是这样描述,事实上本人做实验时,却发现它们是纵向排列的,不知道算bug,还是FB已经改了)

4. Facebook把allowScriptAccess设置为none阻止Flash访问外部的JavaScript。如果要引用外部的js,需使用flash的localconnection和fb:fbjs-bridge标签。

5.通过以下步骤验证flash是不是由Facebook页面加载,

a. 通过Application.application.parameters获取所有以fb-sig为前缀的参数(不包括fb-sig本身)

b. 去掉fb-sig前缀

c. 将先前去掉前缀的参数组成param1=value1param2=value2param3=value形式的字符串,以参数名称排序(而不是参数的值),注意不要添加“&”符号。

d. 分别将c中得到字符串和fb-sig参数传给存储了app secret key的app server

e. 在app server端,将app secret key加在c中得到字符串后面,于是得到param1=value1param2=value2param3=valueappsecretkey

f. 使用MD5算法对e返回的字符串进行加密,返回MD5后的哈希值

g. 把f中得到的哈希值与fb_sig进行比较,相等说明flash是由Facebook页面加载的,不等说明是由非Facebook页面加载的。

例:

<fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;” swfsrc=’http://www.youtube.com/v/xxxxxxxxxx&#8217; imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg&#8217; width=’340′ height=’270′ />

注意: width和height最好别用百分数,否则会出现很奇怪的现象。如果fb:swf标签用在profile页面imgsrc属性是必须(虽然它有默认值,但估计你不会想用它),因为profile页面中的flash是不会自动播放,需要点击img后才播放。但在canvas页面中flash是自动播放,所以不需要imgsrc。

Advertisements

An external flash facebook website application(翻译)

参考地址:

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

图5展示了基于Facebook用户的外部flash站点的结构。与之前最大的不同是Facebook server不在代理任何浏览器的请求。开发者需在client端使用Facebook API或Facebook Connect处理用户登录。如果使用Facebook API登录,用户将被定向到Facebook站点,在Facebook登录后返回到app站点上。如果使用Facebook Connect,用户将不需要到Facebook站点上去登录。


图5,外部flash站点结构

1. 用户在app站点请求app;浏览器向app server发送HTTP request请求HTML页面或server page。

2. app server返回包含了swf文件引用的HTML/JS页面。如果使用Facebook Connect,HTML页面中会包含一些Facebook Connect初始化所需的JavaScript代码。

3. 用户请求swf文件

4. app server返回swf文件

5. AS代码向Facebook发出异步的请求,一次一个或一组请求。第一次请求需要从Facebook server的得到authorization token,在用户通过Facebook Connect登录之后, ActionScript 3.0 Lib会生成一个引用标识,以便在后来的对Facebook api引用中使用。更多信息参考前面讨论过的Flash iFrame application

6. Facebook server在app server请求时返回XML或JSON格式的数据, app处理数据。

7. 如果需要存储数据或与后台做其他交互,在AS代码中使用RPC(HTTP, web service或Flash Remoting requests)。速度最快并且代价也最小的方式是Flash Remoting requests, 它使用 Action Message Format (AMF)二进制格式在server和Flash之间传输数据。

8. 如果app server需要和Facebook继续交互,继续交互。

9. app server继续处理Facebook返回的数据。

10. app server向Flash内容返回数据。图5使用了Flash Remoting及AMF交换数据,还可使用web services及SOAP, HTTP services和text或XML。

flash fbml facebook application(翻译)

参考地址:

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview_05.html#swf_fbml

除了在iframe中嵌入Flash app外,我们还可以使用FBML的<fb:swf>标签将Flash包含在FBML app中。使用FBML app的好处就是我们更简单的构建app,只需要向Facebook server返回FBML(Facebook server会解析FBML标签). 坏处是用于显示和用于逻辑的代码会出现在很多地方,如swf文件,app server page中以及返回给Facebook server的FBML中,这样会使代码很凌乱不好维护。参考Comparing iFrame and FBML Flash Facebook applications 获取更多信息。


图 4. A Flash FBML Facebook application

1. 用户在Facebook上请求app; 浏览器向Facebook server发出请求。

2. Facebook server向app server发出请求, 请求一般由app server page处理(PHP,ColdFusion或JSP).Session信息会随着POST URL(与iframe的GET URL相反)发送给app server。

3. app server page引用数据库或其他需要的服务, 包括Facebook的REST API. 
和iframe一样server-side页面使用library引用Facebook API以及生成引用标识。因为是通过Facebook server代理,所以在返回用户浏览器之前,和iframe app的过程不同(先由iframe app向Facebook server发送请求,Facebook server返回给iframe app,再由iframe app返回给浏览器)FBML直接请求Facebook server,然后Facebook server直接返回到浏览器。
FBML中有很多组件,如fb:name可以取得用户姓名,fb:profilepic可以取得头像等等。我们可以在app server中直接返回这些FBML标签,Facebook server会将它们解析成HTML/JS返回给浏览器.但有时我们却不得不自己引用某个api,比如取得好友生日,因为没有有类似功能的FBML标签。

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

5. app server向Facebook server返回包含了HTML/JS和FBML标签的页面。

6. Facebook server返回解析之后的HTML/JS页面,其中包括了由<fb:swf>标签指定的swf的引用。

7. 浏览器再次发出请求,请求嵌入的swf文件。

8. app server返回swf文件。

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

1. 使用ActionScript 3.0 Library直接引用Facebook server API(9-10步)。

2. 如果想存储数据或其他与后台交互的工作,我们可以在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。

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。