Angular中OTPCredential返回空凭证问题求助

核心问题：短信格式不符合WebOTP API规范 #

WebOTP API对触发验证码自动填充的短信内容有强制格式要求，你的短信内容send 417618 to MyComputer完全不符合规范，导致手机无法识别这条短信属于你的Angular应用，因此浏览器返回空的OTPCredential对象。

正确的短信格式要求 #

短信必须包含以下关键元素：

• 清晰的验证码数字串
• 你的应用域名（格式为@<your-domain.com>，用于匹配对应网站）
• 建议添加#前缀的验证码（帮助系统更精准识别）

示例正确格式：

Your verification code is 417618. @your-app-domain.com #417618

应用端代码优化建议 #

你的代码逻辑本身没问题，但有两个小细节可以优化：

1. 方法名拼写错误：laodOtpApi应改为loadOtpApi
2. 移除不必要的//@ts-ignore，通过定义类型解决TypeScript报错：

interface OTPOptions {
  otp: { transport: string[] };
  signal?: AbortSignal;
}

// 调用时
navigator.credentials.get({
  otp: { transport: ['sms'] },
  signal: this.abortController.signal,
} as OTPOptions)

验证步骤 #

1. 修改短信发送模板为符合规范的格式，替换your-app-domain.com为你实际的域名
2. 重新触发短信发送，测试是否能正常获取content.code值

内容的提问来源于stack exchange，提问作者cre8