hello.js에서 Facebook 로그인이 작동하지 않습니다.

Question

create-react-app npm 모듈을 사용하여 샘플 반응 앱을 만들었습니다. 그리고 나서이 API를 사용하여 빠른 응용 프로그램을 작성할 수 있도록 hello.js를 응용 프로그램에 추가했습니다. 필자는 페이스 북 개발자 사이트에서 자신의 앱 ID 등을 올바르게 구성했습니다. 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;