Новая новая альтернатива формам входа
Браузеры позволяют сохранять пароли и восстанавливать их. Таким образом, мы можем использовать слишком длинные и сложные строки, чтобы их нельзя было запомнить. Некоторые браузеры, с поддержкой внешних менеджеров паролей или без них, генерируют для нас новые пароли и легко ими управляют.
Однако в большинстве случаев все, что касается паролей, по-прежнему основывается на способности браузера угадывать, какое поле ввода содержит имя пользователя, а какое - пароль.
Чтобы избавиться от догадок и обеспечить дальнейшую автоматизацию, вот новый Веб-API управления учетными данными. На момент написания он работает только в Chrome.
API довольно прост.
Вот как сохранить пароль в браузере:
const cred = new PasswordCredential({
id: user.username,
password: user.password,
name: `${user.firstName || ''} ${user.lastName || ''}`.trim(),
iconURL: user.avatar,
})
await navigator.credentials.store(cred)
Прежде чем вернуться к показу старомодной формы входа в систему, мы можем попытаться получить пароль напрямую из хранилища учетных данных:
const cred = await navigator.credentials.get({password: true})
Вы можете увидеть рабочий пример здесь. Идите вперед и зарегистрируйте нескольких пользователей, прежде чем нажимать Войти, чтобы вы могли пользоваться элегантным селектором учетных данных Chrome. В примере все происходит в Javascript, а бэкэнд моделируется прямо в браузере.
При написании примера самой сложной частью было копирование реализации MD5 для получения пользовательского Gravatar :)
Этот пост изначально появился здесь.
