Comment concevoir correctement un champ OTP (One-Time Password) uniquement avec HTML et CSS.

C'est vrai que la grande majorité de ces champs est une plaie à utiliser (copier/coller qui ne marche pas, curseur qui saute d'un champ à l'autre sans raison, impossibilité d'effacer facilement l'un des numéros, etc.).

Un moyen pour exporter vos codes OTP depuis Google Authenticator en vue de les importer dans une autre app du genre FreeOTP+.

1. Dans GA : menu > Transférer des comptes.
2. Scannez le/les QR Codes avec un autre téléphone de confiance, et copiez-collez l'URL résultante sur un bloc note de confiance type ZeroBin.
3. Sur votre PC installez Node.js si ce n'est pas déjà fait.
4. Créez les 2 fichiers index.js et migration-payload.proto et collez-y le contenu depuis ce lien.
5. Lancez npm install protobufjs hi-base32
6. Lancez node index.js <url obtenue depuis le QR code de GA> autant de fois que vous avez d'URL
7. Dans FreeOTP+, faites menu > Ajouter un jeton.
8. Tapez l'émetteur, le compte et le secret tels qu'obtenus dans la sortie console du script (pas la peine de changer les autres paramètres).
9. Testez que l'OTP obtenu fonctionne.
10. Faites de même pour tous vos codes.

Pensez à nettoyer l'historique de votre console à la fin. Si vous êtes avec un système UNIX, faites:

history -c 
history -w

Vous pouvez aussi supprimer le fichier ~/.bash_history ou l'éditer et supprimer uniquement les lignes qui contiennent vos URLs entrées à l'étape 6.

Un exemple simple d'implémentation d'un formulaire de login avec OTP (One-Time Password) en PHP.