jeter20131220 3 years ago
parent
commit
3f391c0cb1
6 changed files with 158 additions and 77 deletions
  1. 68 71
      desktopB/goto.js
  2. 4 2
      desktopB/index.html
  3. 78 1
      mobileB/goto.js
  4. 6 1
      mobileB/index.html
  5. 1 1
      mobileB/style.css
  6. 1 1
      mobileB/style.scss

+ 68 - 71
desktopB/goto.js

@@ -196,86 +196,83 @@ $(window).scroll(function(){
     
 });
 
+
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391', // 填入 FB APP ID
+    cookie: true,
+    xfbml: true,
+    version: 'v11.0'
+  });
+
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(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().
+  var target = document.getElementById("FB_STATUS_2"),
+    html = "";
+
+  // 登入 FB 且已加入會員
   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");
+    html = "已登入 FB,並加入 WFU BLOG DEMO 應用程式<br/>";
+
+    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';
+    }
+    });
   }
+
+  // 登入 FB, 未偵測到加入會員
+  else if (response.status === "not_authorized") {
+    target.innerHTML = "已登入 FB,但未加入 WFU BLOG DEMO 應用程式";
+  }
+
+  // 未登入 FB
+  // else {
+  //   target.innerHTML = "未登入 FB";
+  // }
 }
-// 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) {
+
+
+// 點擊登入
+$("#fb_login").click(function () {
+  // 進行登入程序
+  FB.login(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
+  }, {
+    scope: 'public_profile,email'
+
+  },
+  );
+
+});
+
+// 點擊登出
+// $("#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 = "//connect.facebook.net/en_US/sdk.js";
+  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"));
-// 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' });
-}
+}(document, 'script', 'facebook-jssdk'));
 
   

+ 4 - 2
desktopB/index.html

@@ -287,8 +287,10 @@
                     <hr>
                     <div id="form-right">
                         <div id="fb_login">
-                            <button  id="fb-button" scope="public_profile,email"
-                            onlogin="checkLoginState();"  ><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p></button>
+                            <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
+                                <p><span style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p>
+                            </button>
+                            <span id="FB_STATUS_2"></span>
                         </div>
                         <!-- <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p></button> -->
                         <!-- <div id="fb_login">

+ 78 - 1
mobileB/goto.js

@@ -200,4 +200,81 @@ $(window).scroll(function(){
   }
     
 });
-  
+  
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391', // 填入 FB APP ID
+    cookie: true,
+    xfbml: true,
+    version: 'v11.0'
+  });
+
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
+  });
+};
+
+// 處理各種登入身份
+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('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';
+    }
+    });
+  }
+
+  // 登入 FB, 未偵測到加入會員
+  else if (response.status === "not_authorized") {
+    target.innerHTML = "已登入 FB,但未加入 WFU BLOG DEMO 應用程式";
+  }
+
+  // 未登入 FB
+  // else {
+  //   target.innerHTML = "未登入 FB";
+  // }
+}
+
+
+// 點擊登入
+$("#fb_login").click(function () {
+  // 進行登入程序
+  FB.login(function (response) {
+    statusChangeCallback(response);
+  }, {
+    scope: 'public_profile,email'
+
+  },
+  );
+
+});
+
+// 點擊登出
+// $("#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'));

+ 6 - 1
mobileB/index.html

@@ -230,7 +230,12 @@
                     <option class="option" value="type">異國風</option>
                 </select>
                 <input name="prefer_date" type="text" placeholder="預選裝修日期" id="date" required>
-                <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span class="sapn-line">|</span>使用fb填入信箱與姓名</p></button>
+                <div id="fb_login">
+                    <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
+                        <p><span style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p>
+                    </button>
+                    <span id="FB_STATUS_2"></span>
+                </div>
                 <!-- <div id="fb_login">
                     <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
                     </fb:login-button>

+ 1 - 1
mobileB/style.css

@@ -443,7 +443,7 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #contact-us #contact-form #fb-button p {
-    top: 4vw;
+    top: 3vw;
     right: 1vw;
   }
 }

+ 1 - 1
mobileB/style.scss

@@ -343,7 +343,7 @@ body {
                 }
 
                 @media screen and(max-width:$moblie) {
-                    top: 4vw;
+                    top: 3vw;
                     right: 1vw;
                 }
             }