使用React Create应用程序登录Facebook

Question

我使用create-react-app模块制作了一个React Webapp。 我正在尝试添加Facebook登录名，但遇到了问题。

我不知道要使用FB.init，FB.getLoginStatus等异步加载到Facebook JavaScript SDK中的位置。我尝试在index.html文件中放入一个脚本标记并按如下方式加载它：

   <!doctype html>
    <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
    <div id="fb-root"></div>


    <!-- <script src="./facebookLogin.js"></script>-->
    <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1830088130643938',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (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'));
</script>

  </body>
</html>

但是当我尝试访问index.js（create-react-app的起点）中的FB变量时，它说FB'没有定义为no-undef。

然后，我尝试将其加载到index.js文件中，但又出现了同样的问题：

    import React from 'react';
import ReactDOM from 'react-dom';

// Importing CSS files
import './index.css';

// Importing components
import App from './App';
import FacebookButton from './components/facebookButton';

console.log("Running index.js right now");
 window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (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'));

console.log("FB is: ", FB);


ReactDOM.render(<FacebookButton/>, document.getElementById('root'));

仅当我在public下制作一个单独的javascript文件，通过我的index.html文件将其链接并在其中进行所有Facebook登录时，它才起作用。 但是，如何使用它从index.js文件访问FB变量？

我需要在index.js中使用FB变量，这就是根据create-react-app的工作方式开始的javascript文件。 我希望将FB变量向下传递给其他组件以进行状态，处理点击，登录检查等。

也许我可能不了解create-react-app的工作方式以及自定义javascript或异步加载JDK的方式。

请告诉我如何使用create-react-app登录Facebook。

Answer 1

进行Facebook登录的最简单方法是使用react-facebook-login 。 你可以在这里完善 npm模块

使用React Create应用程序登录Facebook

问题描述

1 个解决方案

解决方案1
0 2017-06-09 12:17:03

使用React Create应用程序登录Facebook

问题描述

1 个解决方案

解决方案1 0 2017-06-09 12:17:03

解决方案1
0 2017-06-09 12:17:03