IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Récupérer des données JSON via AJAX après authentification via JWT


Sujet :

AJAX

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut Récupérer des données JSON via AJAX après authentification via JWT
    Bonjour à tous,

    Je suis confronté à un problème que je n'arrive pas à résoudre et qui en soit ne doit pas être bien compliqué...je vais essayer d'être le plus clair possible.
    Je suis garant d'un site qui est fait sous Wordpress et relié à une API et il y a une zone membre (des chauffeurs).
    Pour se connecter en tant que chauffeur, via un formulaire en modal, cette API requiert dans un premier temps une authentification via un JWT. Une fois le JWT récupéré en AJAX, on le décode et on fait un call pour récupérer les données du chauffeur via son ID avec mail, mot de passe et rôle accessoirement. Une fois récupéré on a une fonction PHP pour vérifier les infos et se connecter.

    Aujourd'hui, je dois récupérer un code qui est associé au profil du chauffeur (à son ID) et l'afficher sur une page une fois que le chauffeur est connecté donc.

    Voici la fonction Javascript pour se logger :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    function login(email, pass) {
            $.ajax({
                "async": true,
                "crossDomain": true,
                "url": "https://auth-service-prod.yuso-platform.com/driver/auth",
                "method": "POST",
                "headers": {"Content-Type": "application/json"},
                "processData": false,
                "data": "{\n    \"email\": \"" + email + "\",\n    \"password\": \"" + pass + "\"\n}",
                success: function (response, statut) {
                    var jwt = response['jwt'];
                    var decoded = jwt_decode(response['jwt']);
                    var iddriver = decoded['driver']['id'];
     
                    $.ajax({
                        "async": true,
                        "crossDomain": true,
                        "url": "https://api.yusofleet.com/api/v3/drivers/" + iddriver,
                        "method": "GET",
                        "headers": {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With", "Authorization": jwt, },
                        success: function (res, statut) {
                            var firstname = res['first_name'];
                            var lastnanme = res['last_name'];
                            var code = res['referral_code'];
                            var role = "driver_berline";
                            var is_berline = 0;
                            var is_zoe = 0;
     
                            for (var i = 0; i < res['available_vehicles'].length; i++) {
                                if (res['available_vehicles'][i]['model'] == 'zoe') {
                                    is_zoe++;
                                } else {
                                    is_berline++;
                                }
                            }
                            if (is_berline > 0 && is_zoe > 0) {
                                role = "driver_berlinezoe";
                            } else if (is_berline > 0 && is_zoe == 0) {
                                role = "driver_berline";
                            } else if (is_berline == 0 && is_zoe > 0) {
                                role = "driver_zoe";
                            }
     
                            $.ajax({
                                url: postmarcel.ajax_url,
                                type: 'post',
                                data: {
                                    action: 'login_driver',
                                    email: email,
                                    pass: pass,
                                    firstname: firstname,
                                    lastnanme: lastnanme,
                                    codeParrain: code,
                                    role: role},
                                success: function (response) {
                                    if (response.data) {
                                        $(".code").html("<p>" + code + "</p>");
                                        if (response.data.location)
                                            $(".form-login-pass-driver").css('display', 'none');
                                        $(".form-login-pass-success").html('<p class="modal-title">Redirection en cours...</p><center> Connexion à votre espace chauffeur</center>');
                                        window.setTimeout(function () {
                                            location.replace(response.data.location);
                                        }, 1000);
                                    } else {
                                        $(".form-login-pass-driver #bloc_error").html("<p>" + response + "</p>").css("display", "block");
                                    }
                                }
                            });
                        }, error: function (res, statut, erreur) {
                            $(".form-login-pass-driver #bloc_error").html("<p>Une erreur s'est produite, veuillez réessayer.</p>");
                        }
                    });
                }, error: function (response, statut, erreur) {
                    $(".form-login-pass-driver #bloc_error").html("<p>Email et/ou mot de passe saisi incorrect, veuillez vérifier et réessayer</p>");
                }
            });
        }
    Ici, la fonction PHP login_driver :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    add_action('wp_ajax_nopriv_login_driver', 'login_driver');
    add_action('wp_ajax_login_driver', 'login_driver');
     
    function login_driver() {
        $email = $_POST['email'];
        $pass = $_POST['pass'];
        $firstname = $_POST['firstname'];
        $lastnanme = $_POST['lastnanme'];
        $role = $_POST['role'];
     
        $userobj = new WP_User();
        $user = $userobj->get_data_by('email', $email);
        $user = new WP_User($user->ID);
     
        if ($user->ID == 0) {
            $userdata = array('user_email' => $email,
                'user_login' => $email,
                'user_pass' => $pass,
                'role' => $role,
                'first_name' => $firstname,
                'last_name' => $lastnanme);
            $new_user_id = wp_insert_user($userdata);
     
            $creds = array(
                'user_login' => $email,
                'user_password' => $pass,
                'remember' => true
            );
            $user = wp_signon($creds, false);
     
            if (is_wp_error($user)) {
                echo $user->get_error_message();
            } else {
                $data = array('location' => esc_url_raw('/profil-chauffeur/'));
                wp_send_json_success($data);
            }
        } else {
            $user_id = wp_update_user(array('ID' => $user->ID, 'user_pass' => $pass, 'role' => $role, 'first_name' => $firstname, 'last_name' => $lastnanme));
            $creds = array(
                'user_login' => $email,
                'user_password' => $pass,
                'remember' => true
            );
            $user = wp_signon($creds, false);
     
            if (is_wp_error($user)) {
                echo $user->get_error_message();
            } else {
                $data = array('location' => esc_url_raw('/profil-chauffeur/'));
                wp_send_json_success($data);
            }
        }
    }
    J'arrive à récupérer le code et l'afficher mais en renseignant manuellement le mail et mot de passe d'un compte comme ce que j'ai fait ci-dessous.

    L'idée serait donc de faire la même chose mais il faut que ce soit avec l'ID du chauffeur connecté. Je suis débutant dans ce domaine et j'ai retourné le problème mais je ne trouve pas.

    Je remercie d'avance les personnes qui voudront bien m'aider à résoudre ce problème :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <script>
     
        var settings = {
    	  "async": true,
    	  "crossDomain": true,
    	  "url": "https://auth-service-prod.yuso-platform.com/driver/auth",
    	  "method": "POST",
    	  "headers": {
    	    "Content-Type": "application/json"
    	  },
    	  "processData": false,
    	  "data": "{\n    \"email\": \"laetitia.tubery@gmail.com\",\n    \"password\": \"laetitiaTEST\"\n}"
    	}
     
    	$.ajax(settings).done(function (response) {
    	  console.log(response);
    	 	 console.log(response['jwt']); 
     
    	  var token = response['jwt'];
    	  var decoded = jwt_decode(response['jwt']);
     
    	  console.log(decoded);
     
    	  var iddriver = decoded['driver']['id'];
    	  console.log(iddriver);
     
     
    	  var set = {
    		  "async": true,
    		  "crossDomain": true,
    		  "url": "https://api.yusofleet.com/api/v3/drivers/"+iddriver,
    		  "method": "GET",
    		  "headers": {
    		  	"Authorization": response['jwt'],
    		  }
    		}
     
    		$.ajax(set).done(function (res) {
    			console.log(res);
    			$('.code').html('<p>' + res.referral_code + '</p>');
    		  console.log(res.referral_code);
    		});
     
    	});
     
    </script>

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    d'après le code que vous montrez, l'appel "driver/auth" demande l'adresse e-mail et mot de passe et retourne le code JWT.
    donc vous ne pouvez pas recevoir ce code uniquement à partir de l'identifiant de l'utilisateur. une solution serait de stocker ce code JWT dans wordpress avec les informations de l'utilisateur. mais il faudra regarder dans la documentation de yuso si ce code reste indéfiniment valide.

    une petite parenthèse : le code PHP qui traite l'appel AJAX permet à n'importe qui de créer un compte administrateur.
    il est possible de rajouter un code pour limiter la création de comptes aux 3 rôles qui commence par "driver..." mais là encore n'importe qui pourra créer un compte avec ces rôles.
    je pense que le soucis de sécurité vient du traitement en JavaScript. l'opération de test du mot de passe devrait se faire côté serveur en PHP (avec par exemple wp_remote_post)

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Bonjour Mathieu,

    Merci pour ces premiers éléments de réponse. Ça paraît logique de conserver le token soit en local storage soit dans un cookie ce qui permet de faire ensuite des appels sans avoir à s'authentifier...la doc n'est pas très clair mais j'ai pu discuter avec un dev back de Yuso qui m'a dit qu'un jeton est valable 24h environ.

    Par contre concrètement comment faudrait-il que je m'y prenne au niveau de mon code ? Je suis vraiment débutant dans ce domaine... Mais un exemple me permettrait de comprendre.

    Merci aussi pour la remarque sur la fonction PHP et la sécurité. Comme je viens de récupérer tout le site je n'ai pas fait attention à tout mais je vais remonter le problème.

    Encore merci en tout cas.

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    si c'est un site que vous avez récupéré en l'état, attendez vous à d'autre trous de sécurité comme cela.

    Citation Envoyé par Player_One Voir le message
    Merci pour ces premiers éléments de réponse. Ça paraît logique de conserver le token soit en local storage soit dans un cookie ce qui permet de faire ensuite des appels sans avoir à s'authentifier...la doc n'est pas très clair mais j'ai pu discuter avec un dev back de Yuso qui m'a dit qu'un jeton est valable 24h environ.
    donc ça voudrait dire qu'un pilote devra se reconnecter une fois par jour au minimum.
    quelles seront les fonctionnalités utilisées par les pilotes sur le site wordpress ?

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Oui je crois que je vais avoir quelques surprises...

    Il y a une page "espace chauffeur" sur WordPress sur laquelle les chauffeurs peuvent se connecter (via donc l'api de Yuso comme évoqué) et ils sont redirigés en cas de succès sur une page "profil chauffeur" sur WordPress. Sur cette page il y a un tableau de bord (via un menu spécifique pour les chauffeurs connectés) mais en fait il ne sert que de vitrine car toutes les fonctionnalités dont ils peuvent avoir accès sont du côté de Yuso qui s'est occupé de développer toute la partie back end. Donc quand un chauffeur connecté, sur Wordpress, clique sur "mes trajets" par exemple, il est redirigé vers Yuso où se trouve tout son vrai tableau de bord. J'espère être assez clair. À terme l'idée est d'intégrer toutes les fonctionnalités de Yuso sur la partie front, donc dans Wordpress.

    Aujourd'hui, quand on fait un appel Ajax au profil d'un chauffeur, on récupère la réponse en Json et il y a dedans son "code parrain". C'est ce fameux code parrain qu'il faut que j'arrive à récupérer et afficher sur une page spécifique lorsque n'importe quel chauffeur se connecte.

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    quand vous envoyez l'adresse e-mail et le mot de passe à "auth-service-prod.yuso-platform.com" est ce que ça connecte le chauffeur à yuso ? ou alors après être redirigé sur yuso, il doit saisir son mot de passe une 2e fois ?

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Hello Mathieu,

    Lorsque l'on envoie le mail et mot de passe à http://auth-service-prod.yuso-platform.com/ le chauffeur se connecte à Yuso et n'a pas besoin de se reconnecter lors des redirections, il est automatiquement loggé.

  8. #8
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    dans ce cas, cet appel devra rester coté client en JavaScript comme ça le cookie d'identification pour être envoyé au navigateur du chauffeur.

    donc si j'ai bien compris, le déroulement sera le suivant avec JavaScript
    - appel de "auth-service-prod..."
    - récupération du JWT
    - envoi du JWT au site WP avec AJAX

    ensuite à la réception de l'appel AJAX en PHP :
    - appel de "api.yusofleet.com" avec https://codex.wordpress.org/Function...wp_remote_post
    - cet appel vérifie que le JWT soit valide donc si les détails du chauffeurs sont renvoyés à cette étape, c'est que le JWT est correct et que ce n'est pas un utilisateur malveillant qui essaye de pirater le site.
    - ensuite vous enregistrez les données du chauffeur ou le créez comme dans le code PHP actuel.
    - c'est à cette étape que vous pouvez enregistrer le code de parrainage de l'utilisateur connecté avec https://developer.wordpress.org/refe...date_user_meta

  9. #9
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Bonsoir Mathieu,

    Désolé de répondre si tard je n'avais pas vu la notification...

    Cela me semble assez clair dans le déroulé et je vous remercie pour le temps consacré. Je pense avoir saisi ce qu'il me reste à faire.
    La seule interrogation que j'ai serais pour envoyer le Jwt dans Wordpress mais je devrais trouver.

    Je vais partir dans ce sens et essayer ça dès demain

    Je vous tiendrais au courant.
    Encore merci.

  10. #10
    Futur Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2018
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2018
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Hello Mathieu,

    Désolé de revenir si tard ! Simplement un message pour vous informer que j'ai trouvé la solution grâce à vos indications et je tenais à vous remercier.

    A+

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Récupérer des données avec json
    Par Rony Rauzduel dans le forum AJAX
    Réponses: 4
    Dernier message: 15/10/2012, 18h37
  2. Réponses: 5
    Dernier message: 09/01/2012, 10h19
  3. Réponses: 3
    Dernier message: 28/01/2007, 20h25
  4. Récupérer des données via usb
    Par Palca dans le forum Langages de programmation
    Réponses: 1
    Dernier message: 12/01/2006, 15h33
  5. Récupérer des données via le port usb
    Par matmuth dans le forum C++Builder
    Réponses: 12
    Dernier message: 11/05/2005, 17h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo