Sujet : lier backend au Frontend react /nodejs
meruem92
Bonjour,
j'ai besoin de vous pleaaaase sur un projet où j'intériens en tant que Front, j'ai eu l'API qui a été créé par le dev-backend sur l'authentification (login, register) que ce soit avec son un mail ou par Google/Facebook.
Je n'ai pas su comment lier ses Routes avec le mon front, c'est à dire appeler par exemple la funciton Connexion (ci-dessous) sur mon composent, cette dérnière est assez complèxe et remplie de conditions, j'ai beau cherché sur Net, je n'ai pas pu le faire !!
voilà le code dans l'API pour la Connexion :
/**
* POST /api/connexion
*/
exports.connnexion = (req, res) => {
try{
var email = req.body.email;
var password = req.body.password;
//get email and password
if( ( (typeof email !== 'undefined') || (email === '') ) ||
( (typeof password !== 'undefined') || ( password === '') ) ){
//check email if Exist in DB
Account.find({email : email},function(err, account){
if (err){
resultats = {
"success": false,
"message": "Error, check email/password",
"result": ''
}
res.json(resultats);
}
else{
if((account[0].google.id)===undefined && (account[0].facebook.id)===undefined){//dont have google & facebook account
console.log('connexion classique');
if(account.length){
//if exist,
//get password of this account
if(bcrypt.compareSync(password,account[0].password)){//if password ok
//create new token
try{
jwt.sign({
account
},
'secretKey',
(err,token) => {
if(err){
resultats = {
"success": false,
"message": 'Error : '+ err,
"result": ''
}
res.json(resultats);
}
resultats = {
"success": true,
"message": "SUCCESS",
"result": token
}
res.json(resultats);
});
}catch(e){
resultats = {
"success": false,
"message": 'Error : '+ e,
"result": ''
}
res.json(resultats);
}
}
else{
resultats = {
"success": false,
"message": "Error, check email/password",
"result": ''
}
res.json(resultats);
}
}
else{
resultats = {
"success": false,
"message": 'Error : check email/password',
"result": ''
}
res.json(resultats);
}
}
else{
console.log('impossible de se connecter(google ou facebook)');
resultats = {
"success": false,
"message": "Error, check email/password",
"result": ''
}
res.json(resultats);
}
}
});
}
else{
resultats = {
"success": false,
"message": 'Error : check email/password',
"result": ''
}
res.json(resultats);
}
}catch(e){
resultats = {
"success": false,
"message": 'Error : '+ e,
"result": ''
}
res.json(resultats);
}
}
J'ai fait un truc de ce genre dans mon composent mais cela ne donne rien, il faut que l'user se connecte et soit redirigé vers ('http://localhost/gerercomptes'); par exemple:
constructor (props) {
super(props);
this.state = {
// name: "",
cnx_mail: '',
cnx_pwd: '',
sub_mail: '',
sub_pwd: '',
errors: {},
formErrors: {cnx_mail: '', cnx_pwd: '', sub_mail: '', sub_pwd: '' },
emailValid: false,
passwordValid: false,
formValid: false
}
this.handleUserInput = this.handleUserInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
fetch(`/api/connexion`)
.then(resultats => resultats.json())
.then(state => this.setState(state));
// this.props.history.push('http://localhost:3000/gerercomptes');
}
handleUserInput = (e) => {
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value},
() => { this.validateField(name, value) });
// this.setState({ [e.target.id]: e.target.value });
} sur POSTMAN, je tape l'email et mdp, après je reçois un Token que j'utilise pour d'autre function comme affichier la liste des user..(image ci-dessous)
SVP si quelqu'un pourrait m'aider cela fait plusieurs jours que je suis bloquée sur ce projet
Merci d'avance
Ressistance2
Je comprends pas vraiment le problème, le problème c'est que tu n'arrives pas à lancer le front et le back en même temps ? Si le back fonctionne avec postman pour récupérer les infos de la fonction la faut que tu fasses un fetch (je te conseille Axios en React). Je peux t'aider si c'est effectivement le problème sinon explique le mieux 
meruem92
hello,
désolée pour ce retard, les gens me répondent parfois tard dans d'autres forums et j'en ai pris l'habitude.. ^^"
c'est cool de m'avoir répondu, merci 
pour réexpliquer ce que je souhaite faire :
j'ai mon API que je dois la lier avec mon server,
exemple : j'ai ma function connexion() :
/**
* POST /api/connexion
*/
exports.connnexion = (req, res) => {
try{
var email = req.body.email;
var password = req.body.password;
//get email and password
if( ( (typeof email !== 'undefined') || (email === '') ) ||
( (typeof password !== 'undefined') || ( password === '') ) ){
//check email if Exist in DB
Account.find({email : email},function(err, account){
if (err){
resultats = {
"success": false,
"message": "Error : "+err,
"result": ''
}
res.json(resultats);
}
else{
if((account[0].google.id)===undefined && (account[0].facebook.id)===undefined){//dont have google & facebook account
console.log('connexion classique');
if(account.length){
//if exist,
//get password of this account
if(bcrypt.compareSync(password,account[0].password)){//if password ok
//create new token
try{
jwt.sign({
account
},
'secretKey',
(err,token) => {
if(err){
resultats = {
"success": false,
"message": 'Error : '+ err,
"result": ''
}
res.json(resultats);
}
resultats = {
"success": true,
"message": "SUCCESS",
"result": token
}
res.json(resultats);
});
}catch(e){
resultats = {
"success": false,
"message": 'Error : '+ e,
"result": ''
}
res.json(resultats);
}
}
else{
resultats = {
"success": false,
"message": "Error, check email/password",
"result": ''
}
res.json(resultats);
}
}
else{
resultats = {
"success": false,
"message": 'Error : check email/password',
"result": ''
}
res.json(resultats);
}
}
else{
console.log('impossible de se connecter(google ou facebook)');
resultats = {
"success": false,
"message": "Error, check email/password",
"result": ''
}
res.json(resultats);
}
}
});
}
else{
resultats = {
"success": false,
"message": 'Error : check email/password',
"result": ''
}
res.json(resultats);
}
}catch(e){
resultats = {
"success": false,
"message": 'Error : '+ e,
"result": ''
}
res.json(resultats);
}
}
et mon fichier connexion.jsx (je donne ici que la parite concerncée) :
constructor (props) {
super(props);
this.state = {
// name: "",
cnx_mail: '',
cnx_pwd: '',
joinByEmail: '',
items: [],
token : '',
redirectToReferrer:false,
errors: {},
formErrors: {cnx_mail: '', cnx_pwd: ''},
emailValid: false,
passwordValid: false,
formValid: false
}
this.handleUserInput = this.handleUserInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
//=======================================
handleSubmit = (event) => {
let user = JSON.parse(sessionStorage.getItem('result'));
const token = user.data.result;
event.preventDefault();
axios.get(API, { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(token);
this.setState({
items: res.data, /*set response data in items array*/
// isLoaded : true,
// redirectToReferrer: false
})})
}
ici ce que j'essai de faire c'est tout simplement me connecter avec des donnée (email, password) déjà existants dans ma DB tout en récurant le token qui sera stocké (je ne sais pas comment) pour qu'il soit utilisé lors de la récupération de la liste des users dans un autre composent
voilà, j'espère que c'est un peu clair :/
je sais que le code est à moitié faux, c'est pour cela que je demande de l'aide ^^'
merciii
boucif
J"y connais pas grand chose à react attention à tes check :
(account[0].google.id)===undefined si t'a rien dans account ça plante si ton acount 0 na pa de propriété google ça plante aussi ...
Fais plus de vérification
L'idée pour gérer un token par exemple est de stoker ce token dans le localstorage (avec une durée de validité), il est très simple de stocker dans le localstorage, attention à check que celui ci est dispo en mode navigation privée il est possible que celui-ci soit pas dispo.
https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage
Ensuite tu pourra réutiliser ce token dans toute ton app
meruem92
merci pour ton retour
enfait, la function Connexion va générer un token, et je dois récupérer ce dernier dans mon front pour que je le stoque dans le localstorage.
As-tu un mpyen de faire cela avec un fetch de '/api/connexion' ?
merci
boucif
En faite dans le résultat de ton fetch tu affectes ton token dans le localstorage, je t'ai donné un lien pour la gestion du localstorage
meruem92
hey,
oui j'ai eu une idée sur comment ça marche, mais le soucie c'est comment pourrais-je récupérer ce token qui est généré à chaque fois que l'user voudrait se connecter (en utilisant la function connexion que j'ai mis en haut) ??
Je saurai après comment le stocker dans un locastorage
Merci boucif
boucif
Déjà tu check sil y a un token dans le localstorage si c'est pas le cas tu le rediriges sur la page de connexion, après pour savoir si le token est expiré je te laisse gérer chacun sa solution.
meruem92
Hello Boucif ,
pourrais tu me dire pourquoi je n'arrive pas à afficher des élément dans le render en les récupérant avec .map :
constructor(props) {
super(props);
this.state = {
items: []
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
let { items } = this.state;
const TOKEN_STRING = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50IjpbeyJkYXRlQ3JlYXRpb24iOiIyMDE5LTEwLTA5VDIxOjU0OjE4LjQ5MVoiLCJyZXNldHBhc3N3b3JkdG9rZW4iOm51bGwsInJlc2V0cGFzc3dvcmRleHBpcmVzIjpudWxsLCJyb2xlIjoiYWRtaW4iLCJlbmFibGUiOnRydWUsIl9pZCI6IjVkOWU2NzdlMjY4Mjk3MWMxZmMzNzExZCIsImVtYWlsIjoibWlrYS5hY2hlbWxhbEBnbWFpbC5jb20iLCJwYXNzd29yZCI6IiQyYiQxMCRCZzRuT3JOTXpjLmIvSkJOS05pUlAuQmlNZC8uaDRDSEtpeTBudlYvdWltMGQzVndIbDlpcSIsInRpY2tldHMiOltdLCJnYWlucyI6W10sIl9fdiI6MH1dLCJpYXQiOjE1NzE1NzQyNzB9.DGgTpZnc_usLZOM2wIH4SQjyiNmnaNz4YRVnhLmk3nc"
fetch(`${API}/api/accounts`,{
headers :{
'authorization': `Bearer ${TOKEN_STRING}`,
}
})
.then(results => {
return results.json();
})
.then(data => {
const temp = data.result;
items = temp;
// localStorage.setItem('mymy', "fiss");
console.log(items);
console.log(items.length);
localStorage.setItem('tok', TOKEN_STRING);
const wow = localStorage.getItem('tok')
console.log(wow);
// console.log(TOKEN_STRING)
})
.catch(err => {
console.log("erroooor : ",err);
});
}
render() {
var { items} = this.state;
return(
{Array.isArray(items) && items.map(object => (
<p key={object.prenom}>{object.nom}</p>
))}
)
}
merci
boucif
Je peux pas t'aider, j'y connais rien à react 
Va sur developpez.com ou stackoverflow pour de l'aide
meruem92
Noooon 😭😭😭
personne ne répond sur developpez et stackoverflow ont un ptin d'exigence au niveau du contenu de description grrr x(
Merci Boucif 