我可以在 8080 以外的端口使用 WebOTP API 自动读取 OTP 吗？答案

【问题标题】：Can I Auto read OTP with WebOTP API in other port than 8080?我可以在 8080 以外的端口使用 WebOTP API 自动读取 OTP 吗？
【发布时间】：2021-09-06 14:46:30
【问题描述】：

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

这是一个一直为我工作的代码示例（https://web.dev/web-otp/ 的文档）：

<form action="/post.html">
  <input autocomplete="one-time-code" required />
  <input type="submit" />
</form>
<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) => {
          alert(err);
        });
        
    });
  }
</script>

但是现在我将它应用到一个在测试端口中工作的登录页面上，并且出现了从谷歌复制文本的许可消息，但它没有自动完成。登陆网址： https://example.com:1443/traffic/landing/

短信是

Your PIN is: 12345.

@ example.com # 12345

注意：我已经在带有端口 8080 的 url 中使用 OPT 进行了其他工作，并且在 CHROME 浏览器中从未遇到过这个问题。示例：https://example.com/traffic/landing/

【问题讨论】：

标签： javascript one-time-password

【解决方案1】：

完成！！！，直接在生产环境中进行测试后，我发现这个应用程序只有在端口是透明的情况下才能工作。由于无法添加 sms 格式的端口，因此您必须将 url 保留为域所说的https://example.com/traffic/landing/

【讨论】：