将Facebook Web SDK与ReactJS组件状态集成 [英] Integrating Facebook Web SDK with ReactJS Component State
问题描述
我开始使用ReactJS，NodeJS，Webpack和Facebook SDK进行用户身份验证.所有这些技术及其相关的软件工程原理/最佳实践对我来说都是相对较新的(甚至JavaScript对我来说还很新).
I'm getting started with ReactJS, NodeJS, Webpack, and the Facebook SDK for user authentication. All these technologies and their associated software engineering principles/best practices are relatively new to me (even JavaScript is pretty new to me).
我在这里已按照教程进行操作 https://developers.facebook.com/docs /facebook-login/web ，并且我的Facebook身份验证工作非常好！但是，按照本教程内容的结构方式，在我看来，SDK旨在仅将FB状态响应处理程序包含在<body>标记内的原始页面HTML中.以下内容特别引用了此:
I've followed the tutorial here https://developers.facebook.com/docs/facebook-login/web and I've got Facebook authentication working great! But the way this tutorial content is structured, it looks to me like the SDK is designed only to expect the FB status response handlers to be included in the raw page HTML just inside the <body> tag. The following in particular references this:
// 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 strategy strikes me as imperfect and hard to integrate with React components. Is there a way to relocate the Facebook login/authentication code and Facebook status update handlers from the HTML, for example, into scripts being bundled with React code via Webpack? Is it possible? Part of the reason for my question is that if I understand correctly, for my Facebook status update handler to be able to update my React components' state, that handler needs to be part of a component to have access to the relevant React component this.setState(...) function.
我什至正确地考虑了这个问题吗?
Am I even thinking about this correctly?
推荐答案
是的，您是正确的，可以很好地将facebook登录信息与react组件集成在一起.
Yes you are right and can very well integrate facebook login with react component.
示例登录组件可以像这样-
A sample login component can be like this -
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登录，您可以在组件上设置状态以反映该状态. 例如
When response status received is connected then it means user is logged in via Facebook and you can set state on your component to reflect that. e.g
response.status === 'connected'
this.setState({userLoggedIn:true});
我在React中使用了自定义按钮组件(MyButton)，您可以很容易地创建它.
I am using a custom button component (MyButton) in React which you can very easily create.
这篇关于将Facebook Web SDK与ReactJS组件状态集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
