javascript - Unable to implement OTP with Web OTP API - Stack Overflow

admin管理员组

文章数量:1026989

Web OTP API information provided by /web-otp is good. But demo provided in / 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 / OR chrome mentioned version has any problem?

Steps to reproduce -

1. Open / 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.

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.

• javascript
• google-chrome
• one-time-password

Share Improve this question Follow edited Dec 17, 2024 at 8:17 VLAZ 29.2k99 gold badges6363 silver badges8585 bronze badges asked Nov 3, 2020 at 5:58 Vaibhav AroraVaibhav Arora 9422 silver badges99 bronze badges 10

• The code provided in the links are correct, but you need some network carrier to send you SMS of OTP. Also, try using in a mobile browser(or change to a mobile device using the toggle in chrome). And read this answer stackoverflow./a/59150919/11926970 – Not A Robot Commented Nov 3, 2020 at 6:04
• I checked the feature. I tried on mobike only, I sent myself code from contacts and unknown number. I am experienced developer, and I debugged the code too. I am stating the event of navigator.credentials.get() for OTP is not getting trigged when an OTP is recieved. Can you check at your end and confirm me if issue exists at your end too? Because then I will report it to Chrome team – Vaibhav Arora Commented Nov 4, 2020 at 2:50
• Can you update the question with the code you wrote and all the steps to reproduce the result? – Not A Robot Commented Nov 4, 2020 at 3:53
• Done stackoverflow./users/11926970/not-a-bot – Vaibhav Arora Commented Nov 4, 2020 at 10:42
• anybody else wants to try? – Vaibhav Arora Commented Nov 10, 2020 at 14:46

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

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>

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>

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.

Web OTP API information provided by /web-otp is good. But demo provided in / 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 / OR chrome mentioned version has any problem?

Steps to reproduce -

1. Open / 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.

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.

• javascript
• google-chrome
• one-time-password

Share Improve this question Follow edited Dec 17, 2024 at 8:17 VLAZ 29.2k99 gold badges6363 silver badges8585 bronze badges asked Nov 3, 2020 at 5:58 Vaibhav AroraVaibhav Arora 9422 silver badges99 bronze badges 10

• The code provided in the links are correct, but you need some network carrier to send you SMS of OTP. Also, try using in a mobile browser(or change to a mobile device using the toggle in chrome). And read this answer stackoverflow./a/59150919/11926970 – Not A Robot Commented Nov 3, 2020 at 6:04
• I checked the feature. I tried on mobike only, I sent myself code from contacts and unknown number. I am experienced developer, and I debugged the code too. I am stating the event of navigator.credentials.get() for OTP is not getting trigged when an OTP is recieved. Can you check at your end and confirm me if issue exists at your end too? Because then I will report it to Chrome team – Vaibhav Arora Commented Nov 4, 2020 at 2:50
• Can you update the question with the code you wrote and all the steps to reproduce the result? – Not A Robot Commented Nov 4, 2020 at 3:53
• Done stackoverflow./users/11926970/not-a-bot – Vaibhav Arora Commented Nov 4, 2020 at 10:42
• anybody else wants to try? – Vaibhav Arora Commented Nov 10, 2020 at 14:46

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

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>

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>

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.

本文标签： javascriptUnable to implement OTP with Web OTP APIStack Overflow