Web OTP API over Web Angular 13 无法检索短信

Question

我有Angular项目版本8和13，在Chrome 99.0.4844.88中使用移动设备时，我需要实现自动OTP检索。

async otpRequest() {
if ('OTPCredential' in window) {
const abortController = new AbortController();
let timer = setTimeout(() => {
abortController.abort();
}, 100 * 1000);

let o = {
otp: { transport: ['sms'] },
signal: abortController.signal
};

let content;
try{
content = await window.navigator['credentials'].get(o);
alert(content.code); 
}catch(err){
alert(err); 
} 
}
}

I am getting this message as expected:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/EexIJ.jpg
But the sms code can not be retrieved , it seems the get function can not access the sms box on my phone.

Answer 1

我在Angular 11中遇到了类似的问题。通过从ChangeDetectorRef调用detectChanges修复了此问题。

使用.then after.get(o((而不是async/await(或手动触发changeDetection。

这就是我所做的->只需在构造函数中添加ChangeDetectorRef

constructor(private cdr: ChangeDetectorRef) {
super();
}

等待后打电话给this.cdr.detectChanges()，类似于这个

content = await window.navigator['credentials'].get(o);
this.cdr.detectChanges();

其他故障排除步骤

1. 请确保在设置超时100秒之前收到OTP，因为您将在100秒后中止控制器
2. 请确保收到的信息格式如下
   注意：@后面的文本将是域，#后面的文本是OTP编号

您的身份验证代码是123456。

@example.com#12346

3. 检查浏览器兼容性