为什么自动检测 otp 没有在 React 中渲染代码

问题描述

我使用 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 输出的图像

这是我允许浏览器访问后的输出

解决方法

在jsx组件中使用这个

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

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

,

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

 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);
            });