Intégrer un OTP WhatsApp dans une app mobile Flutter

Une app mobile Flutter qui envoie ses OTP par WhatsApp offre un taux de livraison supérieur et une meilleure UX qu'un SMS classique. Voici le guide d'intégration complet, avec les spécificités marocaines et le fallback SMS indispensable.

Architecture globale

Le flux d'authentification par OTP WhatsApp comporte trois acteurs :

• App Flutter : collecte le numéro, appelle votre backend, propose le champ de saisie du code.
• Backend : appelle WhatsApp Cloud API via votre BSP, gère les retries et le fallback.
• WhatsApp du destinataire : reçoit le message avec bouton "Copier le code".

Étape 1 : préparer le template Authentication

Créer dans Meta Business Manager un template de catégorie Authentication, avec bouton natif "Copy Code" (One-Tap OTP). Structure :

• Corps : "{{1}} est votre code de vérification. Ne le partagez avec personne."
• Footer optionnel : "Ce code expire dans 5 minutes."
• Bouton : Copy code (activé automatiquement pour la catégorie Authentication).

Faire approuver par Meta (délai ~24h).

Étape 2 : backend qui appelle WhatsApp Cloud API

Depuis votre backend (Node, Python, Go, PHP), appeler POST /messages avec le template et le paramètre code. Sauvegarder le code en Redis avec TTL 5 minutes. Renvoyer à l'app un identifiant de requête (pas le code).

Étape 3 : côté Flutter

Trois écrans typiques :

1. Écran saisie téléphone : normaliser le numéro au format E.164 (+212...).
2. Écran saisie code : champ 6 chiffres, focus automatique, autofill si possible.
3. Écran erreur / renvoi : bouton "Renvoyer un code" avec cooldown 30s.

Étape 4 : fallback SMS

Environ 5 à 10 % des utilisateurs marocains n'utilisent pas WhatsApp activement. Prévoir : si le message WhatsApp n'est pas marqué delivered après 15 secondes, déclencher un envoi SMS via agrégateur (Twilio, Vonage, Wamitel, ou local). L'app affiche discrètement "Code envoyé par SMS" en cas de fallback.

Étape 5 : validation côté backend

Quand l'utilisateur saisit le code, l'app l'envoie au backend qui vérifie en Redis (comparaison + suppression). Toujours limiter le nombre de tentatives (ex : 5 essais max, puis nouveau code obligatoire).

Bonnes pratiques sécurité

• Générer les codes avec un CSPRNG (jamais Math.random).
• Ne jamais logger le code en clair (redact dans les logs).
• Rate limiter par numéro et par IP (max 5 codes/heure).
• Détecter les patterns d'abus (même numéro, plusieurs IPs).

Conclusion

Intégrer un OTP WhatsApp dans une app Flutter marocaine est aujourd'hui à la portée d'un dev en une journée. Le combo template Authentication + fallback SMS + rate limiting délivre une expérience utilisateur premium tout en réduisant significativement la facture SMS par rapport à un envoi 100 % via agrégateur classique.