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

Question

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

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

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

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

Answer 1

这是一个老问题，在发布问题的时候，它是not possible。

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

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

您可以使用下面的代码来检查这是否在您的浏览器上工作

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

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

SMS 接收器 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>

现在，用户在其移动设备上收到的短信格式如下。

@BOUND_DOMAIN #OTP_CODE

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

• @BOUND_DOMAIN将您的网站域与@www.examle.com 一样
• #OTP_CODE将是用于身份验证的 OTP，如 #1234（仅保留 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（有技术博客）使用此功能。

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

更新 2020
从Chrome 84它正式启动。但是，许多改进仍在进行中。

Answer 2

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