Ionic React应用Android/iOS端OTP自动读取与粘贴异常求助

问题1：Android端键盘不显示OTP建议 #

解决方案 #

• 完善域名关联配置：
  短信中的@domain.com需与应用绑定域名完全一致，同时必须配置Android专属的assetlinks.json文件（放置在域名的.well-known目录下），示例内容：

  [{
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.your.app.package",
      "sha256_cert_fingerprints": ["你的应用SHA-256指纹"]
    }
  }]
  

  注意：iOS依赖apple-app-site-association，Android依赖assetlinks.json，两者都需配置到位。
• 优化输入框属性：
  为每个ion-input添加以下属性，让Android键盘更精准识别OTP场景：

  <ion-input
    type="tel"
    autocomplete="one-time-code"
    inputMode="numeric"
    maxLength={1}
  />
  

• 修正WebOTP API实现：
  确保在HTTPS环境下（本地开发可使用ngrok代理），并正确使用AbortController：

  useEffect(() => {
    const ac = new AbortController();
    if ('OTPCredential' in window) {
      navigator.credentials.get({
        otp: { transport: ['sms'] },
        signal: ac.signal
      }).then((otp) => {
        const code = otp.code;
        const updatedValues = code.split('');
        setOTPValues(updatedValues);
        setActiveInput(Math.min(code.length, length - 1));
      }).catch((err) => {
        console.error(err);
      });
    }
    return () => ac.abort();
  }, []);
  

问题2：粘贴仅填充第一个输入框且handlePaste未触发 #

解决方案 #

• 区分系统自动填充与手动粘贴：
  Android键盘的粘贴建议属于系统级自动填充，不会触发onPaste事件，需通过onChange事件处理自动填充内容：

  const handleOnChange = (index: number, value: string) => {
    const updatedValues = [...otpValues];
    updatedValues[index] = value.replace(/[^0-9]/g, ''); // 过滤非数字内容
    setOTPValues(updatedValues);
    // 自动聚焦到下一个输入框
    if (value && index < length - 1) {
      setActiveInput(index + 1);
    }
  };
  

• 重写handlePaste逻辑：
  原代码未正确处理粘贴内容的填充，以下是修正后的实现（需统一OTP长度与输入框数量，示例为6位OTP对应6个输入框）：

  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const pastedText = e.clipboardData.getData('text/plain').trim();
    const otpCode = pastedText.match(/\d{6}/)?.[0]; // 提取6位数字OTP
    if (!otpCode) return;
  
    const updatedValues = otpCode.split('');
    setOTPValues(updatedValues);
    setActiveInput(Math.min(otpCode.length, length - 1));
  };
  

• 绑定事件到所有输入框：
  每个ion-input都需绑定onPaste={handleOnPaste}和onChange={(e) => handleOnChange(index, e.target.value)}。

问题3：handlePaste函数中console/alert无输出 #

解决方案 #

• 检查事件绑定：确认所有输入框都正确绑定了onPaste事件，未绑定的输入框触发粘贴时不会执行函数。
• 添加入口调试：在函数开头添加调试语句，先确认事件是否触发：

  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    console.log('Paste event triggered'); // 验证事件是否触发
    e.preventDefault();
    // 剩余逻辑...
  };
  

• 修正无效判断：原代码中if (pastedData)对数组永远为真，改为判断是否提取到有效OTP代码（如上述修正后的逻辑）。

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