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來發送請求。可以只發送給某一個好友,也可以發送給多個好友。

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