文章/答案/技术大牛

发布

社区首页 >问答首页 >基于React.js的facebook google twitter认证

问基于React.js的facebook google twitter认证
EN

Stack Overflow用户

提问于 2014-12-23 07:43:46

回答 1查看 4.7K关注 0票数 2

我正在通过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？

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-24 05:35:25

在做了很多工作之后，我现在可以用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

我想这对某人来说是有用的谢谢

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27616087

复制

相似问题

问基于React.js的facebook google twitter认证
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于React.js的facebook google twitter认证EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于React.js的facebook google twitter认证
EN