如何在反应中使用 facebook SDK
how can I use facebook SDK in react
我目前正在使用react,通过使用react-facebook-rogin 库,我成功登录了facebook。但是没有登出功能!
所以我决定使用facebook SDK,但是我不知道如何在反应中使用javascript代码。
根据facebook官方文档,我需要在HTML中编写如下代码。
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v11.0'
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
之后,这是注销的代码
FB.logout(function(response) {
// user is now logged out
});
这是我使用 react-facebook-rogin 库的代码。
import React from "react";
import Navbar from './components/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './components/Navbar.css';
import './App.css';
import MainStructure from "./pages/MainStructure";
import Study from "./pages/Study"
import FacebookLogin from 'react-facebook-login'
import { useState } from "react";
function App() {
const responseFacebook = (response) => {
console.log(response);
setIsLoggedin(true)
}
const [isLoggedin, setIsLoggedin] = useState(false);
return (
isLoggedin ?
(<div>
<Route path='/' >
<Navbar/>
</Route>
<Route exact path='/' >
<MainStructure/>
</Route>
<Route path='/study'>
<Study/>
</Route>
</div>)
:
(
<div className="">
<div className="facebookLogin">
<FacebookLogin
appId="145617534309548"
autoLoad={true}
fields="name,email,picture"
//onClick={componentClicked}
callback={responseFacebook} />
</div>
</div>)
);
}
export default App;
如何在 React 代码中使用 javascript 代码?
我不会为此使用已有 3 年历史的库,但您可以尝试在单击时使用“window.FB.logout”或“FB.logout”。无论哪种方式,您都可以自己加载 JS SDK,而不是旧的依赖项。这是一个如何工作的示例(未经测试):
const SomeComponent = () => {
const [isLoggedin, setIsLoggedin] = useState(false);
const onLoginClick = () => {
window.FB.login(...);
};
useEffect(() => {
window.fbAsyncInit = () => {
window.FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v11.0'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, []);
return (
<div><button onClick={onLoginClick}>Login with Facebook</button></div>
);
};
这应该是只加载一次的组件 - 例如,始终存在的根组件。
在那种情况下,你当然也可以使用FB.logout()。
我目前正在使用react,通过使用react-facebook-rogin 库,我成功登录了facebook。但是没有登出功能!
所以我决定使用facebook SDK,但是我不知道如何在反应中使用javascript代码。
根据facebook官方文档,我需要在HTML中编写如下代码。
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v11.0'
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
之后,这是注销的代码
FB.logout(function(response) {
// user is now logged out
});
这是我使用 react-facebook-rogin 库的代码。
import React from "react";
import Navbar from './components/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './components/Navbar.css';
import './App.css';
import MainStructure from "./pages/MainStructure";
import Study from "./pages/Study"
import FacebookLogin from 'react-facebook-login'
import { useState } from "react";
function App() {
const responseFacebook = (response) => {
console.log(response);
setIsLoggedin(true)
}
const [isLoggedin, setIsLoggedin] = useState(false);
return (
isLoggedin ?
(<div>
<Route path='/' >
<Navbar/>
</Route>
<Route exact path='/' >
<MainStructure/>
</Route>
<Route path='/study'>
<Study/>
</Route>
</div>)
:
(
<div className="">
<div className="facebookLogin">
<FacebookLogin
appId="145617534309548"
autoLoad={true}
fields="name,email,picture"
//onClick={componentClicked}
callback={responseFacebook} />
</div>
</div>)
);
}
export default App;
如何在 React 代码中使用 javascript 代码?
我不会为此使用已有 3 年历史的库,但您可以尝试在单击时使用“window.FB.logout”或“FB.logout”。无论哪种方式,您都可以自己加载 JS SDK,而不是旧的依赖项。这是一个如何工作的示例(未经测试):
const SomeComponent = () => {
const [isLoggedin, setIsLoggedin] = useState(false);
const onLoginClick = () => {
window.FB.login(...);
};
useEffect(() => {
window.fbAsyncInit = () => {
window.FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v11.0'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, []);
return (
<div><button onClick={onLoginClick}>Login with Facebook</button></div>
);
};
这应该是只加载一次的组件 - 例如,始终存在的根组件。
在那种情况下,你当然也可以使用FB.logout()。