我的小程序
指尖壁纸
指尖卡路里
指尖待办
每日一笑
理想是火，点燃熄灭的灯。
随机推荐
标签云
我和我家宝
我们相恋了：
10000年
10000年
移动端（h5）自动填充短信验证码
技术 683 2021-04-26 15:31
需求：手机验证码登录，手机收到验证码后，
验证码自动填充到我们的h5移动端页面上（不是原生Android）,
需要1.chrome浏览器版本86以上，2.有hppts域名证书的网站
具体实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web OTP API Simplest</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
div {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>The simplest Web OTP API demo</h1>
<div>
Send an SMS that includes
<pre><code>@web-otp.glitch.me #12345</code></pre>
at the last line to this phone.
</div>
<div style="border:1px solid; padding: 5px; 10px; margin: 10px 0;">
<form action="/post" method="post">
Enter OTP here:
<input
type="text"
autocomplete="one-time-code"
inputmode="numeric"
name="one-time-code"
/>
<input type="submit" value="Submit" />
</form>
</div>
<pre><code>
<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>
</code></pre>
<div>
See the source code and play with it at
<a href="https://glitch.com/edit/#!/web-otp"
>https://glitch.com/edit/#!/web-otp</a
>
</div>
<div>
Learn more at <a href="http://web.dev/web-otp">http://web.dev/web-otp</a>.
</div>
<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();
});
}
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);
});
});
}
</script>
</body>
</html>
api文档参考：https://web.dev/web-otp/#see-it-in-action
作者: Bill 本文地址: http://biaoblog.cn/info?id=1619422260000
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！