test

desktop11/goto.js

@@ -249,118 +249,177 @@ $(document).ready(function () {
   $("#date").datepicker();
 });
 
-// javascript document
-// This is called with the results from from FB.getLoginStatus().
+// // 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: '1388696554848391',
+//     cookie: true,  // enable cookies to allow the server to access 
+//     // the session
+//     xfbml: true,  // parse social plugins on this page
+//     version: 'v11.0' // 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);
+// }
+// $("#fb-button").click(function(){
+//   FB.login(function (response) {
+//     statusChangeCallback(response);
+//     console.log(response);
+//   }, { scope: 'public_profile,email' });
 
+//   // console.log('FB API回傳資料: ' + JSON.stringify(response));
 
-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: '1388696554848391',
-    cookie: true,  // enable cookies to allow the server to access 
-    // the session
-    xfbml: true,  // parse social plugins on this page
-    version: 'v11.0' // use version 2.2
+    appId: '1388696554848391', // 填入 FB APP ID
+    cookie: true,
+    xfbml: true,
+    version: 'v11.0'
+  });
+
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
   });
 };
-// 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);
+
+// 處理各種登入身份
+function statusChangeCallback(response) {
+  console.log(response);
+  var target = document.getElementById("FB_STATUS_2"),
+    html = "";
+
+  // 登入 FB 且已加入會員
+  if (response.status === 'connected') {
+    html = "已登入 FB，並加入 WFU BLOG DEMO 應用程式<br/>";
+
+    FB.api('/me?fields=id,name,email', function (response) {
+      console.log(response);
+      html += "會員暱稱：" + response.name + "<br/>";
+      html += "會員 email：" + response.email;
+      target.innerHTML = html;
+    });
+  }
+
+  // 登入 FB, 未偵測到加入會員
+  else if (response.status === "not_authorized") {
+    target.innerHTML = "已登入 FB，但未加入 WFU BLOG DEMO 應用程式";
+  }
+
+  // 未登入 FB
+  else {
+    target.innerHTML = "未登入 FB";
+  }
 }
-$("#fb-button").click(function(){
+
+
+// 點擊登入
+$("#fb_login").click(function () {
+  // 進行登入程序
   FB.login(function (response) {
     statusChangeCallback(response);
-    console.log(response);
-  }, { scope: 'public_profile,email' });
+  }, {
+    scope: 'public_profile,email'
 
-  // console.log('FB API回傳資料: ' + JSON.stringify(response));
+  },
+  {
+    scope: 'public_profile,name'
 
+  }
+  );
+  if (response.id) {
+    document.getElementById("email").value = response.email;
+    document.getElementById("name").value = response.name;
+
+    // 隱藏FB登入按鈕
+    document.getElementById("fb_login").style.display = 'none';
+  }
 });
-// custom fb login button
-// function fbLogin() {
-//   // FB 第三方登入，要求公開資料與email
-//   FB.login(function (response) {
-//     statusChangeCallback(response);
-//     console.log(response);
-//   }, { scope: 'public_profile,email' });
 
-//   console.log('FB API回傳資料: ' + JSON.stringify(response));
-// }
+// 點擊登出
+// $("#FB_logout").click(function() {
+// FB.logout(function(response) {
+// statusChangeCallback(response);
+// });
+// });
 
+// 載入 FB SDK
+(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/zh_TW/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
 
-// function fb_login() {
-//   FB.api('/me/?fields=id,name,email', function (response) {
-//     console.log('FB API回傳資料: ' + JSON.stringify(response));
 
-//     if (response.id) {
-//       // 設定欄位預設值
-//       document.getElementById("email").value = response.email;
-//       document.getElementById("name").value = response.name;
 
-//       // 隱藏FB登入按鈕
-//       document.getElementById("fb_login").style.display = 'none';
-//     }
-//   });
-// };
 
 
 

desktop11/index.html

@@ -431,7 +431,7 @@
                                 <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
                                     <p><span style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p>
                                 </button>
-                                <div id="status"></div>
+                                <span id="FB_STATUS_2"></span>
                             </div>
                             <!-- <div id="fb_login">
                                 <fb:login-button id="fb-button" scope="public_profile,email"