Can I Auto read OTP with WebOTP API in other port than 8080?

Viewed 545

I am working on auto reading a login OTP on a mobile browser. My web application is built in javascript.

This is an example of the code that always worked for me (documentation of 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>

But now I applied it on a landing page that works in a test port and the permission message to copy text from google comes out but it does not autocomplete. the url of the landing: https://example.com:1443/traffic/landing/

the sms message is

Your PIN is: 12345.

@ example.com # 12345

Note: I already did other work with OPT in url with port 8080 and never had this problem in CHROME browser. Example: https://example.com/traffic/landing/

1 Answers

Done !!!, after conducting tests directly in production I discovered that this application only works if the port is transparent. Since you cannot add a port in the sms format, you have to leave the url as the domain says https://example.com/traffic/landing/

Related