自定义Facebook登录与Javascript SDK的行为奇怪

Custom Facebook Login is behaving strangely with Javascript SDK

本文关键字:SDK Facebook 登录 Javascript 自定义      更新时间:2023-09-26

我已经为社交登录创建了自己的自定义按钮,但是当我尝试登录FB时发生了什么:

  1. 如果我没有登录到FB已经我不能登录到我的网站,通过点击登录到facebook按钮。
  2. 如果我已经登录到FB,我没有选择点击登录到FB按钮在我的网站上。它只是让我直接登录。
下面是我使用的代码:

JS

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.
        goAPI();
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
         'into this app.'; 
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.'; 
    }
  };
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '1111111111111',
    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
  });
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
  };
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  function goAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', {fields: 'email,first_name,last_name,name'} , function(response) {
      console.log('Successful login for: ' + response.name);
     /* document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.first_name + '!'; */
      var result = response;      
      result['method'] = 'FB';
      setCookie('method', 'FB', 1);
      post('/signedin', result);    
    });
  }
HTML

<div class="social-wrap c">
    <button class="facebook" onclick="checkLoginState();">Sign in with Facebook</button>
</div>
<div id="status"></div>
CSS

div.social-wrap.c button {
    padding-left: 35px;
    padding-right: 0px;
    height: 35px;
    background: none;
    border: none;
    display: block;
    background-size: 25px 25px, cover;
    background-position: 10px center, center center;
    background-repeat: no-repeat, repeat;
    border-radius: 4px;
    color: white;
    font-family:"Merriweather Sans", sans-serif;
    font-size: 14px;
    margin-bottom: 15px;
    width: 205px;
    border-bottom: 2px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    box-shadow: 0 4px 2px -2px gray;
    text-shadow: rgba(0, 0, 0, .4) -1px -1px 0;
}
div.social-wrap.c > .facebook {
    background: url(social/facebook-icon.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c74c4), color-stop(100%, #3b5998));
    background-size: 25px 25px, cover;
    background-position: 10px center, center center;
    background-repeat: no-repeat, repeat;
}

知道为什么会这样吗?我在工作:https://developers.facebook.com/docs/facebook-login/web

缺少"FB.login();"来打开facebook连接对话框