ReactでFacebookのログインボタンを使用

Question

私は自分のアプリのFacebook認証を初めて試みています。

https://developers.facebook.com/docs/facebook-login/web

I：ここではFacebookのSDKドキュメントの例のように私は、私は、ユーザーがログインして便利なFacebookのログインボタンを使用してそれらをログアウトすることができ、それはチュートリアルを正常に動作して取得することができますよFacebookのブランディング要件を自動的に購読し、ユーザーがログインしたときに自動的にFacebookのログアウトボタンになるため、このボタンを使用するのが大好きです。あらゆる面で完璧です。ここに含まれるボタンのコードが自動ログアウトでどのように見えるかです：私はReactJSページでそれを試すまで

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();"> 
</fb:login-button> 

は、肉汁のように思えます。

// 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> 

また、私はこのようにそれを試してみました：それは「JSXはXMLではありません」と言うので、私はFB SDKのログインボタンをこのように含めることはできません

ReactDOM.render(
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>, 
    document.getElementById('loginbutton') 
); 

。十分に公正な私は推測する。

この便利なボタンを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')); 

これは、すべてが正しいとスムーズに動作していることを確認しますバージョン（例えば2.8対2.5）のSDKを使用するので、カスタマイズされたバージョンのFB SDKログインボタンが含まれているため、コンソールエラーが発生することはありません。

Answer 2

あなたはhttps://github.com/keppelen/react-facebook-login

のような既存のコンポーネントを使用したり、インスピレーションを得るためにそのソースを読むことができます。