为什么自动检测 otp 没有在 React 中呈现代码

Question

我在使用 web-otp documentation 的应用程序中使用自动检测 otp。我在我的应用程序中使用了 bleow 代码

        otprenderGetMobile() {
                const{ otpValue}=this.props;
                let signal = new AbortController();
        
                setTimeout(() => {
                    // abort after 10 minutes
                    signal.abort();
                }, 10 * 60 * 1000);
        
                let { code, type } = navigator.credentials.get({
                    abort: signal,
                    otp: {
                        transport: ["sms"]
                    }
                }).then(otp=>{
                alert('otp value is: ',JSON.stringify(otp));
                alert('code value is: ',JSON.stringify(code));
                alert('type value is: ',JSON.stringify(type));
                    otpValue = otp;
                });
            }

我的 htm 是

<input
  type="text"
  id="otp"
  name="otp"
  autocomplete="one-time-code"
/>

我的 OTP 消息格式是

3052 is your Myapp verification code

@dev.myapp.com #3052

它在 android 设备上工作正常，但问题是当我允许设备权限时，otp 不会在应用程序中提示。我附上了 android 输出的图像

here are the outputs after i allow browser access

Answer 1

在 jsx 组件中使用它

<input
  type="text"
  autocomplete="one-time-code"
/>

资源https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete

Answer 2

我已经通过替换下面的代码解决了这个问题

 let { code, type } = navigator.credentials.get({
                    abort: signal,
                    otp: {
                        transport: ["sms"]
                    }
                }).then(otp=>{
                alert('otp value is: ',JSON.stringify(otp));
                alert('code value is: ',JSON.stringify(code));
                alert('type value is: ',JSON.stringify(type));
                    otpValue = otp;
                });

有了这个

 navigator.credentials.get({
                otp: { transport: ['sms'] },
                signal: ac.signal
            }).then(otp => {
               console.log('your otp code is',otp.code)
            }).catch(err => {
                console.log(err);
            });

为什么自动检测 otp 没有在 React 中呈现代码

Why does Auto detect otp is not rendering the code in React

javascript

one-time-password

reactjs