Can I Auto read OTP on Mobile Browsers?

问题

I am working on auto reading a login OTP on a mobile browser. My web application is built in Angular 7.

Once the user clicks on login, an OTP is sent via AWS to the user's mobile with a 6 digit code.

I have looked up Google's SMS Retriever API but it does not help my case.

Is reading an OTP from a mobile browser possible?

回答1:

Yes, this is possible now. Chrome release this feature in version 84 and above. With the help of WEBOTP API we can detect OTP on the web for mobile devices.

code -

if ('OTPCredential' in window) { 
  window.addEventListener('DOMContentLoaded', e => {
    const ac = new AbortController();
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      alert(otp.code)
    }).catch(err => {
      console.log(err)
    });
  })
} else {
  alert('WebOTP not supported!.')
}

SMS Format-

@www.amazon.com #1598.

Here @www.amazon.com is the domain where verification will take place and 1598 is the otp

Demo link- https://jyotishman.github.io/webOTPAPI/

回答2:

It is an old question, during the time when the question was posted, it was not possible.

But now we can read OTP on mobile browsers.

You can use the below code to check whether this work on your browser or not

if (!window.OTPCredential) {
  console.log('Feature Not Available');
}
else{
  console.log('Feature Available');
}

Note: If you are testing this on your laptop or desktop, then this above code will give you Feature Not Available. To test this over your laptop or desktop, you need to change the toggle to a mobile device.

SMS Receiver API JavaScript and Web OTP API W3C Community

You can get the documentation in the above link(s).

Companies like Swiggy uses this feature.

NOTE- It is in the development phase as of now and available from Chrome 78

UPDATE 2020
From Chrome 84 it is officially launched. But still, many improvements are on it way.

回答3:

In Short it is not possible. As mobile can't access the File system. Use react native or any similar.

As i saw while searching for the issue i found "https://web.dev/web-otp/". It might help but i have not implemented it yet.

回答4:

Any kind of browser is restricted to access browser data only. It is for security purpose. As website running in browser has no access outside browser, you can not access OTP received on mobile in website.

General thumb rule is websites can not access file system hence any functionality outside browser is forbidden.

If you are building a native app then you can access it via permissions.

来源：https://stackoverflow.com/questions/56180780/can-i-auto-read-otp-on-mobile-browsers

标签

html

angular

typescript

one-time-password