如何解决为什么自动检测 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);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。