web-dev-qa-db-ja.com

Facebook WebSDKとReactJSコンポーネントの状態の統合

ReactJS、NodeJS、Webpack、およびユーザー認証用のFacebookSDKを使い始めています。これらすべてのテクノロジーとそれに関連するソフトウェアエンジニアリングの原則/ベストプラクティスは、私にとって比較的新しいものです（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コンポーネントと統合するのが難しいと私は思います。 Facebookのログイン/認証コードとFacebookのステータス更新ハンドラーをHTMLから、たとえばWebpackを介してReactコードにバンドルされているスクリプトに再配置する方法はありますか？出来ますか？私の質問の理由の一部は、私が正しく理解していれば、Facebookステータス更新ハンドラーがReactコンポーネントの状態を更新できるようにするには、そのハンドラーがアクセスできるコンポーネントの一部である必要があるということです。関連するReactコンポーネントthis.setState(...)関数。

私もこれについて正しく考えていますか？

javascriptfacebookreactjswebpack
9
Steverino

はい、あなたは正しいです。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）を使用しています。

14
WitVault

Npmパッケージを使用してfb-sdkファイルをwebpackにロードする別の方法を見つけました：react-load-script

同じことを達成するためにこの単純なパッケージに従ってください： https://www.npmjs.com/package/react-load-script

0
Pulkit Aggarwal

Npm react-facebookの使用はどうですか？これには、「初期化」（これは関数の子でFB Apiを公開するためのもの）やログイン用のFacebookポップアップ画面を処理するLoginButtonなどのいくつかのコンポーネントが含まれます。独自のボタンを作成する場合は、コンポーネントLoginを使用できます。プロジェクトのルートにあるFacebookProviderコンポーネントにFacebookアプリIDを指定し（一度だけ呼び出されます）、react-facebookなどの優れたノードモジュールを提供するコンポーネントを使用するだけです。

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

0
Eruz Apodaca