Подтвердите номер телефона на рабочем столе с помощью WebOTP API

Начиная с Chrome 93, веб-сайты могут проверять номера телефонов в настольном Chrome.

И Гу
Эйдзи Китамура

WebOTP помогает пользователям вводить код подтверждения номера телефона на мобильном веб-сайте одним нажатием, не переключаясь между приложениями. Chrome 93 расширяет эту функциональность и на настольные компьютеры. Читайте дальше, чтобы узнать больше.

Введение

SMS OTP (одноразовые пароли) обычно используются для проверки номера телефона, например, в качестве второго этапа аутентификации или для проверки платежей в Интернете. Однако весь процесс переключения с рабочего стола на мобильный, открытия приложения SMS, запоминания и ввода OTP на исходном веб-сайте обратно на рабочий стол добавляет проблем. Таким образом легко допустить ошибку, и это уязвимо для фишинговых атак.

API WebOTP дает веб-сайтам возможность программно получать одноразовый пароль из SMS-сообщения и автоматически заполнять форму для пользователей одним нажатием без переключения приложений. SMS имеет определенный формат и привязан к источнику, что снижает риск кражи OTP фишинговыми веб-сайтами.

WebOTP API в действии.

Одним из вариантов использования, который еще не поддерживается в WebOTP, является таргетинг на запросы проверки номера телефона с устройства удаленного рабочего стола или ноутбука — API работает только на устройствах, имеющих возможности телефонии. API теперь поддерживает прослушивание SMS-сообщений, полученных на других устройствах, чтобы помочь пользователям пройти проверку номера телефона на настольном компьютере в Chrome 93.

WebOTP API на рабочем столе.

Попробуйте это

Предварительные условия

  • Настольный компьютер или ноутбук (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.

Демо

Чтобы самостоятельно попробовать этот простой процесс проверки номера телефона на настольном компьютере, выполните следующие действия:

  1. Перейдите на https://web-otp-demo.glitch.me/ на рабочем столе. Нажмите кнопку «Подтвердить» .
  2. Отправьте точное текстовое сообщение, которое было на экране, со второго телефона на устройство Android.
  3. Когда SMS будет доставлено на устройство Android, появится диалоговое окно с вопросом, хотите ли вы подтвердить номер телефона на рабочем столе. Нажмите «Отправить», чтобы одобрить.
  4. На рабочем столе код подтверждения, отправленный на устройство 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 .

Как использовать WebOTP API на рабочем столе

Проверка номера телефона с помощью 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