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

Version imprimable

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:

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:

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:

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>

21/07/2018, 08h22
mathieu

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)
21/07/2018, 16h26
Player_One

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.
21/07/2018, 17h09
mathieu

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

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 ?
21/07/2018, 19h08
Player_One

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.
22/07/2018, 00h24
mathieu

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 ?
22/07/2018, 11h22
Player_One

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é.
22/07/2018, 14h25
mathieu

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
22/07/2018, 21h42
Player_One

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.
02/08/2018, 13h50
Player_One

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+