La cybersécurité est une préoccupation sérieuse et vous devez en tenir compte lorsque vous construisez un produit, et Bubble ne fait pas exception à cette règle.
Nativement, Bubble propose un ensemble de fonctionnalités pour vous aider à construire des applications sécurisées comme les privacy rules.
Mais une fonctionnalité qui n'est clairement pas assez utilisée est la politique de force de mot de passe.
En bref, elle vous permet de créer une politique que vos utilisateurs doivent suivre lors de la création de leur mot de passe.
Elle les oblige à créer des mots de passe forts, ce qui améliore la sécurité de votre application.
C'est déjà une excellente amélioration en soi.
Mais si vous faites simplement cela, vous risquez de nuire à l'expérience utilisateur de votre application.
Parce que vous connaissez la difficulté de trouver un mot de passe qui respecte la politique de mot de passe. Et vous avez peut-être déjà rencontré un site web qui donne très peu d'indices sur la force de votre mot de passe.
Eh bien, c'est ce que nous allons couvrir dans cet article : Comment créer un bon indicateur de force de mot de passe, sans aucun plugin.
Allons-y.
Note : Pour aller plus loin, vous pouvez également lire notre article sur comment afficher un mot de passe dans Bubble.
(Optionnel, mais recommandé) Configurer une politique de force de mot de passe
Comme mentionné précédemment, Bubble vous donne la possibilité de personnaliser la politique de mot de passe de votre application.
Pour la modifier, allez simplement dans les Settings de votre application --> General --> et cochez "Define a password policy"
Vous pourrez ensuite personnaliser votre politique.
En matière de sécurité dans Bubble.io, je suis personnellement les conseils de Flusk. Pour la politique de mot de passe, ils recommandent de définir la longueur à au moins 8 caractères et de cocher toutes les options ci-dessous.
Si vous voulez en savoir plus sur la sécurité Bubble.io, ils ont un excellent eBook gratuit que je ne peux que recommander.
Une fois que vous avez configuré cela, les utilisateurs devront se conformer à cette politique lors de leur inscription.
Mais attention, ils n'auront encore aucune indication sur votre politique. Nous allons configurer cela dans la prochaine étape.
Créer notre indicateur de force de mot de passe
Vient maintenant une étape cruciale pour votre UX.
Nous avons défini une politique de mot de passe qui garantit que les utilisateurs créent des mots de passe forts et sécurisés.
Mais pour l'instant, ils n'en ont aucune idée, et ils seront frustrés en essayant de s'inscrire parce qu'ils ne savent pas quel type de mot de passe votre application attend.
Pour résoudre cela, je vais vous montrer comment construire ce type d'indicateur de force de mot de passe.
Comme vous pouvez le voir dans la capture d'écran ci-dessus, cet indicateur est assez basique, mais il donne une indication visuelle sur la force du mot de passe de l'utilisateur.
Étape 1 - Construire votre interface
Comme toujours, je vais commencer par construire ma page d'inscription.
Pour gagner du temps, j'ai choisi un composant de la bibliothèque de composants de Nocodable et je l'ai importé dans mon application.
Ensuite, je vais créer un simple indicateur en ajoutant un groupe sous mon élément input de mot de passe et en définissant son layout sur Row.
À l'intérieur, j'ajouterai ensuite 3 éléments Shape :
Par défaut, j'ai défini leur couleur sur gris. Nous utiliserons des conditions pour leur donner leurs couleurs en fonction de la force du mot de passe.
Étape 2 - Faire fonctionner notre indicateur de force de mot de passe
Maintenant que nous avons construit notre interface, nous devons la faire fonctionner (c'est-à-dire faire en sorte que l'indicateur change de couleur en fonction de la robustesse du mot de passe).
Par défaut, les inputs de mot de passe Bubble sont dotés d'un paramètre "Password strength" qui renvoie une valeur entre 0 et 100 (100 est un mot de passe très fort, 0 est un mot de passe très faible).
Si vous ne voyez pas ce paramètre dans vos conditions, assurez-vous que le "Content format" de votre élément input est défini sur "Password"
Il prend en compte plusieurs paramètres tels que la longueur minimale du mot de passe, s'il contient des caractères spéciaux, des lettres majuscules, des chiffres, etc...
Et c'est précisément ce que nous allons utiliser pour donner un feedback en temps réel qui guide les utilisateurs dans la création de mots de passe robustes.
Vous vous souvenez des shapes que nous avons ajoutées plus tôt ? Revenons à elles !
Le résultat final que nous voulons obtenir est celui-ci :
Selon des valeurs seuils, les shapes changent de couleur pour indiquer la force du mot de passe.
Rien de trop compliqué, il nous suffit de quelques conditionnelles.
Nous commencerons par la shape à gauche de notre indicateur :
Celle-ci indique un mot de passe faible, elle sera donc rouge lorsque la force du mot de passe n'est pas suffisante, et changera progressivement de couleur lorsque le prochain seuil de force sera franchi.
Traduit en condition, cela nous donne ceci :
Comme vous pouvez le voir, la couleur de la shape sera rouge lorsque la force du mot de passe est inférieure à 50 (sur 100), orange lorsque la force est entre 50 et 75 et verte lorsqu'elle est supérieure à 75.
Maintenant, tout ce que nous devons faire est de répéter ces conditions pour les autres shapes, et de retirer celle du haut pour chaque valeur seuil.
Donc pour la shape du milieu, nous aurons ceci :
Et pour la shape de droite, nous aurons ceci :
Et voilà, votre indicateur de force de mot de passe fonctionne maintenant parfaitement !
De cette façon, votre application donnera un feedback clair en temps réel à vos utilisateurs, et vous vous assurerez qu'ils ont des mots de passe forts, qui gardent leurs données sécurisées !
(Optionnel, mais recommandé) Étape 3 - Indiquer les exigences de la politique de mot de passe
Vous vous souvenez quand nous avons configuré une politique de force de mot de passe au début de l'article ?
Eh bien, une bonne chose pour nos utilisateurs serait de leur dire ce qu'ils sont censés insérer dans leur mot de passe !
Pour ce faire, nous pouvons construire un simple indicateur de politique pour leur dire ce que nous attendons, et vérifier en temps réel si leur mot de passe inclut chaque paramètre ou non.
Dans la capture d'écran ci-dessus, vous pouvez voir que ce système vérifie chaque exigence et met à jour la couleur et l'icône de chaque paramètre.
Détecter la longueur du mot de passe
La première et la plus simple étape sera de détecter la longueur réelle du mot de passe (c'est-à-dire son nombre de caractères).
Pour ce faire, ajoutez simplement la condition suivante dans votre application, et faites-la modifier l'icône et la couleur de l'icône et du texte.
Comme vous pouvez le voir, rien de trop difficile pour celle-ci.
Détecter les lettres majuscules
Très bien, maintenant nous entrons dans un domaine plus complexe, le domaine des REGEX.
En bref, ce sont de petits extraits d'un langage spécifique appelé Regular Expression que nous pouvons utiliser pour trouver et extraire des motifs spécifiques.
Dans ce cas, nous allons utiliser un Regex pour détecter la présence d'une lettre majuscule dans notre champ input de mot de passe.
Pour ce faire, vous pouvez ajouter la condition suivante :
Comme vous pouvez le voir, cette condition est légèrement différente de la précédente puisque j'ai utilisé l'opérateur ":extract with Regex" et la condition ":first item is not empty".
Ce que fait cette condition, c'est vérifier la présence de lettres majuscules et renvoyer la liste des résultats trouvés.
Si le premier élément n'est pas vide (c'est-à-dire s'il y a au moins un résultat), alors la condition est vérifiée !
Voici le Regex que vous devez utiliser : .[A-Z].
Détecter les chiffres
Pour détecter la présence de chiffres dans notre mot de passe, nous appliquerons la même méthode, c'est-à-dire utiliser un Regex !
Évidemment, cette fois, nous vérifierons la présence d'un chiffre.
Le regex que vous devez utiliser est : .[0-9].
Détecter les caractères spéciaux
Et enfin, nous devons maintenant être capable de détecter les caractères spéciaux !
Pour ce faire, nous utiliserons une fois de plus un Regex :
Le Regex que vous devez utiliser est : .[#$^+=!()@%&].*
Et voilà !
Vous avez construit un système complet d'indicateur de force de mot de passe dans votre application Bubble, sans avoir besoin de plugins.
Avec ces éléments visuels, vos utilisateurs suivront facilement vos exigences en matière de mot de passe et créeront des mots de passe véritablement sécurisés.
N'est-ce pas génial ?
Comment créer un indicateur de force de mot de passe dans Bubble ?
Utilisez le paramètre "Password strength" natif de Bubble (valeur 0-100) et créez des shapes qui changent de couleur selon des seuils : rouge si <50, orange entre 50-75, vert si >75. Ajoutez des conditions sur chaque shape pour les faire réagir en temps réel.
Comment définir une politique de mot de passe dans Bubble ?
Allez dans Settings > General et cochez "Define a password policy". Configurez la longueur minimale (recommandé : 8 caractères minimum) et activez les options pour majuscules, chiffres et caractères spéciaux selon vos besoins de sécurité.
Comment détecter les majuscules dans un mot de passe Bubble ?
Utilisez l'opérateur ":extract with Regex" avec le pattern .[A-Z]., puis vérifiez si ":first item is not empty". Si la condition est vraie, cela signifie qu'au moins une lettre majuscule est présente dans le mot de passe.
Quel Regex utiliser pour détecter les caractères spéciaux ?
Utilisez le Regex .[#$^+=!()@%&].** pour détecter les caractères spéciaux courants dans un mot de passe. Combinez-le avec l'opérateur ":extract with Regex" et vérifiez que le premier élément n'est pas vide.
Faut-il un plugin pour un indicateur de mot de passe sur Bubble ?
Non, vous pouvez créer un indicateur de force de mot de passe complet sans plugin. Bubble fournit nativement le paramètre "Password strength" et les opérateurs Regex nécessaires pour vérifier tous les critères de sécurité.
Comment améliorer l'UX de la création de mot de passe ?
Créez un feedback visuel en temps réel avec des indicateurs de couleur (rouge/orange/vert) et listez explicitement les exigences (longueur, majuscules, chiffres, caractères spéciaux) avec des coches qui s'activent au fur et à mesure que l'utilisateur tape.
