score:5
Accepted answer
<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>
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 to Change the Color of the typography with a certain condition
- [0,1,2,3].map works fine, array.map gives strange results
- How to make Array to Variable
- Validating ReactJS inputs while using BackboneJS models
- Creating a DatePicker from CDN with React API
- Convert string to React JSX
- Redux - Wrap actions inside another action in mapDispatchToProps
- Update a state variable only on loading the page for the first time in react js
- create-react-app application renders in npm start, but shows only react-empty: 1 in npm build
- How to access environment variables in react from docker and webpack
- How to make rest api in to to display data in react js
- Display item details after clicking Link in React Router
- Show different component when clicks the button in Reactjs
- Why do we need reactjs-bootstrap if there's easy way?
- React: how to overwrite state
- Why enclose actions returned by Redux action creators in brackets?
- data.json() is not a function (React)
- What am I missing in this Alert React Bootstrap example?
- How to retrieve and display images in reactjs that are stored on the server side using multer and the path is stored in the database
- React useState didn't catch previous state
- How can I make my input field prefilled with data and editable on page load?
- How to hide a certain column of a table using antd?
- ESLint broken: Rules with suggestions must set the `meta.hasSuggestions` property to `true`
- Recommended way to name and organize sub-components (sub-folders) in React
- How to dynamically generate pair of input fields using reactjs
- Limit the upload number of image in reactjs
- Get array objects - React
- why does using JSON.parse cause a cross origin error in reactjs?
- You should call navigate() in a React.useEffect(), not when your component is first rendered. (React+ReactROuterDom v6)
- Select React Input