移动端（h5）自动填充短信验证码

您所在的位置：网站首页 › 小米手机短信验证码自动填充 › 移动端（h5）自动填充短信验证码

移动端（h5）自动填充短信验证码

2024-07-13 16:06| 来源: 网络整理| 查看: 265

需求：手机验证码登录，手机收到验证码后，

验证码自动填充到我们的h5移动端页面上（不是原生Android）,

需要1.chrome浏览器版本86以上，2.有hppts域名证书的网站

具体实现代码：

代码语言：javascript复制 Web OTP API Simplest div { font-family: sans-serif; } The simplest Web OTP API demo Send an SMS that includes @web-otp.glitch.me #12345 at the last line to this phone. Enter OTP here: ;input type="text" autocomplete="one-time-code" inputmode="numeric" /; ;script; if ('OTPCredential' in window) { window.addEventListener('DOMContentLoaded', e =; { const input = document.querySelector('input[autocomplete="one-time-code"]'); if (!input) return; const ac = new AbortController(); const form = input.closest('form'); if (form) { form.addEventListener('submit', e =; { ac.abort(); }); } navigator.credentials.get({ otp: { transport:['sms'] }, signal: ac.signal }).then(otp =; { input.value = otp.code; if (form) form.submit(); }).catch(err =; { console.log(err); }); }); } ;/script; See the source code and play with it at https://glitch.com/edit/#!/web-otp Learn more at http://web.dev/web-otp. if ("OTPCredential" in window) { window.addEventListener("DOMContentLoaded", (e) => { const input = document.querySelector( 'input[autocomplete="one-time-code"]' ); if (!input) return; const ac = new AbortController(); const form = input.closest("form"); if (form) { form.addEventListener("submit", (e) => { ac.abort(); }); } alert(JSON.stringify(ac)); navigator.credentials .get({ otp: { transport: ["sms"] }, signal: ac.signal, }) .then((otp) => { alert(JSON.stringify(otp)); input.value = otp.code; if (form) form.submit(); }) .catch((err) => { console.log(err); }); }); }

api文档参考：https://web.dev/web-otp/#see-it-in-action

【本文地址】

移动端（h5）自动填充短信验证码

移动端（h5）自动填充短信验证码

今日新闻

推荐新闻