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

问题描述

我正在研究在移动浏览器上自动读取登录 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/

解决方法

完成！！！，在直接在生产中进行测试后，我发现该应用程序仅在端口透明时才有效。由于您无法以短信格式添加端口，因此您必须将网址保留为域名https://example.com/traffic/landing/

javascript one-time-password