Question

我正在通过我的应用中的Facebook和Google+等社交网站进行身份验证。我选择了React.js进行查看。

这是我的代码：

<body>
  <div id="Login-widget"></div>
  <script type="text/jsx">
    var Login = React.createClass({
      render: function() {
        return (
          <ul className="info nav nav-pills nav-stacked" id="profile-accordion">
            <li className="panel">
              <a href="#" data-parent="#profile-accordion" data-toggle="collapse">
                <span className="glyphicon glyphicon-chevron-down pull-right" />
                Logged with WRIO
              </a>
              <div className="in" id="profile-element">
                <div className="tickets">
                  <div className="media thumbnail">
                    <div className="col-xs-12 col-md-6 col-lg-5">
                      <img src="https://avatars2.githubusercontent.com/u/604410?v=3&s=460" className="pull-left" />
                      <ul className="details">
                        <li>Name: Alexey Anshakov</li>
                        <li>Registered: 22 Jun 2013</li>
                        <li>Rating: 244</li>
                        <li>Followers: 1,634</li>
                        <li>Posts: 1,634</li>
                      </ul>
                    </div>
                    <div className="col-xs-12 col-md-6 col-lg-7">
                      <div className="media-body">
                        Disclaimer: We start a series of stories describing various issues and problems that are related for the most part to the Internet, and our vision of possible ways to solve them. Those will often be followed by previews of projects mentioned in the stories. Keep in mind: some of them might change, some will remain just our fantasy; at this moment we are a small team, but with a great desire to change this world for the better or at least a little bit.
                      </div>
                    </div>
                  </div>
                  <div className="col-xs-12 col-md-6 col-lg-7 social-login">
                    <a href="#" className="fb">Login with facebook</a>
                    <a href="#" className="gp" >Login with Google Plus</a>
                    <a href="#" className="tw">Login Wiht Twitter</a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        );
      }
    });

    React.renderComponent(<Login />, document.getElementById('Login-widget'));  // Your code here
  </script>
</body>

这是我使用Login React Component的代码现在我想尝试使用Facebook，Google +和Twiiter进行身份验证。

我为此创建了我的API：

"api": {
  "twitter": {
    "consumerKey": "value",
    "consumerSecret": "value,
    "token": "value",
    "tokenSecret": "value"
  },
  "facebook": {
    "clientId": "value",
    "clientSecret": "value",
    "callbackUrl": "url"
  },
  "google": {
    "clientId": "value",
    "clientSecret": "value",
    "callbackUrl": "url"
  }
}

请帮助我：如何在JSX代码中使用这些API？

Answer 1

经过大量工作后，我已经完成了这项工作现在我可以使用React.js登录Facebook

<body>
<button class="connect">Connect</button>
<div class="target"></div>
<div id="fb-root"></div>
<script type="text/jsx">

  /**
   * @jsx React.DOM
   */

   var Profile = Backbone.Model.extend({
    defaults : {
      name    : null,
      gender  : null,
      picture : null
    }
  });

  var CardComponent = React.createClass({
    componentWillMount : function() {
      profile.on("change", (function() {

        this.forceUpdate();

      }.bind(this)));
    },
    componentWillUnmount : function() {
      profile.off("change");
    },
    render : function() {
      return (
        <div className="card">
          <div className="picture">
            <img src={this.props.profile.get("picture")} />
          </div>
          <div className="name">
            {this.props.profile.get("name")}
            <small>
              ({this.props.profile.get("gender")})
            </small>
          </div>
        </div>
      );
    }
  });

  var connect = document.querySelector(".connect");
  var target  = document.querySelector(".target");
  var profile = new Profile();
  var fetchProfile = function() {
    React.renderComponent(
      <CardComponent profile={profile} />,
      target
    );

    FB.api("/me", "get", {}, function(result) {
      profile.set("name", result.name);
      profile.set("gender", result.gender);
    });

    var params = "?redirect=false&width=200&height=200";

    FB.api("/me/picture" + params, "get", {}, function(result) {
      profile.set("picture", result.data.url);
    });
  };

  var login = function() {
    FB.login(function() {
      fetchProfile();
    });
  };

  window.fbAsyncInit = function() {
    FB.init({
      appId  : "238316539647012",
      status : true,
      xfbml  : true
    });

    connect.addEventListener("click", function() {
      login();
    });

    FB.Event.subscribe("auth.authResponseChange", function(response) {
      if (response.status === "connected") {
        fetchProfile();
      }
    });
  };

  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, "script", "facebook-jssdk"));
</script>

我在本教程中使用了backbone.js

我认为这对某人有用谢谢

使用React.js通过facebook google twitter进行身份验证

我为此创建了我的API：

1 个答案: