使用AWS Cognito在ReactJS中实现FB SDK

时间:2017-06-07 04:34:51

标签: reactjs facebook-javascript-sdk amazon-cognito

单击按钮时,显示以下错误。

  

FB.login()在FB.init()之前调用。

我做错了什么?我发现在互联网上,大多数人也是这样做的,不是吗?我应该在componentWillMount中初始化SDK吗?

这是代码......

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Radium from 'radium';
import { facebook } from '../../constants/config';

class FacebookLogin extends Component {
  constructor() {
    super();
    this.facebookClick = this.facebookClick.bind(this);
  }

  componentDidMount() {
    window.fbAsyncInit = function() {
      FB.init({
        appId             : facebook.appId,
        autoLogAppEvents  : true,
        status            : true,
        xfbml             : true,
        version           : facebook.appVersion
      });

    }.bind(this);

    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }

  facebookClick(e) {
    e.preventDefault();
    console.log('Facebook Click');
    FB.login(function (response) {

  // Check if the user logged in successfully.
  if (response.authResponse) {

    console.log('You are now logged in.');

    // Add the Facebook access token to the Cognito credentials login map.
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'IDENTITY_POOL_ID',
      Logins: {
        'graph.facebook.com': response.authResponse.accessToken
      }
    });

    // Obtain AWS credentials
    AWS.config.credentials.get(function(){
        // Access AWS resources here.
    });

  } else {
    console.log('There was a problem logging you in.');
  }

});
  }

  render() {
    return (
        <a className="ui facebook button fluid" onClick={this.facebookClick}>
        <i className="facebook icon" style={comStyles().buttonFacebookIcon}></i>
        SIGN IN WITH FACEBOOK
        </a>
    );
  }
}

const RadiumHOC = Radium(FacebookLogin)

function mapStateToProps(state){
  return {
  }
}

export default connect(mapStateToProps)(RadiumHOC)

0 个答案:

没有答案