Web OTP api 给出 DOMException：OTP 检索超时

问题描述

我正在尝试使用 Web OTP API 的自动填充功能。在移动设备中，在对其进行测试时，我会弹出一个窗口以允许读取 OTP，但是在允许它不会填充 OTP 字段之后。在控制台中，我收到请求超时错误。有人对此有任何想法。这真的很有帮助。 下面是我写的代码（react app）:-

            console.log("otp credential in window");
            //window.addEventListener('DOMContentLoaded',e => {
                const input = document.querySelector('input[autocomplete="one-time-code"]');
                console.log("input is ",input);
                if (!input) return;
                const ac = new AbortController();
                console.log("before form");
                const form = input.closest('form');
                if (form) {
                    console.log("inside if form ");
                    form.addEventListener('submit',e => {
                        ac.abort();
                    });
                }
                navigator.credentials.get({
                    otp: { transport:['sms'] },signal: ac.signal
                }).then(otp => {
                    console.log("promise resolved");
                    input.value = otp.code;
                    if (form) form.submit();
                }).catch(err => {
                    console.log(err);
                });
           // });
        }

解决方法

您必须遵循 OTP 的约定，您一直弄错了，因此 API 无法读取 OTP。

正确的格式是：

1. 该消息可以以可选的人类可读文本开头，该文本可以是几个字。例如：不要分享您的 OTP 或永远不要分享您的 OTP 或任何其他相关文本。
   
2. 消息的最后一行很重要，它由两部分组成。一个是主机部分，另一个是 OTP。调用 API 的网站 URL 的主机部分必须以“@”符号开头。下一部分是 OTP，前面应该有“#”英镑符号。例如：@www.blabla.com #2334
   
   更多检查：https://tech.oyorooms.com/implementing-automatic-sms-verification-for-websites-oyo-9375feba0749