Question

我正在尝试使用react-facebook-login package在ReactJS中实现Facebook登录按钮。使用提供的代码非常简单。

但是，在用户登录并且仍然存在有效令牌后，该按钮不会更改并继续显示“使用FACEBOOK登录”。我可以在console.log中看到响应，包括名称，图片， id ， accessToken ，用户ID ：

ButtonFacebookLogin.js：18

Object {name: "John Doe", picture: Object, id: "101560159xxxxxxx", 
accessToken: "EAAFdByROZC…5tDST3sxnhZASZBZ", userID: "101560159xxxxxxxx"…}

是应该自行更改还是应该更改ReactJS脚本中的代码以检查是否可以进行有效登录？

import React from 'react';
import FacebookLogin from 'react-facebook-login';

class ButtonFacebookLogin extends React.Component {
  constructor(props) {
    super(props);

    this.responseFacebook = this.responseFacebook.bind(this);
    this.user = null;
  };

  responseFacebook(response) {
    console.log(response);
    this.user = response.name;
    console.log(this.user);
  };

  componentClicked(response) {
    console.log(response);
  };

  render() {
    return (
      <FacebookLogin
        appId="383760232021913"
        autoLoad={true}
        fields="name,email,picture"
        scope="public_profile,user_friends"
        onClick={this.componentClicked}
        callback={this.responseFacebook}
      />
      // just here above the button always looks the same
    )
  }

对不起这个问题可能听起来很傻，因为我是ReactJS的新手:-)而且我在这个Facebook登录按钮包中找不到很多文档。

Answer 1

也许可以尝试一下，从travis媒体获取代码，建议将其签出

export default class Facebook extends Component {
    state = {
      isLoggedIn: false,
      userID: "",
      name: "",
      email: "",
      picture: ""
    };
  
    
    responseFacebook = response => {
       console.log(response);
  
      this.setState({
        isLoggedIn: true,
        userID: response.userID,
        name: response.name,
        email: response.clientSecret,
        picture: response.picture.data.url
      });
    };
  
    componentClicked = () => console.log("clicked");

    render() {
      let fbContent;

      if (this.state.isLoggedIn) {
        fbContent = (
          <div
            style={{
              width: "400px",
              margin: "auto",
              background: "#grey",
              padding: "20px"
            }}
          >
            <img src={this.state.picture} alt={this.state.name} />
            <h2>Welcome {this.state.name}</h2>
            Email: {this.state.email}
          </div>
        );
      } else {
        fbContent = (
          <FacebookLogin
            appId="304489330816284"
            autoLoad={false}
            fields="name,email,picture"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
           // scope="public_profile,user_friends,user_actions.Test"
          //  callback={this.responseFacebook}
          />
        );
      }
  
      return <div>{fbContent}</div>;
    }
  }
}

Answer 2

是的，您必须检查它是否已登录并更改textButton组件的FacebookLogin字段。

ReactJS Facebook使用react-facebook-login包登录

2 个答案: