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

ReactJS、NodeJS、Webpack、およびFacebook SDKを使用してユーザー認証を開始しています。これらのテクノロジとそれに関連するソフトウェアエンジニアリングの原則/ベストプラクティスはすべて私には比較的新しいものです（JavaScriptでもかなり新しくなっています）。Facebook Web SDKとReactJSの統合コンポーネントの状態

ここではチュートリアルhttps://developers.facebook.com/docs/facebook-login/webに従っています。私はFacebook認証がうまくいっています！しかし、このチュートリアルのコンテンツは構造化されているので、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'));

この戦略では、私はリアクションコンポーネントとの統合が不完全で困難です。 Facebookのログイン/認証コードとFacebookステータス更新ハンドラをHTMLから再配置する方法はありますか？たとえば、Webpack経由でReactコードにバンドルされているスクリプトに？出来ますか？私の質問の理由の一部は、Facebookの状態更新ハンドラが自分のReactコンポーネントの状態を更新できるように正しく理解していれば、そのハンドラは関連するReactコンポーネントへのアクセスを持つコンポーネントの一部でなければならないということです。this.setState(...)関数。

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

出典

2016-10-12 Steverino

はい、Facebookのログインを反応コンポーネントと非常によく統合できます。

サンプルのログイン・コンポーネントは、このようにすることができます -

受信した応答ステータスが接続されている

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）を使用しています。

出典

2016-10-12 07:42:36 WitVault

FBの定義に誤りがありますか？ –

@JeffTian 'FB.'の代わりに' window.FB.'を使うと、定義されていないエラーを解決するはずです。 – Kilpatrick

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

答えて

関連する問題