L'API WebOTP peut désormais recevoir des mots de passe à usage unique à partir d'iFrames.
Les OTP (mots de passe à usage unique) envoyés par SMS sont couramment utilisés pour valider les numéros de téléphone, par exemple comme deuxième étape d'authentification, ou pour valider des paiements sur le Web. Toutefois, en passant du navigateur à l'application SMS, vous pouvez copier-coller des données saisir l'OTP permet de faire facilement des erreurs et de compliquer l'expérience utilisateur.
L'API WebOTP permet aux sites Web d'automatiser les opérations obtenir le mot de passe à usage unique à partir d'un SMS et le saisir automatiquement dans le formulaire pour les utilisateurs, d'un simple geste, l'application. Le SMS est spécialement formaté et lié à l'origine, ce qui atténue les risques de voler un mot de passe à usage unique par les sites d’hameçonnage.
WebOTP ne prend pas encore en charge le ciblage d'une origine. dans un iFrame. Il sert généralement à confirmer un paiement, en particulier avec 3D Secure. Avoir le point commun compatible avec plusieurs origines les cadres iFrame, l'API WebOTP fournit Mots de passe à usage unique liés à des origines imbriquées à partir de Chrome 91.
Fonctionnement de l'API WebOTP
L'API WebOTP est assez simple:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
Le message SMS doit être formaté avec le code à usage unique lié à l'origine codes.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Notez que sur la dernière ligne, elle contient l'origine à lier, précédée par
Un @
suivi du mot de passe à usage unique précédé de #
.
Lorsque vous recevez un SMS, une barre d'informations s'affiche et invite l'utilisateur à
valider son numéro de téléphone. Lorsque l'utilisateur clique sur le bouton Verify
,
le navigateur redirige automatiquement le mot de passe à usage unique vers le site et résout le
navigator.credentials.get()
Le site Web peut alors extraire l'OTP et remplir
la procédure de validation.
Pour en savoir plus sur l'utilisation de WebOTP, consultez la page Valider des numéros de téléphone sur le Web avec le API WebOTP
Cas d'utilisation des iFrames multi-origines
Saisir un OTP dans un formulaire au sein d'un iFrame d'origine différente est courant pour les paiements différents scénarios. Certains émetteurs de cartes de crédit exigent une étape de validation supplémentaire pour vérifier l'authenticité du payeur. Il s'agit de 3D Secure. généralement exposés dans un iFrame sur la même page que s'il faisait partie flux de paiement.
Exemple :
- Un utilisateur se rend sur
shop.example
pour acheter une paire de chaussures avec une carte de crédit. - Une fois le numéro de carte saisi, le fournisseur de services de paiement intégré affiche un
formulaire à partir de
bank.example
dans un iFrame demandant à l'utilisateur de valider son numéro de téléphone pour régler vos achats rapidement. bank.example
envoie à l'utilisateur un SMS contenant un mot de passe à usage unique pour qu'il puisse le saisir pour valider son identité.
Utiliser l'API WebOTP depuis un iFrame d'origine différente
Pour utiliser l'API WebOTP à partir d'un iFrame multi-origine, vous devez effectuer deux opérations choses:
- Annotez l'origine du cadre supérieur et l'origine de l'iFrame dans le texte du SMS. .
- Configurer une règle d'autorisations pour permettre à l'iFrame d'origine différente de recevoir l'OTP directement de l'utilisateur.
Vous pouvez essayer la version de démonstration par vous-même à l'adresse https://web-otp-iframe-demo.stackblitz.io.
Annoter les origines liées dans le message SMS
Lorsque l'API WebOTP est appelée depuis un iFrame, le message SMS doit
inclure l'origine du cadre supérieur précédée de @
, suivie du mot de passe à usage unique précédé de #
suivie de l'origine de l'iFrame, précédée de @
.
@shop.example #123456 @bank.exmple
Configurer une règle d'autorisation
Pour utiliser WebOTP dans un iFrame multi-origine, l'intégrateur doit accorder l'accès à ce API via la règle d'autorisation otp-credentials pour éviter toute action comportemental. En général, il existe deux façons d'atteindre cet objectif:
- via l'en-tête HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- via l'attribut iFrame
allow
:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Voir d'autres exemples de spécification d'une règle d'autorisation
Mises en garde
Niveaux d'imbrication
Pour le moment, Chrome n'accepte que les appels d'API WebOTP à partir d'iFrames multi-origines qui n'ont pas plus d'une origine unique dans sa chaîne ascendante. Dans scénarios suivants:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
WebOTP dans b.com est pris en charge, mais pas dans c.com.
Notez que le scénario suivant n'est pas non plus accepté en raison d'une absence de demande. et de la complexité de l'expérience utilisateur.
- a.com -> b.com -> a.com (appel d'API WebOTP)
Interopérabilité
Bien que les moteurs de navigateur autres que Chromium n'implémentent pas l'API WebOTP,
Safari partage le même format de SMS.
compatible avec input[autocomplete="one-time-code"]
. Dans Safari, dès qu'un
Un SMS contenant un format de code à usage unique lié à l'origine arrive avec la correspondance
origine, le clavier suggère de saisir l'OTP dans le champ de saisie.
Depuis avril 2021, Safari prend en charge iFrame avec un format de SMS unique utilisant
%
.
Cependant, au terme de la discussion sur les spécifications, nous espérons que l'utilisation de @
à la place
la mise en œuvre d'un format SMS compatible
va converger.
Commentaires
Vos commentaires nous seront très utiles pour améliorer l'API WebOTP, alors n'hésitez pas à l'essayer. et contactez-nous ce que vous pensez.
Ressources
- Valider des numéros de téléphone sur le Web avec l'OTP en ligne API
- Bonnes pratiques concernant les formulaires OTP envoyés par SMS
- API WebOTP
- Codes à usage unique liés à l'origine envoyés via SMS
Photo de rupixen.com sur Unsplash