API WebOTP теперь может получать одноразовые пароли из фреймов.
Одноразовые пароли (OTP) из SMS обычно используются для подтверждения телефонных номеров, например, на втором этапе аутентификации, или для подтверждения платежей в интернете. Однако переключение между браузером и SMS-приложением для копирования, вставки или ручного ввода OTP легко приводит к ошибкам и усложняет пользовательский интерфейс.API WebOTP позволяет веб-сайтам программно получать одноразовый пароль из SMS-сообщения и автоматически вводить его в форму для пользователей одним касанием, не переключая приложение. SMS-сообщение имеет специальный формат и привязано к источнику, что снижает вероятность кражи одноразового пароля фишинговыми сайтами.
Одним из вариантов использования, который пока не поддерживается в WebOTP, является нацеливание на источник внутри iframe. Обычно это используется для подтверждения платежей, особенно с 3D Secure . Имея общий формат для поддержки кросс-источниковых iframe , API WebOTP теперь предоставляет одноразовые пароли, привязанные к вложенным источникам, начиная с Chrome 91.
Как работает API WebOTP
Сам API WebOTP достаточно прост:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
SMS-сообщение должно быть отформатировано с использованием одноразовых кодов, привязанных к отправителю .
Your OTP is: 123456.
@web-otp.glitch.me #12345
Обратите внимание, что в последней строке указан источник, к которому должна быть выполнена привязка, которому предшествует символ @
а затем одноразовый пароль (OTP), которому предшествует символ #
.
При получении SMS-сообщения появляется информационная панель с предложением подтвердить номер телефона. После нажатия кнопки Verify
браузер автоматически пересылает одноразовый пароль на сайт и обрабатывает метод navigator.credentials.get()
. После этого сайт может извлечь одноразовый пароль и завершить процесс проверки.
Изучите основы использования WebOTP в статье Проверка телефонных номеров в Интернете с помощью API WebOTP .
Примеры использования кросс-источниковых iframes
Ввод одноразового пароля в форму в кросс-доменном iframe часто встречается при оплате. Некоторые эмитенты кредитных карт требуют дополнительный этап проверки подлинности плательщика. Это называется 3D Secure, и форма обычно отображается в iframe на той же странице, как будто она является частью процесса оплаты.
Например:
- Пользователь посещает
shop.example
, чтобы купить пару обуви с помощью кредитной карты. - После ввода номера кредитной карты интегрированный платежный провайдер отображает форму из
bank.example
в iframe, предлагая пользователю подтвердить свой номер телефона для быстрой оплаты. -
bank.example
отправляет пользователю SMS-сообщение, содержащее одноразовый пароль, который он может ввести для подтверждения своей личности.
Как использовать API WebOTP из кросс-доменного iframe
Чтобы использовать API WebOTP из кросс-доменного iframe, вам необходимо сделать две вещи:
- Укажите в тексте SMS-сообщения как начало верхнего фрейма, так и начало iframe.
- Настройте политику разрешений, чтобы разрешить кросс-источниковому iframe получать одноразовые пароли напрямую от пользователя.
Вы можете самостоятельно опробовать демо-версию по адресу https://web-otp-iframe-demo.stackblitz.io .
Добавить примечания bound-origins к текстовому сообщению SMS
При вызове API WebOTP из iframe текстовое сообщение SMS должно включать источник верхнего фрейма, которому предшествует @
, за которым следует одноразовый пароль, которому предшествует #
а затем источник iframe, которому предшествует @
.
@shop.example #123456 @bank.exmple
Настроить политику разрешений
Чтобы использовать WebOTP в кросс-доменном iframe, интегратор должен предоставить доступ к этому API через политику разрешений otp-credentials, чтобы избежать непреднамеренного поведения. В общем случае, существует два способа достижения этой цели:
- через HTTP-заголовок:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- через атрибут
allow
iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Дополнительные примеры настройки политики разрешений см.
Предостережения
Уровни вложенности
В настоящее время Chrome поддерживает вызовы API WebOTP только из кросс-источниковых iframe, имеющих не более одного уникального источника в цепочке предков. В следующих случаях:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
использование WebOTP в b.com поддерживается, но в c.com — нет.
Обратите внимание, что следующий сценарий также не поддерживается из-за отсутствия спроса и сложностей UX.
- a.com -> b.com -> a.com (вызывает API WebOTP)
Взаимодействие
Хотя браузерные движки, отличные от Chromium, не поддерживают API WebOTP, Safari использует тот же формат SMS с поддержкой input[autocomplete="one-time-code"]
. В Safari, как только SMS-сообщение, содержащее одноразовый код, привязанный к источнику, приходит с соответствующим источником, клавиатура предлагает ввести одноразовый код в поле ввода.
По состоянию на апрель 2021 года Safari поддерживает iframe с уникальным форматом SMS, использующим %
. Однако, поскольку в ходе обсуждения спецификации было решено использовать @
, мы надеемся, что реализация поддерживаемого формата SMS будет согласована.
Обратная связь
Ваши отзывы неоценимы для улучшения API WebOTP, поэтому попробуйте его и дайте нам знать, что вы думаете.
Ресурсы
- Проверьте номера телефонов в Интернете с помощью API Web OTP
- Лучшие практики создания одноразовых паролей SMS
- API WebOTP
- Одноразовые коды с привязкой к месту отправления, отправляемые по SMS
Фото rupixen.com на Unsplash