将Facebook Web SDK与ReactJS组件状态集成

微生旻

2023-03-14

问题内容：

我开始使用ReactJS，NodeJS，Webpack和Facebook
SDK进行用户身份验证。所有这些技术及其相关的软件工程原理/最佳实践对我来说都是相对较新的（即使JavaScript对我来说也很新）。

我已经在这里https://developers.facebook.com/docs/facebook-
login/web上
遵循了该教程，并且Facebook身份验证工作非常好！但是，按照本教程内容的结构方式，在我看来，SDK旨在仅将FB状态响应处理程序包含在<body>标记内的原始页面HTML中。以下内容特别引用了此：

  // 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'));

这种策略使我感到不完美，并且很难与React组件集成。有没有办法从HTML重新定位Facebook登录/身份验证代码和Facebook状态更新处理程序，例如，通过Webpack将其与React代码捆绑在一起的脚本中？可能吗？我的问题的部分原因是，如果我正确理解，为了使我的Facebook状态更新处理程序能够更新我的React组件的状态，则该处理程序需要成为组件的一部分才能访问相关的React组件this.setState(...)功能。

我什至在考虑正确吗？

问题答案：

是的，您是对的，可以很好地将Facebook登录信息与react组件集成在一起。

示例登录组件可以是这样的-

import React from 'react';

class LoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  loadFbLoginApi() {

        window.fbAsyncInit = function() {
            FB.init({
                appId      : FB_APP_ID,
                cookie     : true,  // enable cookies to allow the server to access
                // the session
                xfbml      : true,  // parse social plugins on this page
                version    : 'v2.5' // use version 2.1
            });
        };

        console.log("Loading fb api");
          // 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'));
  }

  componentDidMount() {
        this.loadFbLoginApi();
    }

    testAPI() {
      console.log('Welcome!  Fetching your information.... ');
      FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
      });
    }

    statusChangeCallback(response) {
      console.log('statusChangeCallback');
      console.log(response);
      if (response.status === 'connected') {
        this.testAPI();
      } else if (response.status === 'not_authorized') {
          console.log("Please log into this app.");
      } else {
          console.log("Please log into this facebook.");
      }
    }

    checkLoginState() {
      FB.getLoginStatus(function(response) {
        this.statusChangeCallback(response);
      }.bind(this));
    }

    handleFBLogin() {
        FB.login(this.checkLoginState());
        }

    render() {
        return (
                <div>
                    <MyButton
                        classNames = "btn-facebook"
                        id         = "btn-social-login"
                        whenClicked = {this.handleFBLogin}
                        >
                            <span className="fa fa-facebook"></span> Sign in with Facebook
                    </MyButton>
                </div>
               );
    }
}

export default LoginComponent;

连接收到的响应状态后，这意味着用户已通过Facebook登录，您可以在组件上设置状态以反映该状态。例如

response.status === 'connected'
this.setState({userLoggedIn:true});

我MyButton在React中使用了一个自定义按钮组件（），您可以很容易地创建它。

将Facebook Web SDK与ReactJS组件状态集成

相关阅读

相关文章

相关问答

相关工具

相关文档