2015-01-09 5 views
0

페이스 북을 사용하여 내 웹 사이트에 로그인하려고합니다. 로그인 버튼을 두 번 클릭해야하는 얼굴을 제외하고 모든 것이 잘 작동합니다. 처음으로 나를 페이스 북에 로그인하는 것처럼 보이고 두 번째 시간은 fb.login 함수를 호출하는 것 같습니다. 아래는 제 코드입니다. 클릭 한 번으로 전체 프로세스를 수행 할 수 있습니까?내 웹 사이트에 페이스 북 로그인

----- 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을 호출하고 있습니다. 자바 스크립트에서 비동기 콜백 개념을 이해했는지 확인하는 것이 중요합니다.

FB.getLoginStatusFB.init 바로 뒤에 사용하고 페이지로드 당 한 번만 사용해야합니다.

자세한 내용은이 기사를 읽는 것이 좋습니다. http://www.devils-heaven.com/facebook-javascript-sdk-login/

관련 문제