Discussion :

[CharleLéo]

Bonjour
Dans mon appli web (côté client uniquement), j''utilisé une api rest. Je me connecte avec mes identifiant, l'api me renvoi un jeton d'autorisation. Mon problème est le suivant: une fois le jeton obtenu, je veux afficher certaines informations données par l'api.
Seul souci, le get à besoin du jeton.
Ma question est la suivante : comment puis je transmettre le jeton de page en page html ( je suis toujours côté client).
J'ai lu des articles sur la technique du local storage mais il semble qu'il ne faut pas l'utiliser avec des données sensibles.
Qu'en pensez vous ? Est ce que même côté client je ne dois pas l'utiliser ? Y a t'il une autre technique ?
Merci d'avance

[Watilin]

Coucou,

l’API t’a envoyé un jeton côté client, il est fait pour être utilisé côté client. Sans localStorage ou cookies, tu t’interdis de changer de page, tu es donc sur une single-page app. Dans tous les cas, que ton jeton se trouve dans le localStorage ou simplement dans une variable JS, il peut être bidouillé par les utilisateurs. Il n’y a donc pas plus de risque à le stocker dans le localStorage ou ailleurs, tant que tu ne fais pas d’énorme bourde (comme par exemple l’afficher à l’écran, où un collègue de bureau indiscret pourrait le voir ; ou bien envoyer une requête contenant le jeton à une mauvaise adresse).

Normalement le jeton n’est valide que pour une courte période, prends soin de le supprimer quand tu sais qu’il ne va plus servir.

[CharleLéo]

bonjour,

voila mes js de connection et de récupération des données utilisateur :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
$('#bandeau-alerted').hide();
// vider sessionStorage
 
var bt=document.getElementById('btvalider');// 
var btinit=document.getElementById('bt-init');
 
sessionStorage.removeItem('token');// effacer l'ancien jeton
sessionStorage.removeItem('utilisateur'); // effacer l'ancien utilisateur
// remettre à vide les inputs du formulaire
document.querySelector("input[name='identifiant']").value=null;
document.querySelector("input[name='codeEntreprise']").value=null;
document.querySelector("input[name='password']").value=null;
 
