La connexion Facebook ne fonctionne pas avec hello.js

Question

J'ai créé un exemple d'application de réaction en utilisant le module npm create-react-app. Et puis j'ai ajouté hello.js à l'application pour pouvoir écrire une application rapide en utilisant cette API. J'ai correctement configuré mon identifiant d'application et tel sur le site de développeur de facebook (j'ai testé ceci avec un autre exemple d'application sans utiliser hello.js et cela fonctionne très bien). Lorsque je clique sur le bouton Connexion, il est redirigé vers la page de connexion FB, j'entre les informations d'identification correctes et il est redirigé vers localhost, mais sans succès. Pour une raison quelconque, cela ne fonctionne pas. Et je ne peux pas comprendre ce qui ne va pas.

Voici le code si quelqu'un a des idées sur ce que je fais mal:

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

j'ai pu le résoudre en disant explicitement hello.js utiliser « facebook » et cela a fonctionné immédiatement. Poster la réponse de sorte que si quelqu'un d'autre fait face au problème, il pourrait les aider:

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;