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

Question

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

我正在通过我的应用通过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>

Run Code Online (Sandbox Code Playgroud)

这是我使用LoginReact组件的代码。现在，我想尝试使用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"
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Man*_*kur 5

经过大量工作后，我现在可以使用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>

Run Code Online (Sandbox Code Playgroud)

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

我觉得对某人有用

归档时间：	11 年，4 月前
查看次数：	4436 次
最近记录：	9 年，4 月前