網頁中加入「透過Facebook登入」功能

發表於 | 分類於 | 閱讀次數:
| 1,990

連結：facebook for developers

初始步驟

  1. 直接進到facebook for developers頁面後，右上角「我的應用程式」中選擇「新增應用程式」。
  2. 建立新的應用程式。替應用程式取個名稱，例如：「臉書登入測試」。並輸入聯絡子郵件。
  3. 新增產品。來到應用程式的管理頁面，選擇「Facebook 登入」右下角的「設定」。
  4. 選擇應用程式要使用的平台，在此我們當然選擇「網站」。

快速掛載Facebook JavaScript SDK

接下來會自動進入到臉書預設的快速入門帶你設定。

1. 輸入你的網站網址。

舉例：頁面在 https://www.example.com 下的test資料夾的index.html，我們只需要輸入　https://www.example.com/test　即可
備註：似乎只能使用在https網域下，不能使用在http網域下。

2. 設定 Facebook JavaScript SDK

我們可以依照開發人員介面的教學內容依序完成即可。
將此段內容貼到你 html 頁面上的 <body> 標籤後

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',//15碼數字字串不含大括號
      cookie     : true,
      xfbml      : true,
      version    : '3.1' //筆者目前是v3.1
    });
      
    FB.AppEvents.logPageView();   
      
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

  • ‘{your-app-id}’就是開發人員頁面上方的 「應用程式編號」
  • 注意：在官方教學中有提到：SDK 是以非同步方式載入。
    Facebook JavaScript SDK 沒有任何需要下載或安裝的獨立檔案，您只需要將一小段一般的 JavaScript 置入 HTML 中，就會以非同步的方式將 SDK 載入頁面中。非同步載入是指不會阻擋頁面中其他元素的載入。
    所以這說明了什麼呢？後續我們會提到。

到這邊其實已經完成掛載Facebook JavaScript SDK的工作了。

3. 檢查登入狀態（存取權杖）

載入您的網頁時，第一個步驟是確認用戶是否已經使用「Facebook 登入」來登入您的應用程式。
所以我們會使用一個方法：

1
2
3
FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

這是回傳的 response 內容（先不用急著貼到您的頁面上）

