Facebook не работает с hello.js

Question

Я создал образец приложения-ответчика, используя модуль npm для создания-реакции-приложения. И затем я добавил hello.js в приложение, чтобы иметь возможность писать быстрое приложение, используя этот api. Я правильно настроил свой идентификатор приложения и т. Д. На сайте разработчика facebook (я тестировал это с помощью другого примера приложения без использования hello.js, и он отлично работает).

Когда я нажимаю кнопку «Войти», она перенаправляется на страницу входа в 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 использовать «фейсбук» и он работал сразу. Проводя ответ, чтобы, если кто-либо другой столкнулся с проблемой, он может помочь им:

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;