score:5

Accepted answer

after a lot of work i have done this now i can login with facebook using react.js 

<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

i think it is useful for someone thank you


Related Query

More Query from same tag