javascript - Autoread OTP in web and copy paste OTP from clipboard in web not working for androidiOS - Stack Overflow

admin管理员组

文章数量:1342629

I'm using Ionic React application and pletely new to building ionic react apps. Currently I'm trying to autofill OTP(One Time Password) by fetching the OTP through message's of android/iOS during the login/signup of user. Currently the OTP is being sent to user on every new signup /login through Twilio's default SMS service. So when the OTP arrives to the user , then the user can either type the OTP manually or copy the OTP from messages and paste the same in the web application. So currently the user is able copy the OTP from message and paste ( there is handlePaste function which will get triggered ), but the

Issue what I'm facing

• is when the OTP arrives , then the suggestion of OTP in keyboard of the mobile doesn't show up in android but working in iOS.
• When the user copies the OTP from messages and es back to the application and clicks on input field , then the web keyboard shows the OTP copied in keyboard. Now if the user clicks on that OTP then only the 1st field of the input field gets populated and the other fields are left blank (using 4 separate input fields) and the handlePaste function doesn't gets triggered.
• I tried adding console/alert inside paste function , but nothing gets logged.

SMS FORMAT

Your OTP is: 123456.

@domain #123456

Approaches tried so far :

• Added the HTML attributes autoplete='one-time-code' to fetch the OTP from Messages . Reference link :

• Used clipboardData.getData to achieve the same.

• Domain bound the codes and adding the file apple-app-site-association file , Reference link :

• Integrate webOTP API into the app. Reference link to integrate the same. and chrome docs /

• Used navigator.getCredentials to obtain OTP - didn't work.

handlePaste function code :

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))
        }
    }

Navigator credentials code which is used inside the function but didn't work :

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

I would really appreciate if someone could help me out :)

I'm using Ionic React application and pletely new to building ionic react apps. Currently I'm trying to autofill OTP(One Time Password) by fetching the OTP through message's of android/iOS during the login/signup of user. Currently the OTP is being sent to user on every new signup /login through Twilio's default SMS service. So when the OTP arrives to the user , then the user can either type the OTP manually or copy the OTP from messages and paste the same in the web application. So currently the user is able copy the OTP from message and paste ( there is handlePaste function which will get triggered ), but the

Issue what I'm facing

• is when the OTP arrives , then the suggestion of OTP in keyboard of the mobile doesn't show up in android but working in iOS.
• When the user copies the OTP from messages and es back to the application and clicks on input field , then the web keyboard shows the OTP copied in keyboard. Now if the user clicks on that OTP then only the 1st field of the input field gets populated and the other fields are left blank (using 4 separate input fields) and the handlePaste function doesn't gets triggered.
• I tried adding console/alert inside paste function , but nothing gets logged.

SMS FORMAT

Your OTP is: 123456.

@domain. #123456

Approaches tried so far :

• Added the HTML attributes autoplete='one-time-code' to fetch the OTP from Messages . Reference link : https://developer.apple./documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element?language=objc

• Used clipboardData.getData to achieve the same.

• Domain bound the codes and adding the file apple-app-site-association file , Reference link : https://developer.apple./documentation/xcode/supporting-associated-domains

• Integrate webOTP API into the app. Reference link to integrate the same. https://developer.mozilla/en-US/docs/Web/API/WebOTP_API and chrome docs https://developer.chrome./blog/cross-device-webotp/

• Used navigator.getCredentials to obtain OTP - didn't work.

handlePaste function code :

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))
        }
    }

Navigator credentials code which is used inside the function but didn't work :

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

I would really appreciate if someone could help me out :)

• javascript
• android
• reactjs
• autofill
• ionic-react

Share Improve this question Follow edited Sep 13, 2022 at 14:34 jarivak asked Sep 13, 2022 at 14:20 jarivakjarivak 85811 gold badge1414 silver badges2828 bronze badges 4

• 2 If you're using Capacitor for Android/iOS, try using the Clipboard plugin: capacitorjs./docs/apis/clipboard – Patrick Kenny Commented Sep 16, 2022 at 14:11
• Will definitely give this a try . – jarivak Commented Sep 17, 2022 at 18:25
• Did you ever managed to figure this out? Having same issue. I have a feeling it has to do with the sender SMS phone number – Spock Commented Apr 19, 2023 at 21:43
• The below answer worked for me , you can give it a try. – jarivak Commented Apr 20, 2023 at 4:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The Problem actually is with web browser of iOS/android phones. In mobile web browsers the onPaste function never gets triggered when the text/number is paste from keyboard clipboard. Which looks something like this.

So in short your handlePaste function never gets triggered and your clipboardData never gets value inside it but your onchange function of input element gets triggered.

SOLUTION :

1. What you can do is , inside your onChange function check for the input value.
2. Check if the value length is greater than 1.
3. If it is greater than 1 , then manually add the data into clipboardData.
4. Then call the handlePaste function.

Code :

Add this in your 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
  }
};

This will solve your issue of OTP only gets filled in Single input.

本文标签：