Как работает navigator.credentials: API для входа без пароля

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Как это работает

Вы можете запросить сохранённые данные с помощью navigator.credentials.get(). Например, при загрузке страницы входа можно попытаться автоматически получить логин и пароль пользователя, если он ранее их сохранил:

const cred = await navigator.credentials.get({
  password: true,
  mediation: 'optional' // чтобы не мешать потоку, если данных нет
});

if (cred) {
  console.log('Получен логин:', cred.id);
  console.log('Пароль:', cred.password);
  // Здесь можно автоматически отправить данные на сервер
}

Если учётные данные доступны, вы можете использовать их для входа без дополнительных действий от пользователя. Это особенно удобно на мобильных устройствах и в приложениях с частыми сессиями.

Можно ли сохранять логин и пароль вручную?

Да, через navigator.credentials.store() вы можете сохранить учётные данные, которые пользователь только что ввёл:

const cred = new PasswordCredential({
  id: 'user@example.com',
  password: '12345678'
});

await navigator.credentials.store(cred);

Теперь при следующем визите вы сможете использовать get(), чтобы получить эти данные без необходимости ручного ввода.

Безопасность

API работает только на HTTPS и требует, чтобы страница была в фокусе. Браузеры могут показывать уведомления, если данные используются без явного действия пользователя — это защита от скрытых запросов.

Поддержка и ограничения

• Поддерживается в Chrome, Edge, Android WebView.
• Safari и Firefox поддерживают только часть API или вовсе не поддерживают.
• Нельзя использовать на сторонних сайтах (только собственный домен).

Это API особенно хорошо подходит для проектов, где важна быстрая авторизация и нет смысла постоянно спрашивать логин-пароль у пользователя.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.