最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how can I use facebook SDK in react - Stack Overflow

programmeradmin2浏览0评论

I'm currently using react, and by using react-facebook-rogin Library, I successfully made facebook login. However, there is no function for logout!.

So I decided to use facebook SDK, however I don't know how to use javascript code in react.

according to facebook official document, I need to write following code in 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=".js"></script>

And after, this is the code for log out

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

And this is the code that I used react-facebook-rogin Library.

import React from "react";
import Navbar from './ponents/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './ponents/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={ponentClicked}
              callback={responseFacebook} />
          </div>
        </div>)


  );
}

export default App;

How can I use javascript code in react code?

I'm currently using react, and by using react-facebook-rogin Library, I successfully made facebook login. However, there is no function for logout!.

So I decided to use facebook SDK, however I don't know how to use javascript code in react.

according to facebook official document, I need to write following code in 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/en_US/sdk.js"></script>

And after, this is the code for log out

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

And this is the code that I used react-facebook-rogin Library.

import React from "react";
import Navbar from './ponents/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './ponents/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={ponentClicked}
              callback={responseFacebook} />
          </div>
        </div>)


  );
}

export default App;

How can I use javascript code in react code?

Share Improve this question asked Aug 20, 2021 at 5:53 ed eied ei 691 silver badge6 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

I would not use a library that is 3 years old for this, but you could try using "window.FB.logout" or "FB.logout" on click. Either way, instead of that old dependency, you could just load the JS SDK on your own. Here is an example how that could work (untested):

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/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    }, []);

    return (
        <div><button onClick={onLoginClick}>Login with Facebook</button></div>
    );
};

This should be a ponent that is only loaded once - a root ponent that is always there, for example.

In that case, you can use FB.logout() as well, of course.

发布评论

评论列表(0)

  1. 暂无评论