Menu
EtoileAbonnementRSS
jeuxvideo.com  /  Tous les forums  /  Forum principal Informatique  /  Forum Programmation  / 

Topic lier backend au Frontend react /nodejs

Sujet : lier backend au Frontend react /nodejs

1
meruem92
meruem92
MP
11 octobre 2019 à 01:27:30

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); 
    }
}</code> 

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:3000/gerercomptes'); par exemple: 

<code>    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)

http://www.noelshack.com/2019-41-5-1570749840-capture-d-ecran-de-2019-10-11-01-13-03.png
SVP si quelqu'un pourrait m'aider cela fait plusieurs jours que je suis bloquée sur ce projet

Merci d'avance

Ressistance2
Ressistance2
MP
13 octobre 2019 à 15:42:10

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 :gni:

rasputin54
rasputin54
MP
14 octobre 2019 à 00:18:45

Je sais pas si pour react c'est pareil mais apelle ton API dans le store et les routes de ton front

meruem92
meruem92
MP
20 octobre 2019 à 02:09:54

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) :
<code>
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
})})
}

</code>
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
boucif
MP
20 octobre 2019 à 15:26:03

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
meruem92
MP
20 octobre 2019 à 23:07:07

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
boucif
MP
21 octobre 2019 à 09:31:55

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
meruem92
MP
21 octobre 2019 à 19:22:32

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
boucif
MP
21 octobre 2019 à 20:12:45

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
meruem92
MP
22 octobre 2019 à 13:43:46

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
boucif
MP
22 octobre 2019 à 14:42:53

Je peux pas t'aider, j'y connais rien à react :rire:
Va sur developpez.com ou stackoverflow pour de l'aide

meruem92
meruem92
MP
22 octobre 2019 à 17:46:52

Noooon 😭😭😭
personne ne répond sur developpez et stackoverflow ont un ptin d'exigence au niveau du contenu de description grrr x(
Merci Boucif :(

1
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : godrik, LGV
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

Boutique
Nintendo Switch avec paire de Joy-Con Rouge Néon et Bleu Néon Amazon 299,98€
Ring Fit Adventure pour Nintendo Switch Amazon 59,99€
Luigi's Mansion 3 Amazon 44,99€