Souvent, les sites qui devraient vraiment valoriser la sécurité (en particulier les banques) demandent plusieurs caractères individuels à partir d'un mot de passe.
En général, je les ai vus faire comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Y a-t-il une meilleure façon?
Ma solution serait de terminer le processus de connexion en deux étapes.
Sauter avec une réponse parce que j'ai vu un très bel exemple de cela dans la nature. Hargreaves Lansdown est une institution financière britannique, et voici comment ils le font:
L'idée de donner un contexte à un utilisateur ne m'était pas venue à l'esprit avant de voir cela. En pratique, je trouve qu'il est beaucoup plus rapide et plus facile de saisir un mot de passe lorsque je peux voir à quelle distance les caractères demandés se trouvent de chaque côté.
Si un service peut valider le caractère nième de votre mot de passe, cela signifie qu'il stocke votre mot de passe dans un format non sécurisé. Aucun service ne doit jamais savoir quel est votre mot de passe, il doit seulement pouvoir dire si votre mot de passe s'authentifie ou non.
Vous ne devriez donc jamais demander le nième caractère d'un mot de passe, et vous ne devriez jamais être en mesure d'évaluer si c'est le bon caractère ou non.
Si vous voulez authentifier quelqu'un, vous devez tiliser un mot de passe complet stocké de manière sécurisée.
HSBC utilise une combinaison d'un nom d'utilisateur, d'un mot de passe et d'une clé de sécurité.
Dans cette implémentation, vous entrez d'abord votre nom d'utilisateur.
Ensuite, vous êtes invité à entrer votre mot de passe et trois caractères aléatoires à partir de votre clé de sécurité:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'avantage de cette approche est que le mot de passe n'a pas besoin d'être stocké dans un état non sécurisé. L'interface ne dit pas non plus à une personne non autorisée la longueur de la clé de sécurité.
En incluant des zones de texte désactivées dans l'interface pour les caractères non demandés, l'utilisateur peut plus facilement "épeler" leur mot et fournir la bonne lettre sans avoir à visualiser en interne les caractères individuels de la clé.
L'implémentation dans la question a une charge cognitive beaucoup plus élevée car l'utilisateur doit visualiser le mot et ensuite compter les endroits pour obtenir le personnage.
Vous devez demander le mot de passe complet, non seulement parce qu'il est plus sûr, mais parce que les utilisateurs entiers des mots de passe par la mémoire musculaire, en particulier les mots de passe composés de caractères arbitraires, ou définis par des mouvements sur le clavier. Cela rend difficile pour les utilisateurs de rappeler des personnages dans des positions spécifiques.
J'utiliserais une liste déroulante ici. L'utilisation d'une liste déroulante régulière permet toujours au clavier de sélectionner rapidement le caractère correct tout en facilitant la tâche des utilisateurs sur les claviers tactiles et ceux qui préfèrent utiliser leur souris.