javascript - Facebook 登录不适用于 hello.js

Question

我使用 create-react-app npm 模块创建了一个示例 React 应用程序。然后我将 hello.js 添加到应用程序中，以便能够使用此 api 编写一个快速应用程序。我已经在 facebook 开发者网站上正确配置了我的应用程序 ID 等(我已经用另一个示例应用程序测试了它，但没有使用 hello.js，它工作正常)。

当我点击登录按钮时，它被重定向到 FB 登录页面，我输入了正确的凭据，它被重定向到本地主机，但没有成功响应。由于某种原因，这不起作用。而且我不知道出了什么问题。

如果有人对我做错了什么有想法，这里是代码:

import React, { Component } from 'react';
import * as hello from 'hellojs';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      askForLogin: true
    };

    hello.init({
      facebook: "XXXXXXXXXXXXXXXX" //correct api is provided here
    });

    hello.api("me").then(function(r){
      console.log("Successful login: ", r);
      this.setState({askForLogin: false});
    }, function(e) {
      console.log("Not successful yet");
      this.setState({askForLogin: true});
    });
  }

  login() {
    const options = { display: "page" };
    const cb = () => { console.log("Login callback");}
    hello.login("facebook", options, cb);
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {
          this.state.askForLogin ?
          <div>
            <button onClick={this.login}>Login to Facebook</button>
          </div> : <div></div>
        }
      </div>
    );
  }
}

export default App;

Answer 1

我能够通过显式告诉 hello.js 使用“facebook”来解决它并且它立即起作用。发布答案，以便其他人遇到问题时可能对他们有所帮助:

import React, { Component } from 'react';
import * as hello from 'hellojs';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      askForLogin: true
    };

    hello.init({
      facebook: "XXXXXXXXXXXXXXX"
    });

    const facebook = hello.use("facebook"); //This is the new line

    facebook.api("me").then(function(r){
      console.log("Successful login: ", r);
      this.setState({askForLogin: false});
    }.bind(this), function(e) {
      console.log("Not successful yet");
      this.setState({askForLogin: true});
    }.bind(this));
  }

  login() {
    const options = { display: "page"};
    const cb = () => { console.log("Login callback");}
    hello.login("facebook", options, cb);
  }

  render() {

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {
          this.state.askForLogin ?
          <div>
            <button onClick={this.login}>Login to Facebook</button>
          </div> : <div></div>
        }
      </div>
    );
  }
}

export default App;