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

Question

我正在努力在移动浏览器上自动读取登录 OTP。我的 Web 应用程序是用 Angular 7 构建的。

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

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

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

原文由 Varun Joshi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，现在这是可能的。 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

演示链接- https://jyotishman.github.io/webOTPAPI/

原文由 jyotishman saikia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个 老问题，在问题发布期间，它是 not possible 。

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

使用 WEBOTP API ，我们可以检测 移动设备 网络上的 OTP。

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

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

注意：如果您在笔记本电脑或台式机上对此进行测试，则上述代码将为您 提供 Feature Not Available 。要在您的笔记本电脑或台式机上对此进行测试，您需要将切换开关更改为移动设备。

SMS Receiver API JavaScript 和 Web OTP API W3C 社区

您可以在上面的链接中获取文档。

在使用 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>

现在，用户将在其移动设备上收到的 SMS 格式如下所示。

 @BOUND_DOMAIN #OTP_CODE

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

• @BOUND_DOMAIN 将您的网站域名设为@www.examle.com
• #OTP_CODE 将是用于身份验证的 OTP，如#1234（仅保留 4 到 6 位数字。）

因此 SMS 格式将是这样的：

 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 正式上线。但是，许多改进仍在进行中。

原文由 Not A Bot 发布，翻译遵循 CC BY-SA 4.0 许可协议