使用 Web OTP API 自动填充验证码

#使用 Web OTP API 自动填充验证码| 来源: 网络整理| 查看: 265

input 标签中使用 autocomplete="one-time-code" Safari 已经原生支持自动填充验证码, Chrome 是使用的是一个名为 Web OTP API 的方法。只能在HTTPS的域名中使用

发送短信的格式

发送的短信格式, 在需要绑定动态密码的域名前加上 @, 在验证码前加上 #

Your OTP is: 123456 @web-top.glitch.me #123456 复制代码前端使用 Web OTP API

HTML 部分

复制代码

input属性说明

不要使用 type="number", 会有上下箭头, 而是使用 type="text"inputmode="numeric"，显示优化后的键盘，方便其输入数字autocomplete="one-time-code" 这个属性仅在 Safari 中生效，获取短信验证码，Chrome中使用 Web OTP API 实现

JS 部分

if ('OTPCredential' in window) { // DOMContentLoaded 事件会等待 DOM树准备好 window.addEventListener('DOMContentLoaded', e => { const input = document.querySelector('input[autocomplete="one-time-code"]'); if (!input) return; const ac = new AbortController(); // 用户可以自己输入验证码并且提交，使用 AbortController 终止 Web OTP API 的自动填充 // AbortController 还可以终止 fetch 的请求 // 监听终止事件 ac.signal.addEventListener('abort', function(){}); const form = input.closest('form'); if (form) { form.addEventListener('submit', e => { ac.abort(); // 终止 Web OTP API 的自动填充 }); } navigator.credentials.get({ otp: { transport:['sms'] }, signal: ac.signal }).then(otp => { input.value = otp.code; if (form) form.submit(); }).catch(err => { console.log(err); }); }); } 复制代码参考

短信动态密码表单的最佳实践

Verify phone numbers on the web with the Web OTP API

【本文地址】

公司简介

联系我们