javascript - facebook 登录按钮 javascript onclick 事件

Question

我正在尝试创建一个简单的 FB 登录名，它将请求电子邮件权限...第二个 block 使用按钮选项 #2 工作正常，
但是使用按钮选项 #1 的第二个 block 不会调用 authUser()函数，
& 当我尝试使用第一个 block 来获得相同的结果时，它也不起作用。

1. 为什么 FIRST BLOCK 没有调用 authUser() 函数？
   
2. 是不是登录按钮类型的问题？
   
3. 如果是这样，我如何使用按钮选项 #1 来启用 data-auto-logout-link="true" ？
4. 在 SECOND BLOCK 中使用按钮选项 #2 时，onClick() 函数也没有被调用...为什么？

我已经可以假设是 facebook 按钮类型导致了这种情况，并且忽略了代码中的权限请求...

• 两个 block 都在同一个<script type="text/javascript">标签

第一个选项

FB.init({
  appId      : 'YOUR_APP_ID',
  status     : true, // check login status
  cookie     : true, // enable cookies to allow the server to access the session
  xfbml      : true  // parse XFBML
});


// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);

// Login in the current user via Facebook and ask for email permission
function authUser() {
  console.log("--- authUser ---");
  FB.login(checkLoginStatus, {scope : 'email'});
}

// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
  if(response && response.status == 'connected') {
    console.log('User is authorized');

  } else if (response.status === 'not_authorized') {
    console.log('User is not_authorized ... ');

  } else {
    console.log('User is not authorized');
    document.getElementById('loginButton').style.display = 'inline-block';
  }
}

• 按钮:

  <div class="fb-login-button" id="loginButton" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true" onclick="authUser();"></div>

第二个选项

window.onload = function() {
  document.getElementById('fb-login').onclick = function() {
  var cb = function(response) {
    console.log('FB.login callback', response);
    if (response.status === 'connected') {
      console.log('User logged in');
    } else {
      console.log('User is logged out');
    }
  };
  FB.login(cb, { scope: 'email' });
};
}

• 有 2 个按钮选项:

  1. <fb:login-button id="fb-login" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></fb:login-button>

  2. <button id="fb-login">FaceBook Login</button>

     • 在实际代码中不使用相同的按钮 id，这只是示例

谢谢。

Answer 1

我从未尝试过，但它可能会有所帮助。

Facebook for Developers

JavaScript 的特殊部分:

Facebook for Developers - JavaScript