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
Source: stackoverflow.com
Related Query
- Authentication with facebook google twitter using React.js
- Using google sign in button with react
- using google fonts in nextjs with sass, css and semantic ui react
- Using google sign in button with react 2
- Using google adsense with React + React Router
- CORS error in Node+react app with facebook authentication using passport
- SSO react-google-login with google on react app using a react component
- How can I specify authentication globally instead of defining on every page in Next js, I am using next-auth package with react query
- How to contact twitter api with client authentication using express as proxy and xhr as client
- React Memory Leakage with typescript using google firestore and react router
- Facebook Authentication Firebase with React JS - Providers Error
- Embedding React app in another website with Google Tag Manager using <script>
- Google authentication failed using firebase react hook
- Handle login using Google Authentication in system with client and server running on different port reactJS and nodeJS
- FaceBook Comment Plugin is not showing correctly when using with React
- Unable to read data from firestore by using login ID using google authentication in REACT.my data is saved in firestore with current used ID
- Django & React implementation using Google OAuth2 does not work with csrftoken
- Problems with react to translate words using google translate api
- google authentication pop up not working using firebase in react app
- I'm using google oauth with React js and it is loading google account and after i click on my profile popup get closed
- Using mixins vs components for code reuse in Facebook React
- Using state in react with TypeScript
- Testing React Functional Component with Hooks using Jest
- Using event.target with React components
- React with Typescript -- Generics while using React.forwardRef
- How to mock history.push with the new React Router Hooks using Jest
- Using onBlur with JSX and React
- Can I avoid forceUpdate() when using React with Backbone?
- Using Jest to mock a React component with props
- Dealing with an empty array when using .map() in React
More Query from same tag
- How can I imitate the look of the outline and label from Material-UI's outlined textfield?
- How to refactor a class as a hook to manage a stack in react?
- Why does redux only update on browser refresh?
- why componentdidmount called two times
- custom-environment-variables.js cannot be read error in react application
- Next.js and multiple module.exports options in next.config.js
- Getting this error: extraccion.map is not a function
- c3js multiple xy line chart with json data
- Set correct value for each property in an object
- Add the elements to an array by clicking in React
- html strings array convert to JSX
- I can't understand why and how are we passing something to this function. Selector question
- How to use Promise.all properly fetching data for React app
- react & redux - the component is rendering repeatedly due to api call placed in componentDidMount
- How can I reduce the bundle size in React App when only using Authenticator from Amplify UI?
- react typescript return value with asynchronous functions
- Protected page using react-router-dom doesn't work
- Retrieving a value from a child component back to the parent for a LIstGroup?
- React Formik Multi Select dropdown disabling all options when value array updates
- Absolute positioning of image based upon size of user's resolution (Gatsby)
- Testing a function inside a component with jest and testing-library
- Resolving promise in nodejs server after data comes from another call?
- Make sidebar (in React) take up 100% of the height of the page even when there's scrolling
- How to make React app preview on mobile?
- How to replace HTML images with GatsbyJS responsive images?
- How to throw an error when the age is less than 5 years in react useHookForm hook
- React-router component does not update on <Link> navigation
- How can I change a route in ReactJs depending on a timestamp?
- Dynamically insert script tag that will execute via Reactjs
- Chat Box UI not scrolling with react-bootstrap Accordion