Guide Utilisateur – Bubble MFA Plugin 1. Ajout de l’élément MFA Setup Wizard (ACF-850n3)
Glisse l’élément MFA Setup Wizard sur ta page.
Personnalise les options dans ses propriétés (méthodes disponibles, couleurs, affichage des codes de secours, etc.).
Le wizard guide l’utilisateur à travers :
Le choix de la méthode (TOTP, SMS, Email…)
La configuration (QR code, saisie du numéro, email…)
L’enregistrement des codes de secours
2. Workflows : Réagir aux événements du wizard
When “Setup completed” (ACK) is triggered
→ L’utilisateur a terminé la configuration MFA.
→ Utilise This ACF-850n3's setupData pour récupérer toutes les infos (secret, backup codes, etc.).
When “Setup cancelled” (ACL) is triggered
→ L’utilisateur a annulé le setup.
When “Method selected” (ACM) is triggered
→ L’utilisateur a choisi une méthode MFA.
→ Utilise This ACF-850n3's method pour savoir laquelle.
3. Actions Serveur (Backend Workflows)
Generate MFA Secret
Utilise cette action pour générer un secret TOTP, un QR code, et des codes de secours.
Les retours incluent : secret, qr_code, backup_codes, algorithm, digits, period.
Verify MFA Token
Vérifie un code TOTP ou un code de secours.
Retourne si le code est valide (is_valid), le type de code utilisé (token_type), etc.
Send OTP via SMS/Email
Utilise les actions SMS (Twilio) ou Email (SendGrid) pour envoyer un OTP à l’utilisateur.
Personnalise le message et la durée de validité.
Verify OTP Code
Vérifie le code OTP reçu par SMS ou Email.
Generate Backup Codes
Génère des codes de secours indépendamment.
4. Utilisation côté Bubble (exemples concrets)
Afficher le QR code
→ Utilise le champ qr_code retourné par l’action “Generate MFA Secret” dans une image (format SVG).
Afficher les codes de secours
→ Utilise le champ backup_codes (string séparée par des virgules) et affiche-les sous forme de liste.
Vérifier un code
→ Utilise l’action “Verify MFA Token” ou “Verify OTP Code” selon la méthode.
Réagir au choix de méthode
→ Dans le workflow “When Method selected”, affiche dynamiquement le bon formulaire ou la bonne étape selon This ACF-850n3's method.
5. Sécurité et bonnes pratiques
Ne jamais stocker les secrets TOTP en clair côté client.
Limite le nombre de tentatives de vérification (rate limiting inclus).
Utilise les logs/audit trail pour suivre les tentatives MFA (voir retours des actions).
Propose toujours des codes de secours à l’utilisateur.
6. Personnalisation & Design
Modifie les couleurs, les textes et le thème du wizard dans les propriétés de l’élément.
Le wizard est responsive : il s’adapte aux mobiles et tablettes.
Tous les boutons et étapes sont accessibles et visibles.
7. Dépannage
Erreur “acm is not defined” : Utilise toujours method comme propriété dans les workflows, jamais acm.
Erreur de parsing backup_codes : Vérifie que tu utilises bien le format string (et non array) dans Bubble.
Aucune dépendance externe : Tout fonctionne même sans CDN, grâce à l’implémentation native.
8. Exemple de workflow Bubble
text
When ACF-850n3 - Method selected is triggered
   → Only when This ACF-850n3's method is "totp"
       → Show Group TOTP Setup
   → Only when This ACF-850n3's method is "sms"
       → Show Group SMS Setup

When ACF-850n3 - Setup completed is triggered
   → Save This ACF-850n3's setupData.secret in the user’s database
   → Show success message
Pour toute question technique ou d’intégration, consulte le README ou le guide de migration inclus dans le plugin !
Tu peux aussi demander des exemples spécifiques pour chaque action ou workflow.