如何使用Facebook帳戶登錄？

Question

我已經通過this link並試過了代碼。

我做同樣的事情，但有來自Facebook的未來沒有任何反應。沒有彈出（未被阻止）。我的代碼如下：

<div id="fb-root"></div> 
<script> 


// Additional JS functions here 


window.fbAsyncInit = function() { 


FB.init({ 

     appId  : 'myappid', // App ID 
     channelUrl : '//myurl/channel.html', // Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
    }); 


FB.getLoginStatus(function(response) { 
alert("Response"); 
alert("getloginstatus"); 
    if (response.status === 'connected') { 
     // connected 
    } else if (response.status === 'not_authorized') { 
     // not_authorized 
     login(); 
    } else { 
     // not_logged_in 
     login(); 
    } 
}); 

}; 


    (function(d){ 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
    alert("Lodaed SDK"); 
    }(document)); 

function testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function(response) { 
     alert("Good to see you, " + response.name + "."); 
    }); 
} 

function login() { 
    FB.login(function(response) { 
     if (response.authResponse) { 
      // connected 
     } else { 
      // cancelled 
     } 
    }); 
} 





</script> 
</div> 

請告訴我我做錯了什麼。我是，我沒有任何複選框

請選擇您的應用如何與Facebook集成。

創建的Facebook應用程序中。如果我必須定義url，那麼我給了什麼？

Answer 1

 <script> 
     // This is called with the results from from FB.getLoginStatus(). 
     function statusChangeCallback(response) { 
     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. 
      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. 
     } 
     } 

     // 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. 

     FB.getLoginStatus(function(response) { 
      statusChangeCallback(response); 
     }); 

     }; 

     // 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 testAPI() { 
     console.log('Welcome! Fetching your information.... '); 
     FB.api('/me', function(response) { 
      console.log("Fb response"); 
      console.log(response); 
      console.log('Successful login for: ' + response.name); 
      document.getElementById('status').innerHTML = 
      'Thanks for logging in, ' + response.name + '!'; 
     }); 
     } 
     </script> 

身體，用途： -

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> 
    </fb:login-button> 

Answer 2

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href=""> 
</head> 
<body> 
    <script> 



    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '1736082853383409', 
      xfbml  : true, 
      version : 'v2.8' 
     }); 
     FB.getLoginStatus(function(response){ 
      if(response.status === 'connected'){ 
       document.getElementById('status').innerHTML = 'we are connected'; 
      } else if(response.status === 'not_authorized') { 
       document.getElementById('status').innerHTML = 'we are not logged in.' 
      } else { 
       document.getElementById('status').innerHTML = 'you are not logged in to Facebook'; 
      } 
     }); 
    // FB.AppEvents.logPageView(); 
    }; 

    (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')); 

    function login(){ 
     FB.login(function(response){ 
      if(response.status === 'connected'){ 
       document.getElementById('status').innerHTML = 'we are connected'; 
      } else if(response.status === 'not_authorized') { 
       document.getElementById('status').innerHTML = 'we are not logged in.' 
      } else { 
       document.getElementById('status').innerHTML = 'you are not logged in to Facebook'; 
      } 

     }); 
    } 
    // get user basic info 

    function getInfo() { 
     FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) { 
      document.getElementById('status').innerHTML = response.id; 
     }); 
    } 

    function logout(){ 
     FB.logout(function(response) { 
      document.location.reload(); 
     }); 
    } 


</script> 
<div id="status"></div> 
<!-- <button onclick="getInfo()">Get Info</button> --> 
<button onclick="login()">login</button> 
<button onclick="logout()">logout</button> 

</body> 
</html> 

Answer 3

使用此代碼或者https://github.com/radhey113/facebook_login/blob/master/index1.html

window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '1557876490891744', 
      appSecret : '302f28b9110351071840458316ce232f', 
      xfbml  : true, 
      version : 'v2.5' 
     }); 
     FB.getLoginStatus(function(response) { 
      if (response.status === 'connected') { 
       document.getElementById('status').innerHTML = 'We are connected.'; 
       document.getElementById('login').style.visibility = 'hidden'; 
      } else if (response.status === 'not_authorized') { 
       document.getElementById('status').innerHTML = 'We are not logged in.' 
      } else { 
       document.getElementById('status').innerHTML = 'You are not logged into Facebook.'; 
      } 
     }); 
    }; 
    (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')); 
    // login with facebook with extened publish_actions permission 
    function login() { 
     FB.login(function(response) { 
      console.log(response); 
      if (response.status === 'connected') { 
       document.getElementById('status').innerHTML = 'We are connected.'; 
       document.getElementById('login').style.visibility = 'hidden'; 
      } else if (response.status === 'not_authorized') { 
       document.getElementById('status').innerHTML = 'We are not logged in.' 
      } else { 
       document.getElementById('status').innerHTML = 'You are not logged into Facebook.'; 
      } 
     }, {scope: 'publish_actions'}); 
    } 
    // getting basic user info 
    function getInfo() { 
     FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) { 
      document.getElementById('status').innerHTML = response.id; 
     }); 
    } 
    // uploading photo on user timeline 
    function uploadPhoto() { 
     FB.api('/me/feed', 'post', {source: 'http://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300', message : "SHOWDOWN POST",link:'http://54.175.71.74:3000'}, function(response) { 
      if (!response || response.error) { 
       console.log(JSON.stringify(response)); 
       document.getElementById('status').innerHTML = "Error!"; 
      } else { 
       console.log(JSON.stringify(response)); 
       document.getElementById('status').innerHTML = response.id; 
      } 
     }); 
    } 

    function uploadFeed(imgUrl, des) { 
     console.log("img Url-------- " + imgUrl); 
     $scope.loaderOverlay = false; 
     var linkPage = 'http://playshowdown.com/feed?categoryName='+vm.stateType.categoryName+'&id='+ vm.stateType._id + 
      '&type='+vm.stateType.type + '&feedType='+vm.stateType.feedType; 
     FB.ui({ 
       method: 'share_open_graph', 
       action_type: 'og.shares', 
       action_properties: JSON.stringify({ 
        object: { 
         'og:url': linkPage, 
         'og:title': "Play Showdown", 
         'og:description': des, 
         'og:image': imgUrl 
        } 
       }) 
      }, 
      function (response) { 
      console.log(response); 
       // if(response.post_id){ 
       if(response.error_code != 4201){ 
        vm.areYouSure = false; 
        $timeout(function(){ 
         $('.overlay').show(); 
         $('#congract4').show(); 
        },1000); 
        console.log("post response1: " + JSON.stringify(response)); 
       } 
       // } 
       // Action after response 
      }) 

    } 
    function readPermission() { 
      FB.api(
       "/debug_token?input_token=EAAWI4WLX8eABAJHx3al6NIi2pLM7ZCZBXEgFUOp2gJQ3VOh7gRbLSdZBZAJgmjcuYcYT7jaqO4mrkOyUeCI2q8kuZBqZCzJajjEqPjsZAFzFnHJPhWWozOGqKRZCCvTARTOS67G04cUyeYi9RAZBSZCrZA1Jq6FOmiyksFnhSKkEaFHOQQbZB5siATE9AQCU7prTGv0ZD", 
       function (response) { 
        console.log(response) 
        if (response && !response.error) { 
         /* handle the result */ 
        } 
       } 
      ); 
    }