原文網址：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
<script src="http://connect.facebook.net/zh_TW/all.js"></script>

再來準備我們的 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

arrow
arrow
    全站熱搜

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

    E-mail轉寄