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

Integrating Facebook Web SDK with ReactJS Component State

本文关键字：组件 状态 集成 ReactJS Facebook Web SDK      更新时间：2023-09-26

我开始使用ReactJS, NodeJS, Webpack和用于用户身份验证的Facebook SDK。所有这些技术及其相关的软件工程原则/最佳实践对我来说都是相对较新的(甚至JavaScript对我来说也是相当新的)。

我遵循这里的教程https://developers.facebook.com/docs/facebook-login/web，我已经得到了Facebook身份验证工作很棒!但是本教程内容的结构方式，在我看来，SDK的设计只期望FB状态响应处理程序包含在原始页面HTML中，就在<body>标记内。

  // 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组件集成。是否有一种方法可以将Facebook登录/认证代码和Facebook状态更新处理程序从HTML中重新定位，例如，通过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});

我在React中使用一个自定义按钮组件(MyButton)，你可以很容易地创建。

使用npm react-facebook怎么样?它包括一些组件，如"Initialize"(这是暴露FB Api在一个函数子)或LoginButton处理facebook弹出屏幕登录，或者如果你想让你自己的按钮，你可以使用组件login。只需将facebook应用id提供给项目根节点的FacebookProvider组件(只调用一次)，并使用提供react-facebook等优秀节点模块的组件。

https://www.npmjs.com/package/react-facebook

我找到了另一种方法来加载fb-sdk文件在webpack，使用npm包:react-load-script

遵循这个简单的包来实现相同的效果:https://www.npmjs.com/package/react-load-script

相关文章：