如何在React项目中使用Facebook SDK实现Facebook账号登出功能

1. 注入SDK初始化代码 #

找到项目public目录下的index.html文件，将Facebook官方提供的初始化代码添加到<head>标签内，注意替换appId为你实际的应用ID：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '145617534309548',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v11.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

2. 在App组件中添加登出处理逻辑 #

修改你的App组件，新增登出处理函数，通过props传递给Navbar组件供触发使用，修改后代码如下：

import React from "react";
import Navbar from './components/Navbar';
import { BrowserRouter as Router, 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);

  // 新增登出处理函数
  const handleFbLogout = () => {
    // 先判断FB SDK是否加载完成，避免报错
    if (window.FB) {
      window.FB.logout(function(response) {
        // 登出完成后修改登录状态
        setIsLoggedin(false)
      });
    }
  }

  return (
    <Router>
      {isLoggedin ?
        (<div>
          <Route path='/' >
            {/* 将登出函数传递给Navbar组件 */}
            <Navbar onLogout={handleFbLogout}/>
          </Route>

          <Switch>
            <Route exact path='/' >
              <MainStructure/>
            </Route>
            <Route path='/study'>
              <Study/>
            </Route>
          </Switch>
        </div>) 
        :
        (
          <div className="">
            <div className="facebookLogin">
              <FacebookLogin
                appId="145617534309548"
                autoLoad={true}
                fields="name,email,picture"
                callback={responseFacebook} />
            </div>
          </div>
        )
      }
    </Router>
  );
}

export default App;

注：这里顺带修正了你原代码中BrowserRouter误用为Switch的问题，避免路由匹配异常。

3. 在Navbar组件中添加登出按钮 #

在你的Navbar组件中接收onLogout props，添加登出按钮触发即可，示例代码：

function Navbar({ onLogout }) {
  return (
    <div className="navbar">
      {/* 其他导航内容 */}
      <button onClick={onLogout}>退出登录</button>
    </div>
  )
}
export default Navbar

注意事项 #

• 测试时需确保你的应用域名已添加到Facebook开发者后台的OAuth授权白名单中，否则SDK调用会被拦截
• 若出现FB is not defined报错，优先检查SDK加载状态、初始化代码的appId是否填写正确

内容的提问来源于stack exchange，提问作者ed ei