我正在研究如何自动读取移动浏览器上的登录OTP。我的Web应用是基于Angular 7构建的。
一旦用户点击登录,AWS会向用户的手机发送一个带有6位数字代码的OTP。
我已经查阅了Google的SMS Retriever API,但它对我的情况没有帮助。
从移动浏览器中读取OTP是否可能?
我正在研究如何自动读取移动浏览器上的登录OTP。我的Web应用是基于Angular 7构建的。
一旦用户点击登录,AWS会向用户的手机发送一个带有6位数字代码的OTP。
我已经查阅了Google的SMS Retriever API,但它对我的情况没有帮助。
从移动浏览器中读取OTP是否可能?
这是一个老问题,在问题发布时,不可能
。
但现在我们可以在移动浏览器上读取OTP
。
使用WEBOTP API,我们可以检测移动设备上的网页OTP。
您可以使用以下代码检查此功能是否适用于您的浏览器
if (!window.OTPCredential) {
console.log('Feature Not Available');
}
else{
console.log('Feature Available');
}
OTPCredential
之前,我们需要有AbortController
,它将用于在一段时间后(可以基于时间或读取短信后)禁用WebOTP API(自动读取短信)。 const ac = new AbortController();
setTimeout(() => {
ac.abort();
}, 1 * 60 * 1000);
在上述代码中,WebOTP API将在1分钟后终止。
您可以拥有这种类型的HTML表单
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
现在,用户在他们的移动设备上接收到的短信格式将如下所示。
@BOUND_DOMAIN #OTP_CODE
以上行可以是您的短信的最后一行。
因此,短信格式将类似于以下内容:
Hi User, please do not share your OTP with anyone.
@www.example.com #123456
Web Authentication API
。 navigator.credentials.get([options])
需要使用上述代码来调用WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal //This is from the AbortController
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
}).catch(err => {
console.log(err);
});
现在,以下是演示代码:
HTML 代码:
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required >
</form>
JavaScript 代码:
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the Web OTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the Web OTP API.
ac.abort();
});
}
// Invoke the Web OTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
SMS格式可以是这样的:
Hi, this is a demo OTP
@www.mydomain.com #1234
像OYO(他们的技术博客)这样的公司使用了这个功能。
注意- 目前它还处于开发阶段,仅适用于Chrome 78
2020年更新
从Chrome 84
开始,它已正式推出。但仍有许多改进正在进行中。
是的,现在这是可能的。Chrome在84版本及以上发布了此功能。利用WEBOTP API,我们可以在移动设备的Web上检测到OTP。
代码 -
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const ac = new AbortController();
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
alert(otp.code)
}).catch(err => {
console.log(err)
});
})
} else {
alert('WebOTP not supported!.')
}
SMS格式 -
@www.amazon.com #1598.
在@www.amazon.com这个域名下进行验证,1598是一次性密码
简而言之,这是不可能的。因为移动设备无法访问文件系统。请使用React Native或类似技术。
我在搜索问题时发现了一个名为“https://web.dev/web-otp/” 的网站。它可能有所帮助,但我还没有实施过。