使用reactjs实现Facebook API登录 [英] Implement Facebook API login with reactjs

问题描述

我正在使用Facebook的Javascript SDK进行身份验证。我已经能够正确导入SDK，并在我的页面上放置一个Like按钮。但是，Facebook登录按钮必须包含在标签中：

I'm working on using Facebook's Javascript SDK for authentication. I've been able to import the SDK properly and put a Like button on my page. But, the facebook login button has to be wrapped in the tag:

<fb:login-button/>

我目前拥有 Facebook登录教程粘贴到我的index.html，我的项目中唯一的html文件，其中包含React应用程序。但是，我需要将具有实际登录按钮的最后一部分放入我的React组件中。当我尝试这样做时，我收到以下错误：

I currently have all of the code from the Facebook Login tutorial pasted into my index.html, the only html file in my project, which houses the React application. But, I need to put the last part, which has the actual login button, into my React component. When I tried to do that, I got the following error:

ReactifyError: /Users/ritmatter/reps/js/components/Signup.jsx: Parse Error: Line 82: Unexpected end of input while parsing file: /Users/ritmatter/reps/js/components/Signup.jsx
sdk.js:61 The "fb-root" div has not been created, auto-creating
ping?client_id=894010190618709&domain=localhost&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebo…:1 Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

如何让登录按钮有所反应？

How can I get the login button into react?

推荐答案

我已经弄清楚如何使用ReactJS修改Login API的Facebook教程。我希望这有助于其他任何人努力。

I have figured out how to modify the Facebook tutorial for the Login API with ReactJS. I hope this helps anyone else struggling with this.

首先，在您想要登录链接的反应组件中，包括以下代码：

Firstly, in the react component where you want the Login link, include this code:

componentDidMount: function() {
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<YOUR_APP_ID>',
      cookie     : true,  // enable cookies to allow the server to access
                        // the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.1' // use version 2.1
    });

    // Now that we've initialized the JavaScript SDK, we call
    // FB.getLoginStatus().  This function gets the state of the
    // person visiting this page and can return one of three states to
    // the callback you provide.  They can be:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. Not logged into Facebook and can't tell if they are logged into
    //    your app or not.
    //
    // These three cases are handled in the callback function.
    FB.getLoginStatus(function(response) {
      this.statusChangeCallback(response);
    }.bind(this));
  }.bind(this);

  // Load the SDK asynchronously
  (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'));
},

// Here we run a very simple test of the Graph API after login is
// successful.  See statusChangeCallback() for when this call is made.
testAPI: function() {
  console.log('Welcome!  Fetching your information.... ');
  FB.api('/me', function(response) {
  console.log('Successful login for: ' + response.name);
  document.getElementById('status').innerHTML =
    'Thanks for logging in, ' + response.name + '!';
  });
},

// This is called with the results from from FB.getLoginStatus().
statusChangeCallback: function(response) {
  console.log('statusChangeCallback');
  console.log(response);
  // The response object is returned with a status field that lets the
  // app know the current login status of the person.
  // Full docs on the response object can be found in the documentation
  // for FB.getLoginStatus().
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
    this.testAPI();
  } else if (response.status === 'not_authorized') {
    // The person is logged into Facebook, but not your app.
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this app.';
  } else {
    // The person is not logged into Facebook, so we're not sure if
    // they are logged into this app or not.
    document.getElementById('status').innerHTML = 'Please log ' +
    'into Facebook.';
  }
},

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
checkLoginState: function() {
  FB.getLoginStatus(function(response) {
    this.statusChangeCallback(response);
  }.bind(this));
},

handleClick: function() {
  FB.login(this.checkLoginState());
},

然后，在你的渲染方法中，确保你有一些HTML，调用handleClick：

Then, in your render method, make sure you have some HTML that will call that handleClick:

<a href="#" onClick={this.handleClick}>Login</a>

注意，这是与教程相同的代码，但放在ReactJS组件中。唯一的区别是，您必须有策略地约束这一点，使Facebook API功能成为您的反应组件的一部分。此登录将完成从FB.getLoginStatus（）提供的响应解析的响应消息。您还可以将令牌从该响应对象中取出，并将其发送到您的后端进行身份验证，例如 passport-facebook-token 。

Note, this is the same code from the tutorial, but placed in a ReactJS component. The only difference is that you have to bind this strategically to make the Facebook API functions part of your react component. This login will finish with a response message parsed from the response given by FB.getLoginStatus(). You can also take the token out of that response object and send it to your backend for authentication with something like passport-facebook-token.

这篇关于使用reactjs实现Facebook API登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！