A voir également:
- Mot de passe et validation
- Identifiant et mot de passe - Guide
- Voir mot de passe wifi android - Guide
- Mot de passe administrateur - Guide
- Ethernet n'a pas de configuration ip valide - Guide
- Trousseau mot de passe iphone - Guide
5 réponses
jordane45
Messages postés
38305
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 novembre 2024
4 705
Modifié le 10 févr. 2022 à 21:10
Modifié le 10 févr. 2022 à 21:10
Bonjour,
Déjà .. sache que le javascript est "lisible" par n'importe qui depuis son navigateur web...
Donc gérer des authentifications comme ça c'est une vraie passoire..
Quoi qu'il en soit,
Il faut déjà identifier tes input .. via un ID ou un NAME ou une CLASS...
De là, tu peux les cibler via la fonction document.querySelector()
puis en lire le contenue via la méthode value
par exemple,
Puis la comparaison se fait via un if/else
Déjà .. sache que le javascript est "lisible" par n'importe qui depuis son navigateur web...
Donc gérer des authentifications comme ça c'est une vraie passoire..
Quoi qu'il en soit,
Il faut déjà identifier tes input .. via un ID ou un NAME ou une CLASS...
De là, tu peux les cibler via la fonction document.querySelector()
puis en lire le contenue via la méthode value
par exemple,
var monInput = document.querySelector("#iddemoninput").value;
Puis la comparaison se fait via un if/else
var motdepassatrouver = "test"; if (monInput ==motdepassatrouver ) { //ok }else{ //ko }
Salut,
le code n'est pas si mal pour quelqu'un qui ne fait pas de JavaScript.
Le premier en tout cas, pourquoi changer de méthode et insérer du JQuery pour effectuer le même type d'action(détecter le clic)? Autant utiliser toujours la même chose en modifiant pour s'adapter.
Bon pour commencer en programmation le plus simple c'est de réfléchir au différentes étapes dans l'ordre de ce qui doit arriver.
Cela s'appelle faire un algorithme.
1) L'utilisateur peut rentrer son identifiant et mot de passe.
De ce côté là pas de problème pour vous je suppose, il s'agit d'un simple formulaire <form> avec deux champs de saisie(le type input password si on veut masquer la saisie) et un bouton valider ou un <input type =submit >
Un formulaire ça sert à envoyer des informations donc le programme va pouvoir les recevoir. Il y aura une remarque importante sur le sujet mais comme elle concerne aussi le point suivant j'en parle plus tard et n'a pas vraiment de rapport avec l'algorithme(de la logique humaine 'pure') mais par rapport aux outils techniques.
2)l'identifiant de l'utilisateur est cherché (dans la base de données je suppose).
2a) l'identifiant n'est pas dans la base de données
Il faut donc inscrire le message correspondant et pas la peine d'aller plus loin, fin du processus/programme.
2b)l'identifiant existe et on(le programme plutôt) récupère le mot de passe.
3)le mot de passe de la base de donnée est comparé à celui obtenu par le formulaire.
3a) le mot de passe ne correspond pas.
Pas la peine d'aller plus loin, la seule action à faire est d'avertir que le mot de passe est erroné.
3b) le mot de passe saisi et celui obtenu dans la base sont identiques donc c'est validé.
4) On renvoi vers les pages de connexion privés(accessible uniquement en étant identifiés).
J'en arrive à ma remarque importante.
JavaScript ne peut suffire dans ce cas où alors rien n'est sécurisé et n'importe qui avec un minimum de connaissances de JavaScript peut facilement passer outre le mot de passe et forcer la validation ce qui n'est pas génial en matière de sécurité.
JavaScript fonctionnant sur serveur il ne peut pas accéder à la base de données et le pis aller est d'utiliser un fichier texte qui contiendra les identifiants et mots de passe.
Solution pas satisfaisante car elle rends impossible de maintenir le fichier texte(imaginez si vous devez écrire à la main les identifiants et mots de passe de chaque utilisateur lorsqu'il s'enregistre, cela peut aller pour une dizaine de personnes sur plusieurs semaines mais au delà ça devient vite ingérable s'il y a 100, 1000 inscrits ou simplement des inscriptions régulièrement.
Surtout que chaque inscrit devra attendre que l'administrateur rajoute son identifiant et son mot de passe pour qu'ils puisse avoir accès au services.
Bref possible dans la théorie mais pas dans la réalité.
Pour cela(la sécurité et l'automatisation) il faut que toutes ces étapes soient faites du côté serveur, donc avec PHP et une base de données.
Une base de données c'est l'équivalent d'un gros fichier texte mais avec des outils(un langage de programmation SQL) et une structure(des tables de données) qui vont considérablement simplifier les traitements(recherches, tris, filtres, ajout, modification etc...).
C'est donc la solution à utiliser et pour cela comme je voit que votre page est nommé .php le langage serveur(PHP donc) fera la passerelle entre la page HTML et la base de données.
C'est l'utilisation de 3 éléments matériels qui permet cela(les pages dynamiques , dynamique n'ayant rien à voir avec l'animation mais avec la possibilité d'automatiser des traitements qui sont impossible à l'humain et de fournir un programme/site qui n'a pas besoin d'être modifié par un humai et de manière sécurisée car non accessible directement de la page) de la façon suivante:
https://fr.wikipedia.org/wiki/Architecture_trois_tiers
Là on s'éloigne de la partie intégration et affichage (front) pour rentrer dans le développement et la gestion des données en arrière plan(invisible à l'utilisateur nommé back).
Ceci étant dit en JavaScript(comme dans la presque totalité des langages de programmation qui au final sont relativement semblables) les valeurs utilisées par un programme(données pour utiliser le terme correct) sont stockés dans des variables.
Une variable JavaScript se crée avec le mot clé "var"(entre autres il existe d'autres mots clés pour différentes variables mais restons sur un seul cas pour l'explication).
On peut attribuer des valeurs à ces variables avec le symbole = suivit de la valeur à indiquer.
Une fois que des variables existent elles peuvent servir dans le programme.
Par exemple vous pouvez tester le code suivant dans un fichier .html
Plutôt simple et performant pour quelques lignes non?
Voilà en cherchant dans le manuel JavaScript vous trouverez facilement la seule fonction que je n'ai pas expliqué: .innerHTML (SPOILER bon en fait ça écrit du texte dans une balise ).
Bien sûr pour votre programme complet il vous faudra passer par PHP où le principe reste le même et y ajouter(dans le PHP) la récupération des données du formulaire(encore plus simple qu'un getElementById de JavaScript) et les requêtes au serveur de base de données en SQL.
Mais si vous comprenez mes explications il n'y a pas grand chose qsui vous manque. Bien sûr mieux vaut passer par des cours et tutos complets adressés aux débutants des différentes technologies employées.
Coup de chance il en existent des nombreux et beaucoup plus complets que des explications faites à la va vite sur un forum.
Bon travail
le code n'est pas si mal pour quelqu'un qui ne fait pas de JavaScript.
Le premier en tout cas, pourquoi changer de méthode et insérer du JQuery pour effectuer le même type d'action(détecter le clic)? Autant utiliser toujours la même chose en modifiant pour s'adapter.
Bon pour commencer en programmation le plus simple c'est de réfléchir au différentes étapes dans l'ordre de ce qui doit arriver.
Cela s'appelle faire un algorithme.
1) L'utilisateur peut rentrer son identifiant et mot de passe.
De ce côté là pas de problème pour vous je suppose, il s'agit d'un simple formulaire <form> avec deux champs de saisie(le type input password si on veut masquer la saisie) et un bouton valider ou un <input type =submit >
Un formulaire ça sert à envoyer des informations donc le programme va pouvoir les recevoir. Il y aura une remarque importante sur le sujet mais comme elle concerne aussi le point suivant j'en parle plus tard et n'a pas vraiment de rapport avec l'algorithme(de la logique humaine 'pure') mais par rapport aux outils techniques.
2)l'identifiant de l'utilisateur est cherché (dans la base de données je suppose).
2a) l'identifiant n'est pas dans la base de données
Il faut donc inscrire le message correspondant et pas la peine d'aller plus loin, fin du processus/programme.
2b)l'identifiant existe et on(le programme plutôt) récupère le mot de passe.
3)le mot de passe de la base de donnée est comparé à celui obtenu par le formulaire.
3a) le mot de passe ne correspond pas.
Pas la peine d'aller plus loin, la seule action à faire est d'avertir que le mot de passe est erroné.
3b) le mot de passe saisi et celui obtenu dans la base sont identiques donc c'est validé.
4) On renvoi vers les pages de connexion privés(accessible uniquement en étant identifiés).
J'en arrive à ma remarque importante.
JavaScript ne peut suffire dans ce cas où alors rien n'est sécurisé et n'importe qui avec un minimum de connaissances de JavaScript peut facilement passer outre le mot de passe et forcer la validation ce qui n'est pas génial en matière de sécurité.
JavaScript fonctionnant sur serveur il ne peut pas accéder à la base de données et le pis aller est d'utiliser un fichier texte qui contiendra les identifiants et mots de passe.
Solution pas satisfaisante car elle rends impossible de maintenir le fichier texte(imaginez si vous devez écrire à la main les identifiants et mots de passe de chaque utilisateur lorsqu'il s'enregistre, cela peut aller pour une dizaine de personnes sur plusieurs semaines mais au delà ça devient vite ingérable s'il y a 100, 1000 inscrits ou simplement des inscriptions régulièrement.
Surtout que chaque inscrit devra attendre que l'administrateur rajoute son identifiant et son mot de passe pour qu'ils puisse avoir accès au services.
Bref possible dans la théorie mais pas dans la réalité.
Pour cela(la sécurité et l'automatisation) il faut que toutes ces étapes soient faites du côté serveur, donc avec PHP et une base de données.
Une base de données c'est l'équivalent d'un gros fichier texte mais avec des outils(un langage de programmation SQL) et une structure(des tables de données) qui vont considérablement simplifier les traitements(recherches, tris, filtres, ajout, modification etc...).
C'est donc la solution à utiliser et pour cela comme je voit que votre page est nommé .php le langage serveur(PHP donc) fera la passerelle entre la page HTML et la base de données.
C'est l'utilisation de 3 éléments matériels qui permet cela(les pages dynamiques , dynamique n'ayant rien à voir avec l'animation mais avec la possibilité d'automatiser des traitements qui sont impossible à l'humain et de fournir un programme/site qui n'a pas besoin d'être modifié par un humai et de manière sécurisée car non accessible directement de la page) de la façon suivante:
https://fr.wikipedia.org/wiki/Architecture_trois_tiers
Là on s'éloigne de la partie intégration et affichage (front) pour rentrer dans le développement et la gestion des données en arrière plan(invisible à l'utilisateur nommé back).
Ceci étant dit en JavaScript(comme dans la presque totalité des langages de programmation qui au final sont relativement semblables) les valeurs utilisées par un programme(données pour utiliser le terme correct) sont stockés dans des variables.
Une variable JavaScript se crée avec le mot clé "var"(entre autres il existe d'autres mots clés pour différentes variables mais restons sur un seul cas pour l'explication).
var identifiant var motdepasse //-- crée les variables 'vides' identifiant et motdepasse /* il ne peut avoir d'espace dans un nom de variable et elle ne peuvent commencer par un chiffre*/
On peut attribuer des valeurs à ces variables avec le symbole = suivit de la valeur à indiquer.
var identifiant = "kristen" //-- les quotes(guillemets) indiquent que la donnée stockée est du texte var motdepasse = 999 /* une valeur numérique est indiquée sans quote, 999 et '999' sont donc différents et seule la valeur numérique peut être utilisée pour des alculs, il existe différents types de données en programmation('texte ou chaîne de caractère, nombre entier, nombre à décimale, booléen ...*/
Une fois que des variables existent elles peuvent servir dans le programme.
Par exemple vous pouvez tester le code suivant dans un fichier .html
<form> <label>inscrivez "valider"</label> <input id="saisie-texte" type="textarea"> <button id="valider" >Valider</button> </form> <p id="sortie--texte"> </p> <script> /** ceci doit ressembler à ce que vous connaissez déjà, getElementById('saisie-texte') sélectionne l'élément HTML(DOM)avec pour ID 'valider' et lui applique la méthode .addEventListener qui ajoute un écouteur (de clic ici) et cet écouteur va effectuer la fonction indiquée(le deuxième paramètre) */ document.getElementById('valider').addEventListener('click', VerificationLeMotEstValider() ) function VerificationLeMotEstValider(){ /* création d'une variable qui contient la valeur saisie dans l'élément ayant saisie-texte" comme ID */ var recuperationtexte = document.getElementById('saisie-texte') /** test ou comparatif de la variable avec IF et le symbole de comparaison == qui signifie est identique */ if( recuperationtexte == 'valider' ){ //-- si le test est juste alors le script suivant est effectué document.getElementById('sortie-texte').innerHTML="OK" }else{ /** else est optionnel et ajoute un script qui sera effectué si la condition entre parenthèse n'est pas validée */ document.getElementById('sortie-texte').innerHTML="vous devez écrire valider" } } </script>
Plutôt simple et performant pour quelques lignes non?
Voilà en cherchant dans le manuel JavaScript vous trouverez facilement la seule fonction que je n'ai pas expliqué: .innerHTML (SPOILER bon en fait ça écrit du texte dans une balise ).
Bien sûr pour votre programme complet il vous faudra passer par PHP où le principe reste le même et y ajouter(dans le PHP) la récupération des données du formulaire(encore plus simple qu'un getElementById de JavaScript) et les requêtes au serveur de base de données en SQL.
Mais si vous comprenez mes explications il n'y a pas grand chose qsui vous manque. Bien sûr mieux vaut passer par des cours et tutos complets adressés aux débutants des différentes technologies employées.
Coup de chance il en existent des nombreux et beaucoup plus complets que des explications faites à la va vite sur un forum.
Bon travail
Bonjour,
Merci pour vos explication qui me permettent de mieux comprendre les choses.
Mais en fait, comme je vous l'ai dit il ne s'agit pas d'un programme ou d'une page dédié à un site pour des inscriptions sinon je n'utiliserai effectivement pas du JS mais du PHP avec BDD et d''ailleurs on ne m'aurait pas demandée de le faire moi même.
Il s'agit d'une petite création graphique sous Animate CCS pour enfant pour un petit jeu ou il vont trouver un mdp dans un lieu extérieur et vont l'insérer dans cette création interactive pour accéder à quelque chose pour faire avancer leur enquête.
C'est pour cela que je ne me suis pas préoccupé de la sécurité.
Ma problématique est que je ne peux pas utiliser HTML pour déclarer des form (input, button).
J'utilise les composants de Animate ou je crée les boutons moi même (comme ça l'était à l'époque avec flash c'est le même fonctionnement) sauf qu'on n'utilise plus action script mais JS. C'est piur ça que je fais très simple avec un input et un bouton.
J'ai donnée à mes 2 composants un nom d'occurrence ce qui correspond dans Animate à un ID.
Mais même en ajoutant du code simple comme celui que tu as donné jordane45, il n'est pas interprété et la page charge en boucle avec loader ce qui signifie qu'il ne peut pas prendre le code :
Et si javascribe j'essaye avec ton code en prenant juste la partie script en l'adaptant avec mes 2 forms ça na va pas non plus.
Je suis totalement bloquée alors que ça semble tout simple.
Merci pour vos explication qui me permettent de mieux comprendre les choses.
Mais en fait, comme je vous l'ai dit il ne s'agit pas d'un programme ou d'une page dédié à un site pour des inscriptions sinon je n'utiliserai effectivement pas du JS mais du PHP avec BDD et d''ailleurs on ne m'aurait pas demandée de le faire moi même.
Il s'agit d'une petite création graphique sous Animate CCS pour enfant pour un petit jeu ou il vont trouver un mdp dans un lieu extérieur et vont l'insérer dans cette création interactive pour accéder à quelque chose pour faire avancer leur enquête.
C'est pour cela que je ne me suis pas préoccupé de la sécurité.
Ma problématique est que je ne peux pas utiliser HTML pour déclarer des form (input, button).
J'utilise les composants de Animate ou je crée les boutons moi même (comme ça l'était à l'époque avec flash c'est le même fonctionnement) sauf qu'on n'utilise plus action script mais JS. C'est piur ça que je fais très simple avec un input et un bouton.
J'ai donnée à mes 2 composants un nom d'occurrence ce qui correspond dans Animate à un ID.
Mais même en ajoutant du code simple comme celui que tu as donné jordane45, il n'est pas interprété et la page charge en boucle avec loader ce qui signifie qu'il ne peut pas prendre le code :
var monInput = document.querySelector("mdp").value;
var motdepassatrouver = "test";
if (monInput == motdepassatrouver) {
//ok
this.valider.addEventListener("click", fl_ClickToGoToWebPage_4);
function fl_ClickToGoToAndStopAtFrame_15(){
this.gotoAndStop(7);
}
} else {
//ko
this.valider.addEventListener("click", fl_ClickToGoToWebPage_4);
function fl_ClickToGoToAndStopAtFrame_15(){
this.gotoAndStop(8);
}
Et si javascribe j'essaye avec ton code en prenant juste la partie script en l'adaptant avec mes 2 forms ça na va pas non plus.
Je suis totalement bloquée alors que ça semble tout simple.
J'ai refais les choses à petit pallier pour voir ce qui cloche
Avec ça :
La page se lance bien mais quand je clique sur le bouton rien ne se passe.
On dirait que Animate ne fait pas le lien entre l'ID "mdp" dans le code et son nom d'occurrence du composant qui est identique donc mdp.
Je pense qu'i l faut que je déclarer mon Input en lui attribuant sa valeur d''une façon différente car là il ne semble pas vouloir comprendre les choses.
Avec ça :
this.stop();
var monInput = document.querySelector("mdp").value;
var motdepassatrouver = "test";
if (monInput == motdepassatrouver) {
//ok
this.valider.addEventListener("click", fl_ClickToGoToWebPage_5);
function fl_ClickToGoToWebPage_5(){
window.open("http://www.adobe.com", "_blank");
}
}
La page se lance bien mais quand je clique sur le bouton rien ne se passe.
On dirait que Animate ne fait pas le lien entre l'ID "mdp" dans le code et son nom d'occurrence du composant qui est identique donc mdp.
Je pense qu'i l faut que je déclarer mon Input en lui attribuant sa valeur d''une façon différente car là il ne semble pas vouloir comprendre les choses.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question