安心して管理者にFacebookのログインを構築するには？

Question

 const responseFacebook = (response) => { 
     console.log(response); 
     const payload = { 
     id: response.id, 
     name: response.name, 
     email: response.email, 
     token: response.accessToken 
     } 
     return payload 
    } 

    class FacebookLogin extends Component { 
     co 
     login = (auth) => { 
      console.log("************Entering***************** ") 
      this.props.userLogin(auth, this.props.location.state ? this.props.location.state.nextPathname : '/') 
     }; 

     render() { 
      const { handleSubmit, submitting, theme } = this.props; 
      const muiTheme = getMuiTheme(theme); 
      const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme); 
      return (
       <MuiThemeProvider muiTheme={muiTheme}> 
        <div style={{ ...styles.main, backgroundColor: primary1Color }}> 
         <Card style={styles.card}> 
          <div style={styles.avatar}> 
           <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} /> 
          </div> 
          <form onSubmit={handleSubmit(this.login)}> 
           <CardActions> 
           <FacebookLogin 
            appId="1023727501002149" 
            autoLoad={true} 
            fields="name,email,picture" 
            callback={responseFacebook} 
            cssClass="my-facebook-button-class" 
            icon="fa-facebook" 
            /> 
           </CardActions> 
          </form> 
         </Card> 
         <Notification /> 
        </div> 
       </MuiThemeProvider> 
      ); 
     } 
    } 

    FacebookLogin.propTypes = { 
     ...propTypes, 
     authClient: PropTypes.func, 
     previousRoute: PropTypes.string, 
     theme: PropTypes.object, 
     userLogin: PropTypes.func.isRequired, 
    }; 

    FacebookLogin.defaultProps = { 
     theme: defaultTheme, 
    }; 

    const enhance = compose(
     reduxForm({ 
      form: 'signIn', 
      validate: (values, props) => { 
       const errors = {}; 
       return errors; 
      }, 
     }), 
     connect(null, { userLogin: userLoginAction }), 
    ); 

    export default enhance(FacebookLogin); 

https://www.npmjs.com/package/react-facebook-loginを使用して、残りの管理者にFacebookのログインを実装しようとしています。

このログインコンポーネントは、facebookLoginクラスで定義されたログイン機能に送信する必要がある、Facebookからの応答を取得しています。

本当に事前に

おかげでいただければ幸いコンポーネントに

ヘルプを使用して反応し、私は残りのadminでカスタムFacebookのログインページを作成することができますどのようにアドバイスをしてください！ :)

Answer 1

class EmailLogin extends Component { 
     //function which gets the reponse from the 
     responseFacebook = (response) => { 
      const payload = { 
      id: response.id, 
      name: response.name, 
      email: response.email, 
      token: response.accessToken 
      } 
      this.props.userLogin(payload, this.props.location.state ? this.props.location.state.nextPathname : '/') 
     }; 

     render() { 
      const { handleSubmit, submitting, theme } = this.props; 
      console.log("#### 1:", handleSubmit) 
      console.log("#### 2:", submitting); 
      const muiTheme = getMuiTheme(theme); 
      const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme); 
      return (
       <MuiThemeProvider muiTheme={muiTheme}> 
        <div style={{ ...styles.main, backgroundColor: primary1Color }}> 
         <Card style={styles.card}> 
          <div style={styles.avatar}> 
           <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} /> 
          </div> 
          <form onSubmit={handleSubmit(this.responseFacebook)}> 
           <CardActions> 
           <FacebookLogin 
            type="submit" 
            appId="1023727501002149" 
            autoLoad={true} 
            fields="name,email,picture" 
            callback={this.responseFacebook} 
            icon={<CircularProgress size={25} thickness={2} />} 
            /> 
           </CardActions> 
          </form> 
         </Card> 
         <Notification /> 
        </div> 
       </MuiThemeProvider> 
      ); 
     } 
    } 

    EmailLogin.propTypes = { 
     ...propTypes, 
     authClient: PropTypes.func, 
     previousRoute: PropTypes.string, 
     theme: PropTypes.object, 
     userLogin: PropTypes.func.isRequired, 
    }; 

    EmailLogin.defaultProps = { 
     theme: defaultTheme, 
    }; 

    const enhance = compose(
     reduxForm({ 
      form: 'signIn', 
      validate: (values, props) => { 
       const errors = {}; 
       return errors; 
      }, 
     }), 
     connect(null, { userLogin: userLoginAction }), 
    ); 

    export default enhance(EmailLogin); 

は------ UPDATED --------

Facebookの成分を反応させるには、関数名を呼び出し、コールバックPARAM、その関数があるべき

をresponseFacebbokましたフォーム提出時にトリガーされると、これは最終的にバックエンドAPIを呼び出すauthClientに応答をリダイレクトするのに役立ちます。