收到“DOMException：OTP 检索已取消。”使用 WebOTP API 时

Question

我正在使用 WebOTP API 测试 WebOTP API 自动填充验证码。

我正在尝试在跨源 iframe 内填充 HTML 输入元素。 iframe 是一个 Preact 应用程序。

我将以下内容添加到输入所在的 iframe 代码中：

useEffect(() => {
    if ('OTPCredential' in window) {
        const input = document.querySelector<HTMLInputElement>(
            'input[name="code-input-0"]',
        );
        if (!input) return;
        const ac = new AbortController();
        navigator.credentials
            .get({
                otp: { transport: ['sms'] },
                signal: ac.signal,
            })
            .then(otp => {
                input.value = otp!.code;
                ac.abort();
            })
            .catch(err => {
                console.error(err);
                ac.abort();
            });
    }
});

为了支持跨源 iframe，我向 iframe 标记添加了

allow='otp-credentials'

属性。

但是，当我导航到包含输入的页面时，我在控制台中看到

DOMException: OTP retrieval was cancelled.

。当我发送短信时，我看到提示叠加，要求允许 Chrome 读取消息并输入代码。当我选择“允许”时，什么也没有发生。

我发送的文字格式是：

Your OTP is: 12345
@top-level-domain.com #12345 @iframe-domain.com

文本格式似乎没问题，因为它提示叠加。但我不确定为什么页面加载时会发生 DOMException。任何关于为什么会发生这种情况的见解将不胜感激。

Answer 1

我认为你应该查看这篇文章：https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API#controlling_access_to_the_api

也许您只是忘记向 iframe 或类似的东西添加“src”属性。