Contrôle de force de mot de passe BreezingForms

J'indique la version Pro comme étant requise pour ce tutoriel, le principe fonctionne également avec la version Lite lors de la construction d'un formulaire nécessitant un mot de passe.
La mention suppose l'utilisation du formulaire d'enregistrement fourni uniquement avec la version PRO de BreezingForms

Situation

Le formulaire d'enregistrement fourni par BreezingForms Pro est préfabriqué et on ne peut y modifier que peu de choses dont les labels (aussi nommés Libellés, étiquettes) qui sont en anglais pour les traduire en français. C'est important pour que le script d'enregistrement, basé sur les noms des éléments, enregistre bien les informations utilisateur dans la base de données.

Le champ de mot de passe, tel qu'il est initialement formaté, vérifie seulement que le champ soit renseigné. Il n'y aucun contrôle sur sa complexité, même un mot de passe faible, validerait le formulaire. Tout le monde sait que la préférence ira aux mots de passe forts entre autre pour la sécurité de votre site. Nous allons donc forcer une certaine complexité à ce mot de passe et bonne nouvelle, c'est une modification que l'on peut apporter sans compromettre le fonctionnement du formulaire.

Solution

Le formulaire natif de Joomla! propose, dans son paramètre, d'imposer la présence minimale d'un nombre de caractères dont lettre(s) capitale(s), chiffre(s), caractère(s) spécial (spéciaux). Je vous propose une option similaire sous forme d'un script qui contrôlera, à l'aide d'une expression régulière, que le mot de passe corresponde bien à une certaine force.

Nous contrôlerons donc que ce mot de passe respecte les points suivants :

  1. Soit composé d'au moins 8 caractères (peut être augmenté dans le script)
  2. Contienne au moins une lettre capitale
  3. Contienne au moins un chiffre
  4. Contienne au moins un des caractères spéciaux suivants : @ # $ € £ & % ' ( ) { } " *

Après l'installation du formulaire d'enregistrement gracieusement offert lors de tout achat d'une licence BreezingForms Pro, il faudra soit installer le script de vérification que je vous fournis ci-dessous soit le créer vous-même (voir les instructions plus loin).
Télécharger le package nécessaire
et installez-le comme n'importe quel package depuis la configuration de BreezingForms.

Dès son installation, il sera accessible depuis la liste des Scripts de l'onglet Validation des options d'éléments.

Ouvrez alors votre formulaire et sélectionnez le champs nommé password_pwrepeat, modifiez le script appelé dans la partie Validation pour y choisir FF::ff_password_validation.
Modifiez le message d'erreur selon votre préférence, enregistrez les propriétés du champ puis le formulaire avant de le tester et le publier.

Si vous avez décidé de "créer" le script vous-même, histoire de prendre connaissance de la création de petits scripts de validation, rendez-vous dans l'onglet Scripts du menu BF, et créez un nouveau script.

  1. Nommez-le
  2. Publiez-le
  3. Choisissez son Package, généralement vous pouvez laisser FF.
  4. Nommez-le ff_password_validation
  5. Donnez-lui une description
  6. Entrez le code suivant (voir capture d'écran) :
    function ff_password_validation(element, message)
    {
       var regex = /^(?=.*[A-Z])(?=.*[!@#$€£&%'(){}"*])(?=.*[0-9])(?=.*[a-z]).{8,}/gm;
    if(!regex.test(element.value)) {
    	if (message == ''){
    		message = element.name + ' ne correspond pas au format recommandé.\n';
    	}
    	ff_validationFocus(element.name);
    	return message;
    } //if
    return '';
    } // ff_password_validation
  7. Enregistrez le script.
  8. Vous le retrouverez dans la liste des scripts de validation comme indiqué précédemment.

Ce code contient comme variable une expression régulière (regex) qui teste la présence des caractères requis. Ces caractères se trouvent dans un jeu de caractères matérialisé par les crochets, ouvrant et fermant. Si vous désirez ajouter des crochets dans ce jeu de caractères et qu'il soient interprétés comme tels, il faut que vous les échappiez à l'aide d'un antislash : \[ \]
Vous pouvez éventuellement ajouter, entre les crochets contenant les caractères spéciaux, des caractères que vous jugeriez devoir être présents tels le trait d'union, le trait de soulignement, etc.
Vous pouvez également augmenter ou diminuer le nombre de caractères requis en modifiant la partie {8,} sans oublier la virgule qui implique un minimum sans maximum, p.ex. {12,}

Merci à DarkoCujic du forum de Crosstec pour m'avoir aiguillé et corrigé sur la syntaxe de la regex.

 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact.