More and more online services are introducing new ways to confirm login to their services. Logging in with an OTP confirmation token is becoming a very common practice. But such authorization methods have their disadvantages such as bad UX and what if the user does not have a phone with him, what is the other authentication confirmation method?
WebOTP is a Web API browser function integrated into Chrome, Samsung Internet and Opera Mobile (Apple devices have their version), browsers on mobile devices, intended for obtaining an OTP (One-Time-Password) in the process of two-factor or multi-factor with the help of an SMS message.
How WebOTP works
An example of using WebOTP in practice.
The user logs in to the website with his user data (email and password), and then the server sends him an SMS message in the prescribed format and an OTP token.
If the browser detects the message, it prompts the user to allow access to read the SMS message.
If the user gives permission, the OTP is automatically entered in the OTP input field and the form is sent to the server, which confirms the validity of the entered OTP token.
If the OTP token is valid, the user is logged in, it is not.
A page must use the WebOTP API to have a valid SSL certificate and a secure HTTPS connection established, otherwise, this WebAPI will not work.
SMS message format
A standardized message format is provided for using the WebOTP API so that the browser can successfully read the data from the message.
Message content:
Message to the user (optional) -> message to the user;
Website domain (mandatory) -> must be written in its line and start with
@and continue with the domain name without path and protocol;OTP (mandatory) -> written in the same line as the domain, the OTP value can be from four to six digits. The OTP must start in the message with
#.
Example of SMS with OTP
@www.example.com #123456 |
The most common mistakes in OTP messages:
| Incorrect message format | Error description |
|---|---|
| Your PIN: #123456 | The code must be on its line with the specified domain. |
| Your registration code: @www.example.com #123456 | Domain and OTP must be on their line. |
| @https://example.com #123456 | The URL scheme must not be included. |
| @example.com/otp.html #123456 | The URL must not include a path |
| @example.com #123456 Your code for login: 123456. | The domain and OTP must be the last line of the message. |
| Your login code is 123456. @www.example.com#123456 | There must be one space between the domain and the OTP. |
| Hi, I'll be home by lunch today 😊 | Missing @ and #. |
| Your login code is 123456. www.example.com #123456 | @ is missing before the domain. |
User-Side Code Example (JavaScript)
<!DOCTYPE html>
<html>
<head>
<title>Test WebOTP API</title>
</head>
<body>
<form>
<!-- Form is a GET method to see the sent request -->
<label for="otp_input">OTP</label>
<input autocomplete="one-time-code" name="otp_input" id="otp_input" required/>
<input type="submit">
</form>
</body>
<script>
if ('OTPCredential' in window) { // Checking if OTP is even available in the browser
console.log(true)
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
ac.abort();
});
}
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => { // In case of successful reading of the message, sending the OTP message
input.value = otp.code; // Enter the OTP value
console.log(otp)
if (form) form.submit(); // Form submission
}).catch(err => {
console.error(err); // Log an error in case of error
});
});
}
</script>
</html>
There is a Web component for integration into websites. The web component is written in the JavaScript programming language and can be installed using the NPM tool.
This library is available on GitHub and it is licensed under the MIT license.
Browser support
The most commonly used browsers on Android phones are supported. Apple devices are not supported but use their own Apple AutoFill.
Chrome, Edge and Opera desktop browsers are also supported, as sending is possible OTP from the phone to the computer if the conditions for this are met (https://developer.chrome.com/blog/cross-device-webotp).
Advantages of using WebOTP
The main advantage of using the WebOTP functions is a better user experience of entering OTPs, as there is no need to open the SMS message and copy it only to the application itself.
I would suggest adding to the login flow the possibility of a different login method in case the user does not have his phone with him to read and enter the OTP.
Taken from:
Top comments (0)