CODEWITHSUNDEEP
javascriptgoogle-chromeone-time-password
Vaibhav Arora
Vaibhav Arora

Reputation: 94

Unable to implement OTP with Web OTP API

Web OTP API information provided by https://web.dev/web-otp is good. But demo provided in https://web-otp.glitch.me/ is working as of now with Version 86.0.4240.111 (Official Build) (64-bit).

The main reason I could see is that navigation credentials event for OTP is not getting triggered, and I don't understand why this is happening.

Is it problem with codebase of https://web-otp.glitch.me/ OR chrome mentioned version has any problem?

Steps to reproduce -

  1. Open https://web-otp.glitch.me/ at your mobile browser.
  2. As webpage says, get @web-otp.glitch.me #12345 as text message to your mobile, from unknown number . And you should receive a dialog message, asking you whether you want your browser to input this OTP.

Upvotes: 4

Views: 3637

Answers (3)

Miguel Q
Miguel Q

Reputation: 3628

The hostname must match the one where the input form lives. If the input form is on a subdomain then that must be your hostname. The @hostname must start on a new line followed by exactly 1 space, and "#" and then your code.

Everything before or after is ignored. So you should on the start of the message use a more user friendly code, in case the OTP auto fill fails, the user can still understand and type manually.

there is a chance to use a iframe with the input verification, check the WEB OTP documentation for that special case.

Upvotes: 0

Quinten C
Quinten C

Reputation: 771

After some experimenting it only seemed to work if the last line with text before the last line (with the @ and #) ended in numbers.

Really weird.

So its like:

OTP code: <OTP>

Ignore this: 1111

@<HOSTNAME_OF_WEBSITE> #<OTP>

Upvotes: 0

Tanay Toshniwal
Tanay Toshniwal

Reputation: 192

Try changing the host name, incorrect host name may stop the Promise from getting resolved, i.e., navigator.credentials.get

Make sure your last line of text message should be like this:

@<HOSTNAME_OF_WEBSITE> #<OTP>

Upvotes: 4

Related Questions