原文網址:http://coding.anyun.idv.tw/2012/03/07/using-facebook-javascript-sdk-get-uid-or-accesstoken/

以下轉載原文

----------------------------------------------------------------------------------

前言

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

實作

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

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

1

再來準備我們的 HTML

1
2
3
4
5
6
7
8
9
10
<div id="fb-root">
</div>
<p>
    <input id="FBLogin" type="button" value="登入臉書" />
</p>
<p>
    <span id="uid"></span>
    <br>
    <span id="accessToken"></span>
</p>

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

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

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

1
2
3
4
5
6
FB.init({ appId: '{app_id}',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
});

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

1
2
3
4
5
$("#FBLogin").click(function () {
    FB.login(function (response) {
        // 登入之後執行的語法
    }, { scope: "email" });
});

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

1
2
3
4
5
6
7
8
9
10
11
12
FB.getLoginStatus(function (response) {
    if (response.status === 'connected') {  // 程式有連結到 Facebook 帳號
        var uid = response.authResponse.userID; // 取得 UID
        var accessToken = response.authResponse.accessToken; // 取得 accessToken
        $("#uid").html("UID:" + uid);
        $("#accessToken").html("accessToken:" + accessToken);
    } else if (response.status === 'not_authorized') {  // 帳號沒有連結到 Facebook 程式
        alert("請允許授權!");
    } else {    // 帳號沒有登入
        // 在本例子中,此段永遠不會進入...XD
    }
});

本函數所回傳的資料,其中 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

創作者介紹
創作者 yoonow 的頭像
yoonow

右腦 想去環遊世界

yoonow 發表在 痞客邦 留言(0) 人氣()