2015-01-09 141 views
0

我正嘗試使用Facebook登錄我的網站。除了我必須單擊登錄按鈕兩次之外,一切都運行良好。第一次似乎登錄到Facebook,第二次似乎調用fb.login函數。以下是我的代碼。我只需點擊一下就可以完成整個過程嗎?Facebook登錄我自己的網站

----- LOGIN BUTTON ---- 
<a class="btn-auth btn-facebook" href="##" onclick="checkLoginState();" > 
    <i class="fa fa-facebook fa-lg"></i> 
    <span>Sign in with Facebook</span> 
</a> 

---- JAVASCRIPT ---- 
// 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 person. 
// 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. 
    testAPI(); 
} else if (response.status === 'not_authorized') { 
    // The person is logged into Facebook, but not your app. 
    FB.login(); 
} else { 
    // The person is not logged into Facebook, so we're not sure if 
    // they are logged into this app or not. 
    FB.login(); 
} 
} 

// 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  : 'xxxxxxxxxxxxxx', 
    cookie  : true, 
    xfbml  : true, 
    version : 'v2.1' 
}); 

}; 

function logoutUser() { 
    FB.logout(function(response) { 
    window.location.reload(); 
    }); 
    return false; 
} 

(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 testAPI() { 
console.log('Welcome! Fetching your information.... '); 
FB.api('/me', function(response) { 
    var fbName = response.name; 
    if(response.location){ 
    var location = response.location.name; 
    }else{ 
    var location = ''; 
    } 
    var fbLoginPrefix = 'fb_'; 
    var params = "Name="+response.name+"&Id="+response.id+"&Email="+response.email+"&Location="+location+"&LoginPrefix="+fbLoginPrefix; 
    $.ajax({ 
     type: "POST", 
     url: "/iCareWallet/services/login.cfm", 
     data: params, 
     dataType: "html", 
     success: function(resp) 
     { 
     if(resp == 0){ 
      window.location = "/my-profile"  
     }else{ 
      window.location = "/join-icw/params/display/editprofile" 
     } 

     }, 
     error: function (json, status, e) 
     { 
     alert("There was a problem login in. Please try again");   
     } 
    }); 
    console.log('Successful login for: ' + response.name); 
}) 
, {scope:'email'}; 
} 

回答

1

您必須直接調用FB.login用戶交互(鼠標點擊),或瀏覽器將最有可能阻止它。在嘗試呼叫FB.login之前,您正在調用異步(!)功能FB.getLoginStatus。確保你理解JavaScript中異步回調的概念,這很重要。

FB.getLoginStatus應該在FB.init之後立即使用,並且每頁僅加載一次。

我建議您閱讀本文以獲取更多信息:http://www.devils-heaven.com/facebook-javascript-sdk-login/