Facebook Login funktioniert nicht mit hello.js

Question

Ich habe eine Beispiel-App mit create-react-app npm-Modul erstellt. Und dann habe ich hello.js zur Anwendung hinzugefügt, um eine schnelle App mit dieser API schreiben zu können. Ich habe meine App-ID und so auf der Facebook-Entwickler-Website korrekt konfiguriert (ich habe das mit einer anderen Beispiel-App getestet, ohne hallo.js zu verwenden, und es funktioniert einwandfrei).

Wenn ich auf die Login-Schaltfläche klicke, wird es auf die FB-Anmeldeseite umgeleitet, ich gebe die korrekten Zugangsdaten ein und es wird zu localhost umgeleitet, aber ohne Erfolg. Aus irgendeinem Grund funktioniert das nicht. Und ich kann nicht herausfinden, was falsch läuft.

Hier ist der Code, wenn jemand Ideen hat, was ich falsch mache:

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

ich in der Lage war, es zu lösen, indem sie ausdrücklich hello.js sagen ‚Facebook‘ zu verwenden, und es funktionierte sofort. Veröffentlichen der Antwort, so dass, wenn jemand anderes das Problem hat, es ihnen helfen könnte:

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;