Немедленный режим интерфейса для входа в систему

Eiji Kitamura
José Luis Zapata

Дата публикации: 12 мая 2026 г.

Режим немедленного показа интерфейса для входа – это функция, которая упрощает процесс входа в аккаунт. Эта функция позволяет предлагать пользователям ключи доступа и управляемые пароли непосредственно в момент входа, например при нажатии кнопки Войти или Оформить заказ.

О чем этот документ

В режиме немедленного интерфейса пользователь получает сообщение об ошибке, если учетные данные недоступны локально. Это поведение аналогично preferImmediatelyAvailableCredentialsAPI, которые можно найти на мобильных платформах, таких как Android и iOS. Если учетные данные существуют, браузер сразу же показывает пользователю диалоговое окно входа. В противном случае обещание отклоняется без уведомления, что позволяет вам предложить пользователю альтернативные способы входа, например форму входа, не нарушая удобство использования.

По состоянию на май 2026 г. Chrome – единственный браузер, поддерживающий режим немедленного интерфейса.

Проверьте требования

Чтобы использовать режим немедленного доступа к интерфейсу, у пользователя должны быть подходящие учетные данные, сохраненные на устройстве. В Chrome к таким учетным данным относятся:

  • Ключи доступа, сохраненные в сервисе, например Google Менеджере паролей, Windows Hello или Связке ключей iCloud.
  • Пароли, сохраненные в Google Менеджере паролей.

Если локальные учетные данные отсутствуют, API отклоняет запрос без показа диалогового окна входа.

Как определить, поддерживается ли функция

Прежде чем вызывать режим немедленного показа интерфейса, проверьте, поддерживает ли браузер возможность immediateGet, используя метод PublicKeyCredential.getClientCapabilities(). Если он не поддерживается, используйте существующие способы входа, например формы для ввода адреса электронной почты и пароля, подтверждение номера телефона или вход через социальные сети.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

Чтобы обеспечить поддержку большего количества браузеров, используйте полифилл, доступный в репозитории GitHub WebAuthn Polyfills.

Как запросить учетные данные

Чтобы запустить процесс входа, вызовите navigator.credentials.get() с полем uiMode, для которого задано значение 'immediate'.

Если вы включите в запрос password: true, пользователи смогут воспользоваться этой функцией, если браузер поддерживает учетные данные с паролем.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

Обработчик NotAllowedError должен находиться в блоке catch, чтобы обеспечить резервный способ входа.

Как обрабатывать процессы входа

Режим немедленного показа интерфейса можно реализовать в двух основных сценариях. Дополнительные рекомендации по UX-дизайну и антипаттерны, которых следует избегать, можно найти в разделе Шаблоны UX для режима Immediate UI.

Как войти с помощью кнопки

Добавьте отдельную кнопку входа, чтобы пользователи могли войти в аккаунт без неожиданных запросов.

  1. Пользователь нажимает кнопку Войти.
  2. Ваш сайт вызывает функцию navigator.credentials.get() с параметром uiMode: "immediate".
  3. Браузер проверяет наличие локальных учетных данных.
  4. Если браузер находит учетные данные, он сразу же показывает диалоговое окно входа, в котором пользователь может выбрать аккаунт.
  5. Если браузер не находит учетных данных или пользователь закрывает диалоговое окно входа, он выдает ошибку NotAllowedError.
  6. Если возникает исключение NotAllowedError, сайт переходит к стандартной странице входа.

Войдите в аккаунт перед оформлением заказа

Предлагайте учетные данные до того, как пользователь выполнит действие, для которого требуется аутентификация, например начнет процесс оформления заказа в интернет-магазине.

В электронной торговле гостевые пользователи часто выбирают между входом в существующий аккаунт и оформлением покупки в качестве гостя. Если сразу показывать диалоговое окно входа, вернувшимся клиентам будет проще оформлять покупки.

  1. Пользователь выполняет действие, например нажимает кнопку Оформить заказ во время покупки.
  2. Ваш сайт вызывает функцию navigator.credentials.get() с параметром uiMode: "immediate".
  3. Если учетные данные существуют, пользователь выбирает их для входа.
  4. Если учетные данные отсутствуют, браузер выдает ошибку и не показывает диалоговое окно для входа. Пользовательский интерфейс останется прежним, и вы сможете перенаправлять пользователей на существующую страницу оформления покупки, на которой могут быть другие варианты входа или форма для оформления покупки без регистрации.

Проверьте меры безопасности и конфиденциальности

Браузер реализует важные меры для защиты конфиденциальности пользователей:

  • Требование к жесту пользователя. Чтобы предотвратить скрытое сканирование, вы должны инициировать вызов API с помощью жеста пользователя, например клика. Вызов не использует активацию.
  • Ограничения в режиме инкогнито. Запросы в режиме инкогнито или конфиденциальном режиме всегда возвращают ошибку NotAllowedError.
  • Нет белых списков. Запросы с непустым списком allowCredentials вызывают ошибку NotAllowedError, чтобы предотвратить отслеживание между сеансами.
  • Нельзя отменить вход программным способом. Параметр signal нельзя использовать для программного закрытия диалогового окна входа.