[Facebook][Javascript SDK] 整合Facebook登入

現今許多網站除了自身的登入機制外，也會整合第三方登入，例如：Google+、LinkedIn、QQ等等，增加使用者的便利性，同時也能省去註冊繁雜手續，大幅提升會員數量。今天我們要介紹的就是如何利用Facebook登入。

Step 1 建立應用程式

首先要到Facebook建立應用程式，這個應用程式要做甚麼呢?有了這個才能得到API Key跟Secret Key，是呼叫Facebook API的必要資訊。到 應用程式主控板 ，登入你的FB帳號並且註冊成開發人員。

註冊成為開發人員後，選擇要新增哪個平台的應用程式，我們選網站。

接著要求你輸入你網站的網址

輸入網址後，就會進入快速起步，簡單幾個步驟就能讓你體驗功能。

或者你要先略過也可以，就直接建立應用程式的名稱。類別為必填，否則無法進行下一步。

恭喜你，已經建好自己的應用程式囉! 主控版中能看到應用程式編號及程式密鑰，還能看到FB用戶在你網站的登入統計。

最後到 設定 > 基本資料中，設定你要連接的網址，如果只是本機測試，輸入你網站執行起來後的專案URL即可，例如：https://localhost:44302/。

*設定網址的步驟非常重要，如果沒有設定正確的網址，你的網站呼叫API會發生無法載入網址的錯誤，如下圖。*

 

Step 2 初始化 JavaScript SDK

Facebook 有不同的登入流程，此篇要介紹JavaScript SDK的方式，詳見：搭配 JavaScript SDK 的網頁版「Facebook 登入」，不管你是ASP.NET、PHP還是Java都適用。Facebook非常貼心，在文件當中就已經有完整的程式碼，基本上你把下面這段程式複製貼到你的Login.html的body中，並且將 {your-app-id} 修改成你應用程式中得到的應用程式編號，就能夠執行囉。

執行之後就能夠看到一顆FB的登入按鈕，按下去後就會開啟視窗請求你登入FB帳號並給予授權。

 

Step 3 取得用戶的基本資料、電子郵件或其他資訊

當你執行完上面那段範例程式，你會發現你只能得到用戶的ID跟姓名，那如何得到更多資訊呢? 非常簡單，只要在呼叫API那段程式碼中加上你想得到的欄位即可。

原本：

1 2 3

FB.api('/me', function(response) { });

加上想要的資訊欄位：

1 2	FB.api('/me', 'GET', { "fields": "id,name,email,first_name,last_name,link,age_range" }, function (response) { });

而你又可以得到哪些資訊呢，可以參考：權限參考資料 – Facebook 登入。

Step 4 將得到的用戶資訊存入資料庫

經過前三個步驟，你已經可以得到用戶給的授權以及用戶在FB的資料，就能夠好好利用並整合進網站本身的登入機制中了。