如何在 Angular 17 中实现短信验证码自动填充到表单输入框-html教程-PHP中文网

如何在 Angular 17 中实现短信验证码自动填充到表单输入框

本文详解 Angular 17 中利用 Web OTP API 自动捕获并填充短信验证码的完整方案，涵盖类型声明修复、AbortController 正确用法、OTPCredential 类型断言及模板配置要点，解决常见 TS 编译错误与运行时兼容性问题。

本文详解 angular 17 中利用 web otp api 自动捕获并填充短信验证码的完整方案，涵盖类型声明修复、`abortcontroller` 正确用法、`otpcredential` 类型断言及模板配置要点，解决常见 ts 编译错误与运行时兼容性问题。

在 Angular 17 中集成 Web OTP（One-Time Password）API 实现短信验证码自动填充，是提升用户登录/验证体验的关键实践。但直接使用原生 navigator.credentials.get() 会因 TypeScript 类型不匹配和 API 演进而报错——如 TS2322（otp 属性不被 CredentialRequestOptions 接受）和 TS2339（content.code 属性不存在）。根本原因在于：Angular 的严格类型检查未默认识别实验性 OTP 类型，且 AbortController.signal 不能直接赋值给 CredentialRequestOptions.signal（该属性实际应为 AbortSignal，但旧版声明存在偏差）。

✅ 正确实现需三步：

1. 类型增强与安全断言
在组件顶部添加类型声明，显式扩展 CredentialRequestOptions 和 Credential 接口：

// 声明扩展类型（可放在 component.ts 顶部或 global.d.ts 中）
declare global {
  interface CredentialRequestOptions {
    otp?: { transport?: string[] };
  }
  interface OTPCredential extends Credential {
    code: string;
  }
}

2. 修正 credentials.get() 调用逻辑

signal 应传入 abortController.signal（而非 abortController）；
使用 as OTPCredential 断言返回值类型，避免 code 属性访问错误：

async otpRequest() {
  if (!('OTPCredential' in window)) {
    console.warn('Web OTP not supported');
    return;
  }

  const abortController = new AbortController();
  const timeoutId = setTimeout(() => abortController.abort(), 10_000);

  try {
    const credential = await navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: abortController.signal, // ✅ 正确传入 signal
    }) as OTPCredential; // ✅ 强制类型断言

    const otpCtrl = this.frm.get('codeField');
    if (otpCtrl) {
      otpCtrl.patchValue(credential.code); // ✅ 现在 code 可安全访问
    }
  } catch (err) {
    if (err instanceof DOMException && err.name === 'AbortError') {
      console.log('OTP prompt timed out');
    } else {
      console.error('OTP retrieval failed:', err);
    }
  } finally {
    clearTimeout(timeoutId);
  }
}

3. HTML 模板关键配置
确保元素满足 Web OTP 触发条件：

autocomplete="one-time-code"（必需，大小写敏感）；
inputmode="numeric"（优化软键盘）；
type="text"（不可用 type="number"，否则 OTP 不会触发）；
添加 id 和 name 属性增强兼容性：

<mat-form-field class="codeField"><mat-label>SMS Code</mat-label><input type="text" matinput formcontrolname="codeField" id="codeField" name="codeField" autocomplete="one-time-code">
    inputmode="numeric"
    maxlength="6"
  />
</mat-form-field>

⚠️ 重要注意事项：