Ajouter la double authentification (2FA TOTP) dans une application Blazor

Je pensais que c’était complexe et que c’était même payant. Il n’en est rien. Je vous explique comment j’ai ajouté une authentification à deux facteurs (2FA) de type TOTP dans une application Blazor.
👉 Repo GitHub : tossnet/Blazor-2FA

TOTP ?

TOTP signifie Time-based One-Time Password : un mot de passe à usage unique, généré à intervalles réguliers (en général toutes les 30 secondes), basé sur une clé secrète partagée.

Ce système est utilisé par la majorité des applications de double authentification, comme :

• ✅ Google Authenticator
• ✅ Microsoft Authenticator
• ✅ Authy, 1Password, Aegis Authenticator, etc.

Fonctionnement global

1. Le serveur génère une clé secrète et un QR code TOTP conforme au format otpauth://
2. L’utilisateur scanne ce QR code avec son application 2FA
3. Lors des connexions suivantes, l’utilisateur doit saisir un code à 6 chiffres généré par son app
4. Le serveur vérifie ce code avec la même clé et l’heure courante

Démo du projet Blazor

J’ai mis le projeten open-source sur Github. Il est disponible ici : 🔗 https://github.com/tossnet/Blazor-2FA. Aussi, j’ai utilisé Blazor Assembly simplement afin d’avoir une démo sur GitHub. Les paquets Nugets Otp.NET et QRCoder

Ce qu’il fait :

• Génération d’une clé secrète TOTP
• Création d’un QR code scannable dans Google/Microsoft Authenticator
• Vérification du code à 6 chiffres
• Message de validation si le code est correct

Exemple de code :

var secret = KeyGeneration.GenerateRandomKey(20);
var base32Secret = Base32Encoding.ToString(secret);

string issuer = "Blazor-2FA";
string userEmail = "utilisateur@example.com";

var secret = KeyGeneration.GenerateRandomKey(20);
var base32Secret = Base32Encoding.ToString(secret);

string issuer = "Blazor-2FA";
string userEmail = "utilisateur@example.com";

URI TOTP généré

otpauth://totp/MonApp:email@example.com?secret=JBSWY3DPEHPK3PXP&issuer=MonApp&digits=6

otpauth://totp/MonApp:email@example.com?secret=JBSWY3DPEHPK3PXP&issuer=MonApp&digits=6

Pour la vérification :

var totp = new Totp(secret);
string code = totp.ComputeTotp(); // génère un code TOTP

var window = VerificationWindow.RfcSpecifiedNetworkDelay;
bool isValid = totp.VerifyTotp(userInputCode, out long _, window);

var totp = new Totp(secret);
string code = totp.ComputeTotp(); // génère un code TOTP

var window = VerificationWindow.RfcSpecifiedNetworkDelay;
bool isValid = totp.VerifyTotp(userInputCode, out long _, window);

Pourquoi intégrer 2FA dans votre application ?

• ✅ Sécurité renforcée
• ✅ Meilleure protection des comptes utilisateurs
• ✅ Conforme aux pratiques modernes de cybersécurité

Conclusion

Ajouter 2FA TOTP dans une application Blazor ou autre est très simple, sécurisé et moderne. Grâce aux bibliothèques .NET existantes, tout peut se faire en C# avec peu de dépendances externes.