Create a gist now

Instantly share code, notes, and snippets.

@gkueny /App.js
Last active Aug 20, 2017

What would you like to do?
//...
firstTokenFacebook(token) {
const url = `https://graph.facebook.com/me?access_token=${token}`;
fetch(url).then(response => {
if (response.status === 200) {
this.setState({
token
});
}
});
}
//...
//...
class App extends Component {
constructor(){
//...
this.firstTokenFacebook = this.firstTokenFacebook.bind(this);
}
//...
// On met à jour le token fb
firstTokenFacebook(token) {
this.setState({
token
});
}
render() {
const loginOrLogout = this.state.token
? <Route exact path="/logout" component={Logout} />
: <Route
exact
path="/login"
render={props =>
<Login {...props} firstTokenFacebook={this.firstTokenFacebook} />}
/>;
return (
//...
);
}
}
export default App;
//...
constructor() {
//...
this.logout = this.logout.bind(this);
}
logout() {
this.setState({
token: null
});
}
//...
render() {
const loginOrLogout = this.state.token
? <Route
exact
path="/logout"
render={props => <Logout {...props} logout={this.logout} />}
/>
: <Route
exact
path="/login"
render={props =>
<Login {...props} firstTokenFacebook={this.firstTokenFacebook} />}
/>;
//...
}
//...
//...
firstTokenFacebook(token) {
const url = `http://localhost:3001/login/${token}`;
fetch(url).then(response => response.json()).then(response => {
if (response.access_token) {
this.setState({
token: response.access_token
});
}
});
}
//...
//...
import Logout from './logout';
//...
class App extends Component {
constructor() {
super();
this.state = {
token: null
};
}
render() {
const loginOrLogout = this.state.token
? <Route exact path="/logout" component={Logout} />
: <Route
exact
path="/login"
render={props =>
//... nous en aurons besoin plus tard de passers des props customs
<Login {...props} />}
/>;
return (
<div className="App">
<Header token={this.state.token} />
<div className="main">
<Switch>
{loginOrLogout}
<Route path="/" component={Home} />
</Switch>
</div>
</div>
);
}
}
export default App;
import PropTypes from 'prop-types';
//...
const propTypes = {
token: PropTypes.string
};
const Header = props => {
const loginOrLogout = props.token
? <NavLink to="/logout" exact>
Déconnexion
</NavLink>
: <NavLink to="/login" exact>
Connexion
</NavLink>;
return (
<nav className="header">
<li>
<NavLink to="/" exact>
Home
</NavLink>
</li>
<li>
{loginOrLogout}
</li>
</nav>
);
};
Header.propTypes = propTypes;
//...
//...
const propTypes = {
history: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
firstTokenFacebook: PropTypes.func.isRequired
};
class LoginComponent extends Component {
componentDidMount() {
// Si le # est présent dans l'url
if (this.props.location.hash) {
// On récupère les éléments qui nous intéressent
const parsedResponse = this.props.location.hash.split('&');
const parsedResponseToken = parsedResponse[0].split('=');
if (
parsedResponseToken.length === 2 &&
parsedResponseToken[0] === '#access_token'
) {
// On récupère le token
const token = parsedResponseToken[1];
// On met à jour le token
this.props.firstTokenFacebook(token);
this.props.history.replace('/');
}
}
}
openDialogLogin() {
// ID de votre app Facebook
const APP_ID = '1531267713602324';
// URL de redirection (préalablement indiqué dans les parametres de l'app fb)
const REDIRECT_URI = 'http://localhost:3000/login';
// Url permettant d'appeler la boite de dialogue fb login
// On y indique l'id de notre app
// Le type de réponse ce l'on veux
// et l'url de redirection
const url = `https://www.facebook.com/v2.10/dialog/oauth?client_id=${APP_ID}&response_type=token&redirect_uri=${encodeURIComponent(
REDIRECT_URI
)}`;
// On ouvre dans la fenetre courante
window.open(url, '_self');
}
render() {
return (
<div className="login">
<button
onClick={this.openDialogLogin}
className="login-button-facebook"
>
Connexion à Facebook
</button>
</div>
);
}
}
//...
import React, {Component} from 'react';
import PropTypes from 'prop-types';
const propTypes = {
history: PropTypes.object.isRequired,
logout: PropTypes.func.isRequired
};
class LogoutComponent extends Component {
componentDidMount() {
this.props.logout();
this.props.history.replace('/');
}
render() {
return <div>Déconnexion..</div>;
}
}
LogoutComponent.propTypes = propTypes;
export default LogoutComponent;
var express = require('express');
var fetch = require('node-fetch');
var cors = require('cors');
var app = express();
app.use(cors());
const APP_ID = '1531267713602324';
const APP_SECRET = 'VOTE_CLE_SECRETE';
app.get('/login/:token', function(req, res) {
const token = req.params.token;
const urlLongToken = `https://graph.facebook.com/v2.10/oauth/access_token?grant_type=fb_exchange_token&client_id=${APP_ID}&client_secret=${APP_SECRET}&fb_exchange_token=${token}`;
// On échange le token contre un token de longue durée
fetch(urlLongToken)
.then(response => response.json())
.then(response => {
if (response.access_token) {
res
.status(200)
.send({
access_token: response.access_token
})
.end();
} else {
res.status(500).send({error: 'Il y a eu une erreur'}).end();
}
})
.catch(() => {
res.status(500).send({error: 'Il y a eu une erreur'}).end();
});
});
app.listen(3001, function() {
console.log('Example app listening on port 3001!');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment