Question

我第一次尝试为我的应用进行Facebook身份验证。我可以通过教程使其正常工作，我可以使用方便的Facebook登录按钮登录用户并将其注销，如Facebook SDK文档中的示例所示：

https://developers.facebook.com/docs/facebook-login/web

我喜欢使用此按钮，因为它很容易，自动订阅Facebook品牌要求，并且因为它在用户登录时自动成为Facebook注销按钮。在各方面都很完美。以下是按钮代码在自动注销时的外观：

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>

看起来像肉汁，直到我在ReactJS页面中尝试它。

// From the tutorials
<script type='text/babel'>
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.<br />
          // MY ADDITION ... it breaks
          <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
          </fb:login-button>
        </div>
      );
    }
  });
  ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>

我也尝试过这样：

ReactDOM.render(
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>,
    document.getElementById('loginbutton')
);

我不能以这种方式包含FB SDK登录按钮，因为它说＆＃34; JSX不是XML＆＃34;。我觉得很公平。

有没有办法在React页面中包含这个方便的按钮，还是只需要创建一个自定义的FB按钮？我认为这似乎是一个常见的用例，而且由于Facebook给了我们React，我很惊讶我无法找到更方便地使用此解决方案的方法。（制作自定义按钮不是世界末日，但我想知道是否有更好/更简单的方式。）

Answer 1

使用Facebook提供的代码生成器：

https://developers.facebook.com/docs/facebook-login/web/login-button

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true"></div>

请注意，为了使用本教程中演示的Facebook SDK onlogin功能，您需要添加自定义属性以链接功能，例如：

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true" data-onlogin="checkLoginState();"></div>

此外，代码生成器将为SDK引导过程提供比默认教程中更多的规范。所以而不是教程提供的代码：

// This won't work w/ custom <div ...> login buttons
(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(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#xfbml=1&version=v2.8&appId=YOUR-APP'S-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

这将确保SDK的正确版本（例如2.8 vs 2.5）能够顺利运行，因此您可以通过包含自定义版本的FB SDK登录按钮来解决大量控制台错误。

Answer 2

您可以使用类似react-facebook-login的现有软件包。

或阅读its source以获取灵感。

使用带有反应的Facebook登录按钮

2 个答案: