我可以在移动浏览器上自动读取 OTP 吗？

Question

我正在致力于在移动浏览器上自动读取登录 OTP。我的 Web 应用程序内置于 Angular 7.

用户点击登录后，OTP 将通过 AWS 发送到用户的手机，其中包含 6 位代码。

我已经查看了 Google 的 SMS Retriever API，但它对我的情况没有帮助。

是否可以从移动浏览器读取 OTP？

Answer 1

任何类型的浏览器都仅限于访问浏览器数据。这是出于安全目的。由于浏览器中的网站运行无法在浏览器外部访问，因此您无法在网站中访问移动设备收到的 OTP。

一般的经验法则是网站无法访问文件系统，因此浏览器之外的任何功能都被禁止。

如果您正在构建本机应用程序，则可以通过权限访问它。

Answer 2

这是一个旧问题，在问题发布的时间里，它是not possible。

但现在我们可以在 移动浏览器 上阅读 OTP。

使用 WEBOTP API 我们可以检测 移动设备 .

网络上的 OTP

您可以使用下面的代码来检查这是否适用于您的浏览器

if (!window.OTPCredential) {
  console.log('Feature Not Available');
}
else{
  console.log('Feature Available');
}

Note: If you are testing this on your laptop or desktop, then this above code will give you Feature Not Available. To test this over your laptop or desktop, you need to change the toggle to a mobile device.

SMS Receiver API JavaScript 和 Web OTP API W3C Community

您可以在上面link(s).

中获取文档

在使用 OTPCredential, we need to have 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

上面一行可以是您短信的最后一行。

@BOUND_DOMAIN 你的网站域名会不会像@www.examle.com
#OTP_CODE 将像#1234 一样作为验证的 OTP（只保留 4 到 6 位数字。）

因此短信格式将是这样的：

Hi User, please do not share your OTP with anyone.
@www.example.com #123456

要调用 WebOTP API 我们需要知道 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);
    });
  });
}

短信格式可以是这样的：

Hi, this is a demo OTP
@www.mydomain.com #1234

像 OYO(There Tech Blog) 这样的公司使用此功能。

注意 - 它目前处于开发阶段，可从 Chrome 78 获得

2020 年更新
Chrome 84起正式上线。但是，许多改进仍在进行中。

Answer 3

简而言之，这是不可能的。由于手机无法访问文件系统。使用本机反应或任何类似的反应。

正如我在搜索问题时看到的那样，我找到了“https://web.dev/web-otp/”。它可能会有所帮助，但我还没有实现它。

Answer 4

是的，现在这是可能的。 Chrome 84及以上版本发布此功能。在 WEBOTP API 的帮助下，我们可以在网络上为移动设备检测 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!.')
}

短信格式-

@www.amazon.com #1598.

这里@www.amazon.com是进行验证的域，1598是otp

演示 link- https://jyotishman.github.io/webOTPAPI/

我可以在移动浏览器上自动读取 OTP 吗？

Can I Auto read OTP on Mobile Browsers?

html

angular

typescript

one-time-password