mlab 研究日誌 – Facebook API 實作

 

 

mlab 在這幾年間實作了很多系統,有些是可以公開的,有些是不行的。這是其中一個給實驗室成員用的系統,用了Facebook API來做為登入驗證。這一篇以這個系統來介紹 Facebook API 的應用。

什麼是研究日誌?

其實就是日誌,但是主題很明顯的是關於研究,這個系統的用意是做為「記錄」而不是「討論」,特性如下:

  1. 日期記錄在伺服器端,日誌內容不能修改但是可以刪除。
  2. 每個人可以加入不同的專案群組。
  3. 利用列表模式可以條列顯示人名與時間,可以一眼看出來誰有寫日誌。

這個日誌研發的目的在於彌補 facebook 社團功能的不足。Facebook 社團雖然好用,但是要尋找自己之前做過什麼事,並沒有那麼好找。當專案很多的時候,如果一個專案就開一個社團,那麼加入一堆社團只會讓自己一團亂。

為了幫助每個專案負責人知道專案裡每個人的進度,這個系統應運而生。

流程是這樣:

3

我們用Facebook API來提供認證,必須先登入Facebook,然後透過FB ID到伺服器做驗證,資料庫中有這個ID使用者,就會認證通過。

畫面長的像這樣:

research

我們來看看Facebook的部份要怎麼實作。

建立一個新的Facebook App,先到 https://developers.facebook.com/apps,然後選擇建立一個新的應用程式,重點是要取得你的APP ID。

 

我們用的是Facebook Javascript API,Facebook給的範例程式碼如下(網址):

你必須在你的網頁目錄下放一個 channel.html檔,內容是

Facebook 的官方登入教學網址在這: https://developers.facebook.com/docs/howtos/login/getting-started/

有看不懂的地方可以去官方網站參考。再來是在你的網頁中設定FB.getLoginStatus()函數,

當使用者的狀態是connected,表示response的值為

這種格式是JSON格式,也就是說,我們可以用response.authResponse.userID來取得使用者的ID。

如果使用者沒有授權過這個應用程式怎麼辦呢?要用 FB.login()函數來做,所以在FB.getLoginStatus()的部份,己登入未授權或是沒登入的狀況,都可以呼叫FB.login()來處理。

這個login()函數的內部使用了FB.login()函數,會跳出一個Facebook登入的小視窗,要注意的是,這個小視窗會被chrome或其它的瀏覽器擋下來。

基本上這些也就夠了,我們要做的是修改FB.getLoginStatus()的部份

當判斷成功時,才去資料庫中讀取相關的資訊,看是要顯示哪一個專案的日誌內容。

再來是進入 facebook 的應用程式中心去做設定。

3

把 「Facebook上的App」勾起來,然後填入加密的網址。

第一次先在Facebook中搜尋這個應用程式,執行一次以後,就會出現在Facebook左邊的應用程式欄位中啦,以後直接點就可以用。

 

any questions?

 

 

 

 

6 comments

  1. 很受用的文章,獲益良多~~推!!!另有相關問題想請教版主~能否給我聯絡的email,感謝~~

  2. 請問開發 FB API 是不是一定需要HTTPS環境,有方法可以使用HTTP環境開發嗎? 謝謝

Leave a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *