使用React.js與Facebook Google Twitter進行身份驗證

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組件的代碼。現在，我想嘗試使用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>

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

我覺得對某人有用

使用React.js與Facebook Google Twitter進行身份驗證

問題描述

我為此創建了API：

1 個解決方案

解決方案1
5 已采納 2014-12-24 05:35:25

使用React.js與Facebook Google Twitter進行身份驗證

問題描述

我為此創建了API：

1 個解決方案

解決方案1 5 已采納 2014-12-24 05:35:25

解決方案1
5 已采納 2014-12-24 05:35:25