javascript - 如何使用 Facebook 帐户登录？

Question

我已经通过这个链接并尝试了代码。

我也在做同样的事情，但 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 那么我给出了什么？

score 4 · Accepted Answer

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

在 Body 中，使用：-

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

score 1 · Accepted Answer

<!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>

score 1 · Accepted Answer

使用此代码或关注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 */
                    }
                }
            );
    }

javascript - 如何使用 Facebook 帐户登录？

3 回答 3

Related

Reference