web 中的自动读取 OTP 并从 web 中的剪贴板复制粘贴 OTP 不适用于 android/iOS

Question

我正在使用Ionic React应用程序，并且对构建 ionic react 应用程序是全新的。 目前，我正在尝试通过在用户登录/注册期间通过android/iOS的消息获取OTP来自动填充 OTP（一次性密码）。 目前，每次新注册/登录时，OTP 都会通过Twilio's默认 SMS 服务发送给用户。 因此，当 OTP 到达用户时，用户可以手动键入 OTP 或从消息中复制 OTP 并将其粘贴到 web 应用程序中。 所以目前用户可以从消息中复制 OTP 并粘贴（有handlePaste function 会被触发），但是

发布我面临的问题

• 是当OTP到达时，手机键盘中的OTP建议不会出现在android中，而是在iOS中工作。
• 当用户从消息中复制 OTP 并返回应用程序并单击输入字段时，web 键盘会显示在键盘中复制的 OTP。 现在，如果用户单击该 OTP，则只会填充输入字段的第一个字段，而其他字段留空（使用 4 个单独的输入字段） ，并且不会触发handlePaste function。
• 我尝试在粘贴 function 中添加控制台/警报，但没有记录任何内容。

短信格式

Your OTP is: 123456.

@domain.com #123456

到目前为止尝试的方法：

• 添加了 HTML 属性autocomplete='one-time-code'以从消息中获取 OTP。 参考链接： https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element?language=objc

• 使用clipboardData.getData来实现相同的目的。

• 域绑定代码并添加文件apple-app-site-association文件，参考链接： https://developer.apple.com/documentation/xcode/supporting-associated-domains

• 将webOTP API 集成到应用程序中。 参考链接以集成相同。 https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API和 chrome 文档https://developer.chrome.com/blog/cross-device-webotp/

• 使用navigator.getCredentials获取 OTP - 无效。

手柄粘贴function代码：

const length = 6;
const [activeInput, setActiveInput] = useState(0)
const [otpValues, setOTPValues] = useState(Array<string>(length).fill(''))


    const handleOnPaste = 
    (e: React.ClipboardEvent<HTMLInputElement>) => {
        e.preventDefault()
        const pastedData = e.clipboardData
            .getData('text/plain')
            .trim()
            .slice(0, length - activeInput)
            .split('')
        if (pastedData) {
            let nextFocusIndex = 0
            const updatedOTPValues = [...otpValues]
            updatedOTPValues.forEach((val, index) => {
                
                    console.log(pastedData)
                        nextFocusIndex = index
                    
                
            })
            setActiveInput(Math.min(nextFocusIndex + 1, length - 1))
        }
    }

在 function 中使用但不起作用的导航器凭据代码：

navigator.credentials.get({
  otp: { transport:['sms'] },
  signal: ac.signal
}).then((otp) => {
  console.log(otp)
  
}).catch((err) => {
  console.error(err);
});

如果有人可以帮助我，我将不胜感激:)

Answer 1

问题实际上出在 iOS/android 手机的 web 浏览器上。 在移动 web 浏览器中，当从键盘剪贴板粘贴文本/数字时，不会触发onPaste function。 看起来像这样。

因此，简而言之，您的handlePaste function永远不会被触发，并且您的clipboardData永远不会在其中获得值，但是您的input元素的onchange function 会被触发。

解决方案：

1. 你可以做的是，在你的onChange function 检查输入值。
2. 检查value长度是否大于 1。
3. 如果大于 1，则手动将数据添加到clipboardData中。
4. 然后调用handlePaste function。

代码：

将此添加到您的onChange function 中。

const handleChange = (e) => {
  const val = e.target.value;

  if (!val) {
    e.preventDefault();
    return;
  }

  // add this condition to manually trigger the paste
  // function and manually send the value to clipboard

  else if (val.trim().length > 1) {
    e.clipboardData = {
      getData: () => val.trim(),
    };
    handleOnPaste(e);
  } else {

    // do any other required changes
  }
};

这将解决您的OTP仅填写单输入的问题。