Canvas Tutorial

1. Create App

要创建一个App,首先要进入App开发页面,然后Create New App。在创建新的App之前,必须保证自己是通过了FB开发者验证的(验证的方法有2种,一种是手机号,一种是信用卡)。

2. Configure your App

通过提供一个包含了由HTML,JS和CSS组成的App的Canvas URL来填充Canvas Page。当用户请求获取该Canvas Page的时候,FB就会将该Canvas URL伴随着一个iframe一起返回到该页面。这样的话,开发人员开发的App就会按照FB的统一框架格式显示出来。

举个例子,假如你有一个应用放在http://www.example.com/canvas,那么这个就是你的Canvas URL。当你在FB上构建你的App的时候,你必须在App Namespace这个部分指定一个Canvas Page name,这个名字会被添加到https://apps.facebook.com/后面,加入你指定的名字为test,那么当你输入https://apps.facebook.com/test的时候,FB就会加载放在http://www.example.com/canvas的内容。值得注意的是,不能通过http://www.example.com/canvas转到另外一个URL,只能直接给出响应。

一旦你创建好了自己的App,你就可以通过选择App on Facebook部分来制定一个Canvas和Secure Canvas URL。

因为App是在FB的上下文中加载的,所以在设计ui的时候,比如注意到尺寸的限制。开发人员可以在Dev App下面的Advanced Tab来修改iframe的尺寸。你可以将宽度设置为Fixed 760px,这也是默认的设置,还可以设置为Fluid,意思就是如果iframe的宽度为100%,这样的话,页面就会挨着最左边排列,如果用户改变浏览器的宽度,页面就跟着改变。高度同理。

3. Configure for App Center

一旦你配置好了Canvas,就可以开始App Center配置了。主要目的是定制App的具体的细节,比如描述,图标,截屏,还有其它一些相关的资料。

4. Authorization

为了创建一个personalized的用户体验,FB会将关于用户的一些信息发送到App去。这些信息通过一个包含了base64url编码的JSON对象的single signed_request参数被传递给Canvas URL。当一个用户首次使用app的时候,这个signed_request参数仅仅包含有限数量的用户数据: user, algorithm, issued_at。

user:一个JSON数组,包含了locale, country, age for the current user

algorithm:一个JSON字符串,包含了用于认证这个请求的机制

issued_at:一个JSON数字,包含了请求被认证的Unix时间戳

为了获取所有的用户信息,比如说FB ID,用户必须authorize该App才行。FB推荐使用OAuth Dialog来授权FB上面的应用。FB会将用户的浏览器跳转到那个Dialog页面,也就是如下的url

https://www.facebook.com/dialog/oauth?
     client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE
当然,YOUR_APP_ID和YOU_CANVAS_PAGE会被更改

默认情况下,用户会被要求授权该App获取公开的基本信息,或者FB默认的。如果你的App需要更多的信息,那么你就必须发起特别的请求。要实现这个,只需要在OAuth Dialog的请求里面加入一些由逗号隔开的参数。比如如下

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID
     &redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream
具体哪些参数是干什么的,在FB的Reference里面都能找到。一般来说,你要求获取的信息越多,用户就越加不会继续使用你的App。所以最好是仅仅请求获取那些必须需要的参数,否则会适得其反。如果用户点击的 是 "Don't Allow",那么你的App就没有被授权。OAuth Dialog就会跳转到redirect_url参数中指定的路径,并且伴随着如下的错误信息

http://YOUR_CANVAS_PAGE?error_reason=user_denied&
     error=access_denied&error_description=The+user+denied+your+request.
如果用户点击了Allow那么App就被授权成功了。接着OAuth Dialog就会将页面跳转到redirect_url参数中指定的页面。一旦授权 成功,那么signed_request参数就会包含如下的子请求:

user, algorithm, issued_at,  user_id, oauth_token, expires,总之,一旦用户对该App授权了,那么就可以使用用户的页面信息和好友信息了。


5. Social Channels

FB平台提供多种方式使得用户可以从App分享自己的使用情况。FB把这些方式叫做Social Channels,App可以直接发布到用户的News Feed,向其他用户发起请求,并且可以利用FB的automatic channels。

a. Feed

一旦用户登录FB帐号,News Feed就会迅速地显示出来,App可以使用Feed Dialog来进行post。

b. Requests

可以邀请好友使用App或者请求好友干一件什么事情,例如接收一个礼物,帮助完成某项任务。用户可以通过使用Request Dialog来发送请求。可以只发送给某一个好友,也可以发送给多个好友。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章