// retourne objet XMLHttpsRequest
function getXMLHttpRequest() 
{
	if (window.XMLHttpRequest || window.ActiveXObject) 
	{
		if (window.ActiveXObject) 
		{
			try 
			{
				return new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch(e) 
			{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else 
			{
			return new XMLHttpRequest(); 
			}
	} else 
		{
			alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
			return null;
		}
}
 
// récuperer le token, sauvegarde dans sessionStrorage
function RecupToken(xhr,ident,token)
{
	// récuperer objet XMLhttpRequest
	xhr=getXMLHttpRequest();
	xhr.open( "POST", 'https://www.kizeoforms.com/rest/v3/login',  true); 
	xhr.setRequestHeader('Accept','application/json');
	xhr.setRequestHeader('Content-Type','application/json');
	xhr.onreadystatechange  = function() 
	{ 
		if (xhr.readyState === 4 ) 
		{
			if (xhr.status === 200) 
			{
				$('#bandeau-alerted').hide(); // effacer le bandeau alerte dans le html
				sessionStorage.setItem('stToken',xhr.responseText);// stokage du jeton
			} else
				{
					$('#bandeau-alerted').show(); // afficher bandeau si identifiant, mdp et code entreprise pas bon
				}
		};
 
	}
	// envoyer la requete
	xhr.send(ident);
}
 
// recuperer utilisateur 
function RecuplisteInfoUtilisateur(xhr,token,identifiant)
{
	xhr=getXMLHttpRequest();
	xhr.open('GET','https://www.kizeoforms.com/rest/v3/users',  true); 
	xhr.setRequestHeader('Accept','application/json');
	xhr.setRequestHeader('Content-Type','application/json');
	xhr.setRequestHeader('Authorization',token);
	xhr.onreadystatechange=function()
	{
	if (xhr.readyState === 4 ) 
		{
			if (xhr.status === 200) 
			{
			sessionStorage.setItem('stListeUtilisateur',xhr.responseText);// stockage de tous les utilisateurs
			} 
		};
 
	}
	xhr.send();
}
 
// bouton valider de la page HTML
bt.addEventListener('click', function() 
	{
		// 
		var xhr,ident,token,listeInfoUtilisateur,objListeInfoUtilisateur,obj,utilisateurConnecte;
		var identifiant=document.querySelector("input[name='identifiant']").value;
		var codeEntreprise=document.querySelector("input[name='codeEntreprise']").value;
		var mdp=document.querySelector("input[name='password']").value;
		//  creation objet javascript avec les données de connection
		ident=JSON.stringify({"user": identifiant, "password": mdp, "company": codeEntreprise});
		// appel fonction pour récupérer valeur jeton
		RecupToken(xhr,ident);
		// stockage du jeton dans variable
		token=sessionStorage.getItem('stToken');
		// effacer jeton du sessionStorage
		sessionStorage.removeItem('stToken');
		// parser jeton
		token=JSON.parse(token);
		// récuperer tous les utilisateurs
		RecuplisteInfoUtilisateur(xhr,token.data['token'],identifiant);
		//sauvegarder de toutes les données utilisateurs 
		listeInfoUtilisateur=sessionStorage.getItem('stListeUtilisateur');
		// effacer du sessionStorage listeInfoUtilisateur
		sessionStorage.removeItem('stListeUtilisateur');
		// parser
		objListeInfoUtilisateur=JSON.parse(listeInfoUtilisateur);
		// recuperer l'utilisateur désirée , info dans input identifiant page connection HTML
		for(var i in objListeInfoUtilisateur.data.users)
			{
				obj = objListeInfoUtilisateur.data.users[i];
				if (obj.login===identifiant)
					{
						break;
					}
			}
		utilisateurConnecte=obj.first_name+' '+obj.last_name;
		// utilisateur trouvé, sauvegarde dans sessionStorage
		sessionStorage.setItem('stUtilisateurConnecte',utilisateurConnecte);
		utilisateurConnecte=sessionStorage.getItem('stUtilisateurConnecte');
		// effacer
		sessionStorage.removeItem('stUtilisateurConnecte');
		// affichage utilisateur
		alert(utilisateurConnecte);
	}
);
//bouton initialiser
btinit.addEventListener('click', function() 
{
	$('#bandeau-alerted').hide();
});

Lorsque je clique sur le VALIDER dans ma page HTML, au premier coup, j'ai un message dans la console erreur token est null. Puis aprés deux autres clicks, Alert(UtilisateurConnecte) fonctionne.

D'après ce que j'ai compris, lorsque la requête est envoyé, le code js continu à dérouler.
comment faut il que je fasse, pour avoir un alert au premier click ?

merci

[Watilin]

Utilise getJSON de jQuery, ça sera beaucoup plus simple

[CharleLéo]

Je n'y connais rien JQuery.

Par contre, j'ai compris pourquoi, ça fonctionnait au bout du troisième click :

une fois la requête envoyée, et comme on est en envoi asynchrone, le temps que le serveur réponde, on est déjà à la fin du code dans le bt.addEventListener.
Pour y remédier deux solutions : on passe en mode synchrone (on attend que le serveur réponde pas une bonne solution) ou alors , on fait le traitement désiré une fois qu'on à le xhr.readyState=4 et 200 (ceux que j'ai fait)

A+

[Watilin]

Tu as fait le bon choix.

Je te suggérais une méthode jQuery parce que tu as des bouts de jQuery dans ton code, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#bandeau-alerted').hide();

Mais tu as aussi des bouts de JavaScript « pur ». Je te conseille de choisir l’un des deux, ça ne rend pas les choses faciles de mélanger.

Une remarque à propos de l’ActiveX : ça ne concerne qu’IE6 !
IE7 connaît XMLHttpRequest, et il est déjà bien vieux. Jette un œil à cette table d’usage relatif des navigateurs et tu comprendras que tu peux sans remords te débarrasser de ces try/catch qui encombrent ton code.

La question de l’incompatibilité d’un navigateur est bien plus profonde qu’un simple alert que, souvent, l’utilisateur ne comprendra même pas. Comme souvent dans le monde de l’informatique, il est plus sage de chercher une bibliothèque tierce qui a été codée et testée avec soin, plutôt que recoder le truc soi-même et risquer de se gourer. Notifier d’une bonne façon un utilisateur que son navigateur est obsolète, c’est le problème auquel s’est attaqué l’initiative Browser-Update.org, je te conseille d’y jeter un œil.

Mon grand-père comprendra mieux ça plutôt qu’une fenêtre qui paralyse la page pour lui dire « votre navigateur ne supporte pas XMLHttpRequest »…