Окно авторизации в Chrome: что это и как добавить на сайт

Многие пользователи замечают, что при входе на популярные сайты (Stack Overflow, Booking, GitHub) браузер Google Chrome показывает собственное всплывающее окно для входа в учётную запись. Это не обычная HTML-форма на странице, а именно системное диалоговое окно браузера. Разберёмся, как эта технология называется, и как веб-мастеру интегрировать её на свой ресурс.

Что такое браузерное окно авторизации Chrome

Это окно - часть механизма Credential Management API (API управления учётными данными) и WebAuthn (Web Authentication). Chrome автоматически предлагает сохранить или использовать пароль, когда обнаруживает на странице форму входа. Если сайт поддерживает этот API, браузер показывает своё окно для быстрой аутентификации, а не стандартную HTML-форму.

Как называется это окно и где искать документацию

Официальное название - Browser-native credential picker или Chrome credential dialog. Документацию ищите по запросам: "Credential Management API" и "WebAuthn API" на developer.chrome.com и MDN Web Docs. Это не отдельный плагин, а встроенная функция Chromium.

Как встроить такое окно на свой сайт

Чтобы ваш сайт показывал браузерное окно входа, нужно реализовать поддержку Credential Management API. Вот основные шаги:

• Шаг 1. Используйте navigator.credentials.get() для запроса сохранённых учётных данных.
• Шаг 2. Используйте navigator.credentials.store() для сохранения новых паролей после успешного входа.
• Шаг 3. Для двухфакторной аутентификации применяйте navigator.credentials.create() с WebAuthn.

Пример простого кода:

if (window.PasswordCredential) {
  navigator.credentials.get({ password: true })
    .then(credential => {
      if (credential) {
        // автозаполнение формы
      }
    });
}

Плюсы и минусы использования браузерного окна

Плюсы: повышение безопасности (пароли не перехватываются скриптами), ускорение входа для пользователей, доверие к сайту. Минусы: требуется HTTPS-соединение, не все браузеры поддерживают API одинаково, и окно не кастомизируется стилями.

Часто задаваемые вопросы