Начиная с Chrome 93, веб-сайты могут проверять номера телефонов в настольном Chrome.
WebOTP помогает пользователям вводить код подтверждения номера телефона на мобильном веб-сайте одним нажатием, не переключаясь между приложениями. Chrome 93 расширяет эту функциональность и на настольные компьютеры. Читайте дальше, чтобы узнать больше.
Введение
SMS OTP (одноразовые пароли) обычно используются для проверки номера телефона, например, в качестве второго этапа аутентификации или для проверки платежей в Интернете. Однако весь процесс переключения с рабочего стола на мобильный, открытия приложения SMS, запоминания и ввода OTP на исходном веб-сайте обратно на рабочий стол добавляет проблем. Таким образом легко допустить ошибку, и это уязвимо для фишинговых атак.
API WebOTP дает веб-сайтам возможность программно получать одноразовый пароль из SMS-сообщения и автоматически заполнять форму для пользователей одним нажатием без переключения приложений. SMS имеет определенный формат и привязан к источнику, что снижает риск кражи OTP фишинговыми веб-сайтами.
Одним из вариантов использования, который еще не поддерживается в WebOTP, является таргетинг на запросы проверки номера телефона с устройства удаленного рабочего стола или ноутбука — API работает только на устройствах, имеющих возможности телефонии. API теперь поддерживает прослушивание SMS-сообщений, полученных на других устройствах, чтобы помочь пользователям пройти проверку номера телефона на настольном компьютере в Chrome 93.
Попробуйте это
Предварительные условия
- Настольный компьютер или ноутбук (Windows, Mac, Linux или ChromeOS).
- Телефон Android с сервисами Google Play версии 20.30.12 или выше .
- Chrome 93 или более поздней версии, как на настольном компьютере, так и на ноутбуке и мобильном устройстве. Бета-версия Chrome 93 доступна с конца июля 2021 года.
- Вам необходимо войти в одну и ту же учетную запись Google как в настольном Chrome, так и в мобильном Chrome. Например, через https://myaccount.google.com/ или https://mail.google.com . Синхронизацию включать не нужно.
- На вашем Android-устройстве вам необходимо войти в Android через «Настройки->Google».
- Chrome 93 должен быть браузером по умолчанию на устройстве Android.
- Chrome 93 должен работать либо в переднем, либо в фоновом режиме на устройстве Android.
Демо
Чтобы самостоятельно попробовать этот простой процесс проверки номера телефона на настольном компьютере, выполните следующие действия:
- Перейдите на https://web-otp-demo.glitch.me/ на рабочем столе. Нажмите кнопку «Подтвердить» .
- Отправьте точное текстовое сообщение, которое было на экране, со второго телефона на устройство Android.
- Когда SMS будет доставлено на устройство Android, появится диалоговое окно с вопросом, хотите ли вы подтвердить номер телефона на рабочем столе. Нажмите «Отправить» , чтобы одобрить.
- На рабочем столе код подтверждения, отправленный на устройство Android, должен быть автоматически заполнен в поле ввода.
Как работает API WebOTP
Давайте посмотрим, как работает WebOTP API:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
SMS-сообщение должно быть отформатировано с использованием одноразовых кодов, привязанных к источнику .
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Обратите внимание, что последняя строка содержит начало координат, к которому будет привязываться, которому предшествует @
, за которым следует OTP, которому предшествует #
.
Когда приходит текстовое сообщение, появляется информационная панель, предлагающая пользователю подтвердить свой номер телефона. После того, как пользователь нажимает кнопку Verify
, браузер автоматически пересылает OTP на сайт и разрешает navigator.credentials.get()
. Затем веб-сайт может извлечь OTP и завершить процесс проверки.
Дополнительную информацию см. в разделе Проверка номеров телефонов в Интернете с помощью WebOTP API .
Как использовать API WebOTP на рабочем столе
Проверка номера телефона с помощью SMS широко используется и не зависит от платформы. Любые варианты использования мобильных устройств должны быть применимы и к настольным устройствам.
Использование WebOTP API на настольных компьютерах такое же, как и на мобильных устройствах, поэтому веб-сайты могут развертывать один и тот же код на разных платформах.
Поддержка браузера и совместимость
Эта функция поддерживается Chrome Sync, поэтому в данный момент она работает только в Chrome. Получение и передача SMS на iOS или iPad OS в Chrome не поддерживается.
Хотя браузерные движки, отличные от Chromium, не реализуют API WebOTP, Safari использует тот же формат SMS с поддержкой input[autocomplete="one-time-code"]
. В Safari, если пользователь включил автоматическую синхронизацию iMessage, когда SMS, содержащее формат одноразового кода с привязкой к источнику, поступает с совпадающим источником на iOS или iPadOS, сообщение пересылается в macOS. Если пользователь сосредоточится на поле ввода, Safari предложит пользователю ввести OTP.
Обратная связь
Ваши отзывы неоценимы для улучшения WebOTP API. Попробуйте и дайте нам знать , что вы думаете.
Фото Луиса Вилласмила на Unsplash