Implémenter un indicateur de complexité de mot de passe

Avec la bibliothèque jQuery

Dans cet article nous allons voir comment créer de manière simple un indicateur de complexité pour les mots de passe. Pour ce faire nous allons utiliser la bibliothèque JavaScript qu'on ne présente plus : jQuery.

3 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create Password Strength Indicator With jQuery.

II. Introduction

La sécurité est en train de devenir le plus gros problème de la majorité des sites Web et c'est pourquoi il est très important de sécuriser nos sites le plus possible. Mais malgré toute la bonne volonté du développeur, la plupart des problèmes de sécurité proviennent de compte utilisateur mal protégé : c'est-à-dire un mot de passe trop faible.

Si vous développez un système dans lequel l'utilisateur devra choisir son mot de passe, ajouter un indicateur de complexité sur le mot de passe choisi est toujours une bonne idée.

C'est ce que nous allons apprendre aujourd'hui : implémenter un indicateur de complexité de mot de passe.

III. Le formulaire HTML

En premier lieu nous allons créer un simple formulaire HTML qui permettra de saisir un nouveau mot de passe. Ce formulaire comportera deux boites de texte : une pour saisir le mot de passe et la seconde pour la confirmation (cas classique du Web). La boite de confirmation permet de s'assurer que l'utilisateur ne s'est pas trompé en écrivant son mot de passe. On sous-estime le nombre de personnes se trompant de mot de passe parce qu'à la création ils avaient mal écrit une lettre.

 
Sélectionnez
<form action="" method="post">
          <p><label for="passwordInput">Password: <input type="password" id="passwordInput" name="passwordInput"></label></p>
     <p><label for="confirmPasswordInput">Confirm Password: <input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label></p>
        <p><div class="" id="passwordStrength"></div></p>
       <p><input type="submit" value="Change Password" class="btn"></p>
</form>

Vous pouvez voir que l'on a intercalé une div entre les boites de texte et le bouton de soumission du formulaire. C'est dans cette div que l'on va afficher nos messages concernant la mauvaise ou la bonne complexité du mot de passe.

IV. Indicateur de complexité avec jQuery

Nous allons maintenant créer notre indicateur qui va mesurer la complexité du mot de passe saisi.

Il y a plusieurs choses à vérifier lorsque l'on veut juger de la complexité d'un mot de passe :

  • on vérifie que le mot de passe et sa confirmation sont identiques ;
  • on vérifie que le mot de passe fait au minimum six caractères ;
  • si le mot de passe fait au moins six caractères, mais qu'il ne contient ni chiffre ni majuscule alors, c'est un mot de passe faible ;
  • si le mot de passe fait au moins six caractères et qu'il contient des chiffres et/ou des majuscules alors, c'est un mot de passe moyen ;
  • si le mot de passe fait au moins six caractères et qu'il contient des chiffres, des majuscules et au moins un caractère spécial alors, c'est un mot de passe fort.

Nous devons créer une expression régulière qui va vérifier tous ces prédicats et afficher le message correspondant.

Nous allons commencer par vérifier que le mot de passe et sa confirmation sont bien les mêmes. Si ce n'est pas le cas, cela signifie que l'utilisateur a fait une faute de frappe et dans ce cas nul besoin d'effectuer les tests de complexité.

Une fois que les deux mots de passe correspondent, nous pouvons tester la complexité du mot de passe en utilisant les expressions régulières suivantes.

IV-A. Mot de passe fort

 
Sélectionnez
// Doit contenir des majuscules, des chiffres et des minuscules
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

IV-B. Mot de passe moyen

 
Sélectionnez
// Doit contenir soit des majuscules et des minuscules soit des minuscules et des chiffres
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

IV-C. Mot de passe faible

 
Sélectionnez
// Doit faire au minimum six caractères
var okRegex = new RegExp("(?=.{6,}).*", "g");

IV-D. Vérification des conditions

On effectue ensuite un test sur chaque expression régulière afin de vérifier lesquelles sont valides en commençant par celle du mot de passe fort et en terminant par le faible.

 
Sélectionnez
 $(document).ready(function() {
    $('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {
 
     if($('#passwordInput').val() != '' && $('#confirmPasswordInput').val() != '' && $('#passwordInput').val() != $('#confirmPasswordInput').val())
            {
               $('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');
 
            return false;
           }
 
        // Must have capital letter, numbers and lowercase letters
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 
        // Must have either capitals and lowercase letters or lowercase and numbers
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 
        // Must be at least 6 characters long
        var okRegex = new RegExp("(?=.{6,}).*", "g");
 
        if (okRegex.test($(this).val()) === false) {
            // If ok regex doesn't match the password
               $('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');
 
        } else if (strongRegex.test($(this).val())) {
            // If reg ex matches strong password
            $('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');
        } else if (mediumRegex.test($(this).val())) {
            // If medium password matches the reg ex
            $('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');
        } else {
            // If password is ok
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');
        }
 
        return true;
    });
 
 

V. Conclusion

Dans cet article nous avons vu comment implémenter un indicateur de complexité de mot de passe selon différents critères. Vous pouvez maintenant personnaliser vos expressions régulières afin de créer votre propre indicateur de complexité basé sur d'autres conditions.

VI. Liens

Vous pouvez consulter la démonstration afin d'avoir un aperçu du rendu dans un navigateur.

VII. Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.