1
2
3
4
5
6
7
8
9
{
    status: 'connected',
    authResponse: {
        accessToken: '...',//權杖在這
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

在官方教學步驟中有詳細介紹每一個值代表的意義。
更多詳細介紹可見官方文件說明

接下來就非官方的步驟了，因為照做採了好多雷，也可能是因為經驗不足把它想得太簡單．．．

4. 隱私政策網址 ( 狀態： 調整中? )

在進入接下來的步驟之前，我們必須把應用程式設定為上線狀態。
在開發者頁面上方可以看見目前狀態為：調整中。點選調整中會出現：

你必須提供有效的隱私政策網址，才能夠將應用程式上架。請前往基本設定並確認網址有效。

我們前往設定 –> 基本資料 –> 隱私權政策網址

我們透過 privacypolicies.com 點選 Start creating your Privacy Policy，基本上裡面就是幫你產生一篇專屬於你的隱私權政策，並連結你的網域，最後會產出

  • 隱私權政策網址 <<–這就是我們要的
  • 和一大篇隱私權政策(html)

這裡也有一篇教學網址

把隱私權政策網址輸入後儲存變更就可以將狀態改為已上線
（請確保已上線才能繼續往下）

5. 登入/登出

在此我不使用官方提供的登入按鈕，畢竟大多時候我們可能需要客製化這些按鈕，所以這邊採用我們自己熟悉的方法來製作。

注意：登出會讓使用者真的登出她自己的Facebook、正常來說我們不會特別製作這個方法在真正的網站上，你也不會想莫名其妙被登出臉書吧。但在此我們還是會示範如何使用。

所以這邊呼應第三點提到的：我們只會判斷使用者是否已經使用「Facebook 登入」來登入您的應用程式。而非是否登入Facebook，兩者是有差異的。

1
2
<button onclick="login()">登入</button>
<button onclick="logout()">登出</button>

我們用最簡單的方法直接用<button>來呼叫登入和登出的方法，而呼叫登入和登出的方法為：

1
2
3
4
5
6
7
8
9
10
11
function login() {
  FB.login(function (response) {
    /*console.log(response);*/
  });
}

function logout() {
  FB.logout(function (response) {
    /*console.log(response)*/
  });
}

不過在這之前我們應該要先判斷使用者是否已經透過「Facebook 登入」來登入

6. 判斷是否已登入

再次強調這邊的已登入並非你的臉書是否已登入，而是「是否曾透過這應用程式」登入。
我們使用到第三點的：檢查登入狀態（存取權杖）

1
2
3
4
5
6
function checkLoginState() {
  FB.getLoginStatus(function (response) {
    console.log(response)
  });
}
checkLoginState()

直覺上我們可能會希望網頁一載入就判斷，但此時會出現：
Uncaught ReferenceError: FB is not defined
為什麼呢？在此呼應到了第二點所提到的非同步載入的問題。

非同步載入是指不會阻擋頁面中其他元素的載入。

也就是說FB並還沒完成初始化，或在初始化的同時，您就讓程式呼叫了FB.getLoginStatus，在此一瞬間當然會出現FB is not defined。

所以一般我們會將判斷設定在登入的按鈕上，或是一些需要登入才能互動的元件上。

如果你硬是想要在頁一載入就判斷是否曾登入可能要使用一些同步的方法來處理非同步的問題，在此先不做討論

所以我們的登入應該是先檢查：

1
button onclick="checkLoginState()">登入</button>

呼叫 checkLoginState 來使用 FB.getLoginStatus 方法

1
2
3
4
5
6
7
8
9
function checkLoginState() {
  FB.getLoginStatus(function (response) {
    if(response.status === 'connected'){
      console.log('你已經登入囉')
    }else{
      login()
    }
  });
}

7. 繼續未完成的登入

接著 login() 此時使用者的畫面就會跳出臉書登入視窗。

1
2
3
4
5
function login() {
  FB.login(function (response) {
    console.log(response);
  });
}

透過 FB.login 這個方法會回傳跟 FB.getLoginStatus 一樣的 response 內容。
此時的 status 如果是 connected 就是已經登入成功，而且 authResponse 內會有accessToken、userID 等

8. FB.api() 取得使用者資料

目前臉書提供的預設權限只能讓我們獲得

  • id
  • name
  • email
  • picture (大頭照)
  • 目前已知可預設取得的只有這些資料。（或有更多還請不吝分享）

如果需要更多用戶資訊，需額外向FB說明用途，申請等待通過。
在開發者頁面左方選單的「應用程式審查」。

如果已經登入了(response.status === "connected")，我們就使用　FB.api　這個方法來獲得使用者的資料。

FB.api(path, method, params, callback)
詳細介紹：Graph API Request

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function login() {
  FB.login(function (response) {
    console.log(response);
    if (response.status === "connected") {
      FB.api('/me', {
        'fields': 'id,name,email,picture'
      }, function (response) {
        console.log(response);
      });
    }
  }, {
      scope: 'email',
      auth_type: 'rerequest'
    });
}

response 就是取得的 json 格式的資料了！大功告成！

後面那奇怪的 scope 是?

一般來說使用者可以選擇不要讓應用程式取得這些資料，
如果你今天非拿到資料不可，這邊有官方詳細說明

補充：我們也可以直接透過這個api取得我們要的資料(json格式)

1
https://graph.facebook.com/me?fields=d,name,email,picture&access_token="{responseauthResponse.accessToken}"

資料來源：Facebook JavaScript SDK

一整套豐富的用戶端功能，用來新增社交外掛程式、「Facebook 登入」和 Graph API 呼叫。

0%