[FIXED] Wie kann ich Facebook SDK in React verwenden

Ausgabe

Ich verwende derzeit React und mithilfe der React-Facebook-Rogin-Bibliothek habe ich mich erfolgreich bei Facebook angemeldet. Allerdings gibt es keine Funktion zum Abmelden!.

Also habe ich mich entschieden, das Facebook SDK zu verwenden, aber ich weiß nicht, wie ich Javascript-Code verwenden soll.

Laut dem offiziellen Facebook-Dokument muss ich folgenden Code in HTML schreiben.

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

Und danach ist dies der Code zum Abmelden

FB.logout(function(response) {
  // user is now logged out
});

Und dies ist der Code, den ich für die React-Facebook-Rogin-Bibliothek verwendet habe.

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;

Wie kann ich Javascript-Code im Reaktionscode verwenden?

Lösung

Ich würde dafür keine Bibliothek verwenden, die 3 Jahre alt ist, aber Sie könnten versuchen, “window.FB.logout” oder “FB.logout” auf Klick zu verwenden. In beiden Fällen könnten Sie anstelle dieser alten Abhängigkeit einfach das JS SDK selbst laden. Hier ist ein Beispiel, wie das funktionieren könnte (ungetestet):

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>
    );
};

Dabei sollte es sich um eine Komponente handeln, die nur einmal geladen wird, also beispielsweise eine Root-Komponente, die immer vorhanden ist.

In diesem Fall können Sie natürlich auch FB.logout() verwenden.

Beantwortet von – andyrandy

Antwort geprüft von – David Goodson (FixError Volunteer)