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

【问题标题】：Web OTP api giving DOMException: OTP retrieval timed outWeb OTP api 给出 DOMException：OTP 检索超时
【发布时间】：2021-07-22 17:30:44
【问题描述】：

我正在尝试使用 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);
                });
           // });
        }

【问题讨论】：

标签： javascript google-chrome one-time-password

【解决方案1】：

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

正确的格式是：

消息可以以可选的人类可读文本开头，可以是几个单词。例如：不要分享您的 OTP 或从不分享您的 OTP 或任何其他相关文本。
消息的最后一行起着重要作用，它由两部分组成。一个是主机部分，另一个是 OTP。调用 API 的网站 URL 的主机部分必须以“@”符号开头。下一部分是 OTP，前面应该有“#”井号。例如：@www.blabla.com #2334

更多检查：https://tech.oyorooms.com/implementing-automatic-sms-verification-for-websites-oyo-9375feba0749

【讨论】：