{"id":11108,"date":"2025-12-12T17:17:11","date_gmt":"2025-12-12T17:17:11","guid":{"rendered":"https:\/\/techhub.saworks.io\/?post_type=docs&#038;p=11108"},"modified":"2026-02-10T10:20:34","modified_gmt":"2026-02-10T10:20:34","slug":"verification-par-otp","status":"publish","type":"docs","link":"https:\/\/techhub.saworks.io\/fr\/docs\/presentation-de-ireti\/version-2-de-lapplication-iretipay\/verification-par-otp\/","title":{"rendered":"V\u00e9rification par OTP"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">1) Contexte &amp; objectif<\/h2>\n\n\n\n<p><strong>Nom de l\u2019\u00e9cran<\/strong> : <code>V\u00e9rification OTP<\/code><br><strong>But<\/strong> : V\u00e9rifier l\u2019identit\u00e9 de l\u2019utilisateur via un <strong>code OTP<\/strong> (One-Time Password) re\u00e7u par <strong>SMS<\/strong> afin de s\u00e9curiser une action (connexion, r\u00e9initialisation, validation de transaction, etc.).<br><strong>R\u00e9sultat attendu<\/strong> : L\u2019utilisateur saisit un code \u00e0 <strong>4 chiffres<\/strong> et l\u2019application :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Valide<\/strong> le code (succ\u00e8s \u2192 passage \u00e0 l\u2019\u00e9tape suivante).<\/li>\n\n\n\n<li>Ou <strong>signale<\/strong> une erreur (code invalide\/expir\u00e9) et propose de <strong>renvoyer<\/strong> un nouveau code apr\u00e8s un d\u00e9lai.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"461\" height=\"1024\" data-src=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2025-12-09-at-09.20.39-461x1024.jpeg\" alt=\"\" class=\"wp-image-11124 lazyload\" data-srcset=\"https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2025-12-09-at-09.20.39-461x1024.jpeg 461w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2025-12-09-at-09.20.39-135x300.jpeg 135w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2025-12-09-at-09.20.39-450x1000.jpeg 450w, https:\/\/techhub.saworks.io\/wp-content\/uploads\/2025\/12\/WhatsApp-Image-2025-12-09-at-09.20.39.jpeg 576w\" data-sizes=\"(max-width: 461px) 100vw, 461px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 461px; --smush-placeholder-aspect-ratio: 461\/1024;\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2) Public cible &amp; sc\u00e9narios d\u2019usage<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nouveaux utilisateurs<\/strong> : v\u00e9rification de num\u00e9ro lors de l\u2019inscription.<\/li>\n\n\n\n<li><strong>Utilisateurs existants<\/strong> : confirmation d\u2019action sensible (mot de passe, paiement).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3) Contenu &amp; UI <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 En-t\u00eate<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ic\u00f4ne retour<\/strong> (fl\u00e8che) en haut \u00e0 gauche \u2192 navigation vers l\u2019\u00e9cran pr\u00e9c\u00e9dent.<\/li>\n\n\n\n<li><strong>Titre<\/strong> : <code>V\u00e9rification OTP<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 Zone principale<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Illustration<\/strong> : ic\u00f4ne enveloppe (mail\/SMS) \u2013 purement d\u00e9corative.<\/li>\n\n\n\n<li><strong>Titre fort<\/strong> : <code>Entrez le code de validation<\/code>.<\/li>\n\n\n\n<li><strong>Sous-texte<\/strong> : <code>Envoy\u00e9 par SMS au 2250548019521<\/code> Affiche le <strong>num\u00e9ro masqu\u00e9<\/strong> ou format international +225\u2026 (C\u00f4te d\u2019Ivoire). <\/li>\n\n\n\n<li><strong>Entr\u00e9es code<\/strong> : 4 cases (chacune accepte uniquement un <strong>chiffre [0\u20139]<\/strong>). Focus auto et avance apr\u00e8s saisie.<\/li>\n\n\n\n<li><strong>Timer renvoi<\/strong> : <code>Renvoyer le code dans 0:54<\/code> \u2192 compte \u00e0 rebours jusqu\u2019\u00e0 0:00 puis le libell\u00e9 devient <strong>\u201cRenvoyer le code\u201d<\/strong> (clic actif).<\/li>\n\n\n\n<li><strong>Clavier num\u00e9rique<\/strong> : chiffres 0\u20139 + <strong>bouton suppression<\/strong> (ic\u00f4ne retour arri\u00e8re).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 \u00c9tats &amp; messages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal<\/strong> : cases vides, timer actif.<\/li>\n\n\n\n<li><strong>Saisie partielle<\/strong> : cases remplies \u00e0 mesure, bouton suppression actif.<\/li>\n\n\n\n<li><strong>Saisie compl\u00e8te (4 chiffres)<\/strong> : d\u00e9clenche <strong>auto-validation<\/strong> (ou bouton \u201cValider\u201d si on pr\u00e9f\u00e8re explicitement).<\/li>\n\n\n\n<li><strong>Erreur<\/strong> :\n<ul class=\"wp-block-list\">\n<li><code>Code incorrect. R\u00e9essayez.<\/code> (cases secou\u00e9es, bordure rouge).<\/li>\n\n\n\n<li><code>Code expir\u00e9. Demandez un nouveau code.<\/code> (d\u00e9sactive soumission et invite au renvoi).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">4) R\u00e8gles fonctionnelles<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Longueur OTP<\/strong> : 4 chiffres (configurable).<\/li>\n\n\n\n<li><strong>Caract\u00e8res autoris\u00e9s<\/strong> : uniquement 0\u20139. Coller un code depuis le presse-papiers doit <strong>filtrer<\/strong> et tronquer \u00e0 4 chiffres.<\/li>\n\n\n\n<li><strong>Compteur<\/strong> : d\u00e9marre \u00e0 la <strong>r\u00e9ception de l\u2019\u00e9cran<\/strong> (ex. 60 s). Tant que &gt; 0, le lien <strong>Renvoi<\/strong> est <strong>d\u00e9sactiv\u00e9<\/strong>.<\/li>\n\n\n\n<li><strong>Renvoi du code<\/strong> :\n<ul class=\"wp-block-list\">\n<li>Au timer = 0 : le lien devient cliquable \u201cRenvoyer le code\u201d.<\/li>\n\n\n\n<li>Au clic : <strong>r\u00e9initialise le compteur<\/strong> et affiche une confirmation (<code>Nouveau code envoy\u00e9.<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Validation<\/strong> :\n<ul class=\"wp-block-list\">\n<li>Auto-submit \u00e0 la saisie du 4e chiffre <strong>OU<\/strong> via un bouton \u201cValider\u201d.<\/li>\n\n\n\n<li>Si succ\u00e8s : navigation vers l&rsquo;\u00e9cran suivant (Ecran de connexion).<\/li>\n\n\n\n<li>Si \u00e9chec :\n<ul class=\"wp-block-list\">\n<li><strong>Tentative-1..n<\/strong> : message <code>Code incorrect<\/code>.<\/li>\n\n\n\n<li>\u00c0 <strong>n<\/strong> \u00e9checs (ex. 5) : captchas \/ verrouillage temporaire (ex. 5 min) ou parcours de r\u00e9cup\u00e9ration.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Expirations<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong>OTP<\/strong> : valide p.ex. 5 min c\u00f4t\u00e9 serveur.<\/li>\n\n\n\n<li><strong>Session de v\u00e9rification<\/strong> : invalide apr\u00e8s p.ex. 10 min d\u2019inactivit\u00e9.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5) Accessibilit\u00e9  &amp; UX<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Focus management<\/strong> : focus sur la <strong>premi\u00e8re case<\/strong> \u00e0 l\u2019ouverture ; avance automatique ; retour arri\u00e8re avec suppression.<\/li>\n\n\n\n<li><strong>Lecteurs d\u2019\u00e9cran<\/strong> :\n<ul class=\"wp-block-list\">\n<li>Titre : \u201cV\u00e9rification OTP\u201d.<\/li>\n\n\n\n<li>Description : \u201cEntrez le code \u00e0 4 chiffres envoy\u00e9 par SMS\u201d.<\/li>\n\n\n\n<li>Cases : \u201cChiffre 1\/4\u2026 4\/4\u201d.<\/li>\n\n\n\n<li>Timer : \u201cRenvoyer le code dans 54 secondes\u201d.<\/li>\n\n\n\n<li>Bouton renvoi : \u201cRenvoyer le code\u201d.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>1) Contexte &amp; objectif Nom de l\u2019\u00e9cran : V\u00e9rification OTPBut : V\u00e9rifier l\u2019identit\u00e9 de l\u2019utilisateur via un code OTP (One-Time Password) re\u00e7u par [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":11000,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-11108","docs","type-docs","status-publish","hentry"],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/6a70e7c73db9f245e650948d09d74f61?s=96&d=mm&r=g","author_name":"Annick N'dri","_links":{"self":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/11108"}],"collection":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/comments?post=11108"}],"version-history":[{"count":0,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/11108\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/docs\/11000"}],"wp:attachment":[{"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/media?parent=11108"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/doc_tag?post=11108"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/techhub.saworks.io\/fr\/wp-json\/wp\/v2\/doc_badge?post=11108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}