使用React.js与Facebook Google Twitter进行身份验证

Question

I am working on authentication by social sites like Facebook and Google+ in my app. 我正在通过我的应用中的Facebook和Google+等社交网站进行身份验证。 I have chosen React.js for view. 我选择了React.js进行查看。

Here is my code: 这是我的代码：

<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>

This is my code using my Login React Component Now I want to try authentication using Facebook, Google+,and Twiiter. 这是使用我的Login React组件的代码。现在，我想尝试使用Facebook，Google +和Twiiter进行身份验证。

I have created my API for this: 我为此创建了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"
  }
}

Please help me: how can I use these APIs in JSX code? 请帮助我：如何在JSX代码中使用这些API？

Answer 1

After a lot of work i have done this Now i can Login with Facebook Using React.js 经过大量工作后，我现在可以使用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>

I have use in this tutorial backbone.js 我在本教程中使用了ribs.js

I think it is useful for someone Thank you 我觉得对某人有用

使用React.js与Facebook Google Twitter进行身份验证

问题描述

I have created my API for this: 我为此创建了API：

1 个解决方案

解决方案1
5 已采纳 2014-12-24 05:35:25

使用React.js与Facebook Google Twitter进行身份验证

问题描述

I have created my API for this: 我为此创建了API：

1 个解决方案

解决方案1 5 已采纳 2014-12-24 05:35:25

解决方案1
5 已采纳 2014-12-24 05:35:25