Facebook登录不能使用hello.js

Question

我已经使用create- react -app npm模块创建了一个示例react应用程序。然后，我将hello.js添加到应用程序中，以便能够使用此api编写快速应用程序。我已经在facebook developer站点上正确地配置了我的应用程序id等(我已经在没有使用hello.js的情况下用另一个示例应用程序进行了测试，它工作得很好)。

当我点击Login按钮时，它被重定向到FB登录页面，我输入了正确的凭据，它被重定向到localhost，但没有成功响应。由于某些原因，这不起作用。我不知道哪里出了问题。

如果有人知道我做错了什么，下面是代码：

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;