通过 React 使用 Facebook 登录按钮

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 登录按钮，因为它显示“JSX 不是 XML”。 我想这很公平。

有什么方法可以在 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 与 2.5），这样您就不会因包含自定义版本的 FB SDK 登录按钮而出现大量控制台错误。

Answer 2

您可以使用现有的包，例如 react-facebook-login。

或阅读其来源以获得灵感。

Answer 3

{ “名称”：“标志”， “私人”：真实， “版本”：“0.0.0”， “类型”：“模块”， “脚本”：{ "dev": "vite", "build": "vite 构建", "lint": "eslint.", "preview": "vite 预览" }, “依赖项”：{ "bootstrap": "^5.3.3", “反应”：“^18.3.1”， "react-dom": "^18.3.1" }, “开发依赖项”：{ "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", “全局”：“^15.9.0”， "vite": "^5.4.1" } }