admin管理员组文章数量:1023263
I am working on authentication by social sites like Facebook and Google+ in my app. I have chosen React.js for view.
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=";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.
I have created my API for this:
"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?
I am working on authentication by social sites like Facebook and Google+ in my app. I have chosen React.js for view.
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./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.
I have created my API for this:
"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?
Share Improve this question edited Jan 7, 2017 at 20:03 Bart Riordan 4343 gold badges8 silver badges23 bronze badges asked Dec 23, 2014 at 7:43 Manjeet SinghManjeet Singh 2,4081 gold badge18 silver badges39 bronze badges 2- You use them no differently than you would use any asynchronous api or library, and there are a variety of ways to do that. You can find examples all around the internet and by seearching reactjs async, reactjs ajax, etc. here. – Brigand Commented Dec 23, 2014 at 8:16
- I am searching on internet regrading these topic but still can't found something related to this topic have any link for reference? – Manjeet Singh Commented Dec 23, 2014 at 9:15
1 Answer
Reset to default 5After 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({
ponentWillMount : function() {
profile.on("change", (function() {
this.forceUpdate();
}.bind(this)));
},
ponentWillUnmount : 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/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
I am working on authentication by social sites like Facebook and Google+ in my app. I have chosen React.js for view.
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=";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.
I have created my API for this:
"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?
I am working on authentication by social sites like Facebook and Google+ in my app. I have chosen React.js for view.
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./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.
I have created my API for this:
"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?
Share Improve this question edited Jan 7, 2017 at 20:03 Bart Riordan 4343 gold badges8 silver badges23 bronze badges asked Dec 23, 2014 at 7:43 Manjeet SinghManjeet Singh 2,4081 gold badge18 silver badges39 bronze badges 2- You use them no differently than you would use any asynchronous api or library, and there are a variety of ways to do that. You can find examples all around the internet and by seearching reactjs async, reactjs ajax, etc. here. – Brigand Commented Dec 23, 2014 at 8:16
- I am searching on internet regrading these topic but still can't found something related to this topic have any link for reference? – Manjeet Singh Commented Dec 23, 2014 at 9:15
1 Answer
Reset to default 5After 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({
ponentWillMount : function() {
profile.on("change", (function() {
this.forceUpdate();
}.bind(this)));
},
ponentWillUnmount : 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/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
本文标签： javascriptAuthentication with facebook google twitter using ReactjsStack Overflow
版权声明：本文标题：javascript - Authentication with facebook google twitter using React.js - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745598777a2158331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论