Coding 之路,不由分說 .Net,MVC,jQuery

7三月/121

使用 Facebook JavaScript SDK 來取得使用者 UID 或 AccessToken

Google PageRank查詢

前言

之前曾寫過【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】,其中有提到使用 Facebook JavaScript SDK 來取得 AccessToken 的方式,但是由於 Facebook 正式啟用 oAuth 2.0,因此有修改了一些東西,所以可能會有無法使用的一天,因此特別寫一篇新的教學,這次直接使用 Facebook JavaScript SDK 來取得 AccessToken,因此可以套用到任何程式語言的網頁,此外也順便提供取得使用者 UID 的語法,就可以方便實作出使用 Facebook 登入網站的系統囉!

實作

第一步是申請開發者帳號和申請 AppId,這邊就不多說了,可以參考我之前的文章

接下來一樣先掛載 Facebook JavaScript SDK 的 js 檔案。

再來準備我們的 HTML

第一個 div 是 facebook 規定一定要有的, id 是 fb-root,否則的話就會出現 JavaScript 錯誤。

然後準備一個按鈕和之後要顯示 UID 和 AccessToken 的元素。

接下來先初始化 Facebook javaScript,而裡面的 {app_id} 就是第一步驟所申請的 AppID。

首先是出現登入 Facebook 取得授權的頁面,這邊我設定是可以取得 EMail 的權限。

接下來就是取得 UID 和 AccessToken ,這邊我使用 FB.getLoginStatus 這一個方法,因為它所回傳的資料包含了我們所需要的 UID 和 AccessToken

本函數所回傳的資料,其中 status 是代表登入的狀態,總共包含三種:

  • connected
    代表目前為登入狀態,而且有允許授權得此應用程式
  • not_authorized
    代表目前為登入狀態,但是沒有允許授權得此應用程式
  • unknown
    代表使用者沒有登入,無法得知是否有授權

執行之後就可以取得我們要的資料囉!

線上範例網站

結論

我們取得 UID 和 AccessToken 可以幹嘛呢?

如果是 UID 的話,因為每一個 Facebook 帳號都只會對應到一個專屬的 UID,因此我們取得之後就可以把它記錄在資料庫,當做我們系統使用者帳號的主鍵,這樣下一次登入之後取得 UID 一比對就可以知道是哪位使用者了,就可以讓使用者以 Facebook 帳號當做登入的帳號囉!

而 AccessToken 的話就可以透過此 Token 來呼叫 Facebook 的 API ,比如說發佈訊息等等。再配合【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】所提過的 offline_access 權限,可以把它存在資料庫,之後系統就有很多發揮的空間囉!

參考資料

FB.getAuthResponse

FB.getLoginStatus

Updated JavaScript SDK and OAuth 2.0 Roadmap

回覆 (1) 引用 (0)
  1. 非常感谢您的文章,facebook API翻烂了都,却没有了解关键的用法。谢谢!写的很到位!

    黯雲回應:
    感謝您喜歡本文。


Leave a comment

目前沒有人引用這篇文章。

王先生