FB 登入實作的部分，我想大家參考官方文件應該就可以很清楚了，有範例程式碼加上全中文，我想應該沒什麼困難!
這邊想記錄的主要是 FB 客製化登入按鈕實作 與 FB登入的個人資料串接。
PS. 囧，當初接FB登入的時候一直拿不到使用者 email !!
備註：在以下步驟之前，要先自己參考官方文件說明創建一個facebook的APP
-
FB客製化按鈕實作 首先我們先使用HTML及CSS製作一個客製化的按鈕
[html] [/html]
接下來我們必須寫javascript的部分，我們需要存取使用者公開資料與email
[javascript] // javascript document // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log(‘statusChangeCallback’); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the persopren. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === ‘connected’) { // Logged into your app and Facebook. login(response.authResponse.accessToken); } else if (response.status === ‘not_authorized’) { // The person is logged into Facebook, but not your app. console.log(‘The person is logged into Facebook, but not your app’); } else { // The person is not logged into Facebook, so we’re not sure if // they are logged into this app or not. console.log(“The person is not logged into Facebook”); } } // This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : “{{your-app-id}}”, cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : ‘v2.2’ // use version 2.2 }); }; // Now that we’ve initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app (‘connected’) // 2. Logged into Facebook, but not your app (‘not_authorized’) // 3. Not logged into Facebook and can’t tell if they are logged into // your app or not. // // These three cases are handled in the callback function. // Load the SDK asynchronously (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 = “//connect.facebook.net/en_US/sdk.js”; fjs.parentNode.insertBefore(js, fjs); }(document, “script”, “facebook-jssdk”)); // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function loginNEMI(token) { // 把 access_token 傳至後端再做資料拿取 console.log(“Welcome! Fetching your information… ”); var xhr=new XMLHttpRequest(); xhr.open(“POST”, “/login”, true); xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhr.onreadystatechange=function() { if(xhr.readyState === 4 && xhr.status === 200) { if(JSON.parse(xhr.responseText).status === “ok”) location.href=“/index”; else alert(“something wrong!”); } }; xhr.send(“token=“+token); } // custom fb login button function fb_login() { // FB 第三方登入，要求公開資料與email FB.login(function(response) { statusChangeCallback(response); console.log(response); }, {scope: ‘public_profile,email’}); } [/javascript]
這樣就可以完成一個客製化的FB登入按鈕囉!
-
FB登入個人資料串接 接下來我們進一步的在後端嘗試拿取使用者所授權的個人資料 我們可以透過上面編寫的程式碼，在後端得到使用者的 access token 透過 graph api 去存取使用者的個人資料 例如： GET https://graph.facebook.com/me?fields=id,name,email&access\_token=’+**token** graph api 會回傳：
{ “id”: “xxx”, “name”: “xxx”, “email”: “[email protected]” } 這樣就可以成功地拿取到使用者的資訊囉。 另外，也可以透過 Graph API 測試工具做測試
PS. 記得 fields 一定要填上你所要拿取的欄位，不然只能拿到基本的ID與名字。
參考資料：