将Facebook Web SDK与ReactJS组件状态集成
[英]Integrating Facebook Web SDK with ReactJS Component State
问题描述
我开始使用ReactJS，NodeJS，Webpack和Facebook SDK进行用户身份验证。 所有这些技术及其相关的软件工程原理/最佳实践对我来说都是相对较新的（即使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组件集成。 有没有办法从HTML重新定位Facebook登录/身份验证代码和Facebook状态更新处理程序，例如，通过Webpack与React代码捆绑在一起的脚本？ 可能吗？ 我的问题的部分原因是，如果我理解正确，我的Facebook状态更新处理程序能够更新我的React组件的状态，该处理程序需要成为组件的一部分才能访问相关的React组件this.setState(...)函数。
我是否正确地考虑过这个问题？
3 个解决方案
解决方案1
13 已采纳 2016-10-12 07:42:36
是的，你是对的，可以很好地将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 ），您可以轻松创建。
解决方案2
0 2019-07-03 08:08:03
我找到了另一种在webpack中加载fb-sdk文件的方法，使用npm package： react-load-script
按照这个简单的包来实现相同的目的： https ： //www.npmjs.com/package/react-load-script
解决方案3
0 2019-08-13 20:51:57
使用npm react-facebook怎么样？ 它包括一些组件，如“Initialize”（这是用于在函数children中公开FB Api）或LoginButton来处理用于登录的facebook弹出屏幕，或者如果你想创建自己的按钮，你可以使用组件Login。 只需将facebook app id提供给项目根目录中的FacebookProvider组件（仅调用一次），并使用提供诸如react-facebook之类的优秀节点模块的组件。
在Wordpress中集成Facebook JavaScript SDK
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.