Un générateur de mot de passe


Accueil > Projets > Un générateur de mot de passe

Par Cavagnolo J., Kempf A. en novembre 2020

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Pour commencer :

Tout d’abord, ce site est composé que d’une seule et unique page où HTML, CSS et JavaScript se mêlent afin de vous offrir un générateur de mot de passe de qualité.

Présentation du script principale :

  1.          
  2.  
  3. function getRandomNum(lbound, ubound) {
  4. return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
  5. }
  6. function getRandomChar(number, lower, upper, other, extra) {
  7. var numberChars = "0123456789";
  8. var lowerChars = "abcdefghijklmnopqrstuvwxyz";
  9. var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  10. var otherChars = "`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/? ";
  11. var charSet = extra;
  12. if (number == true)
  13. charSet += numberChars;
  14. if (lower == true)
  15. charSet += lowerChars;
  16. if (upper == true)
  17. "Réponse à la vie"
  18. charSet += upperChars;
  19. if (other == true)
  20. charSet += otherChars;
  21. return charSet.charAt(getRandomNum(0, charSet.length));
  22. }
  23. function getPassword(length, extraChars, firstNumber, firstLower, firstUpper, firstOther,
  24. latterNumber, latterLower, latterUpper, latterOther) {
  25. var rc = "";
  26. if (length > 0)
  27. rc = rc + getRandomChar(firstNumber, firstLower, firstUpper, firstOther, extraChars);
  28. for (var idx = 1; idx < length; ++idx) {
  29. rc = rc + getRandomChar(latterNumber, latterLower, latterUpper, latterOther, extraChars);
  30. }
  31. return rc;
  32. }

Télécharger

Ce script permet de choisir plusieurs critères :

•Le type du premier caractère (Chiffres, minuscules, majuscules, autres)
•Le type des autres caractères (Chiffres, minuscules, majuscules, autres)
•Introduire des autres caractères choisis
•Définir la taille du mot de passe

Ces critères vont par la suite permettre la génération aléatoire du mot de passe, comme vu ci-dessous :

De plus, l’utilisateur peut, s’il le souhaite, modifier un ou plusieurs caractères du mot de passe précédemment créer, comme ci-dessous :

Présentation du  :

Pour créer les cases à cocher de tous les critères, un simple est nécessaire comme ci-dessous :

  1. <div class="option">   
  2.     <input type=checkbox name=firstOther>
  3.     "Critères"
  4. </div>

Télécharger

Puis par la suite, un second qui permet la vérification de tous les critères cochés ou non :

  1. <div class="bouton-submit">
  2.     <input class="bouton" type=button value="Créer le mot de passe" onClick="document.myform.password.value =
  3.         getPassword(document.myform.passwordLength.value, document.myform.extraChars.value,
  4.         document.myform.firstNumber.checked, document.myform.firstLower.checked,
  5.         document.myform.firstUpper.checked, document.myform.firstOther.checked,
  6.         document.myform.latterNumber.checked, document.myform.latterLower.checked,
  7.         document.myform.latterUpper.checked, document.myform.latterOther.checked);">
  8. </div>

Télécharger

Et enfin, un troisième qui permet la génération du mot de passe :

  1. <div class="option">
  2.     <input class="résultat-mdp" type=text name=password size=20>
  3. </div>

Télécharger

Pour ce qui est du CSS, nous avons pris un template sur un site internet, qu’on a modifié selon nos besoins et nos envies personnels afin de donner un rendu simple et épuré :

Quant au JavaScript, nous l’avons entièrement pris sur internet, sans aucune modification.

Les problèmes rencontrés :

•Les problèmes résolus :
- Le CSS qui ne s’appliquait pas comme on le voulait
- Le mot de passe qui ne s’affichait pas
- Ligne 42 ?

•Les problèmes non résolus :
- L’implémentation du menu demandé

fichier_site_internet_kempf_alexis_jason_cavagnolo.zip (ZIP - 94.4 ko)
fichier_site_internet_kempf_alexis_jason_cavagnolo.zip

Ce fichier zip contient le projet des élèves. Le lien ci-dessous héberge le projet en ligne et quelques bugs ont été corrigés par l’enseignant.

Mots-clés