Проверка обнаружения функции API управления учетными данными

Eiji Kitamura

Краткое содержание

WebAuthn помогает повысить безопасность, обеспечивая аутентификацию на основе учетных данных с открытым ключом в Интернете, и вскоре он будет поддерживаться в Chrome, Firefox и Edge ( с обновленной спецификацией ). Он добавляет новый тип объекта Credential , который, однако, может привести к поломке веб-сайтов, использующих API управления учетными данными, без определения конкретных типов учетных данных, которые они используют.

Если вы в настоящее время делаете это для обнаружения функций

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Вместо этого сделайте это

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

В качестве примера см. изменения, внесенные в пример кода.

Читайте дальше, чтобы узнать больше.

Примечание. Если вы используете удостоверение Google в качестве основного способа входа пользователей в систему, рассмотрите возможность использования библиотеки JavaScript для регистрации в одно касание и автоматического входа, созданной на основе API управления учетными данными. Он объединяет вход в Google и вход на основе пароля в один вызов API, а также добавляет поддержку создания учетной записи одним касанием.

Что такое API управления учетными данными

API управления учетными данными (CM API) предоставляет веб-сайтам программный доступ к хранилищу учетных данных пользовательского агента для хранения/получения учетных данных пользователя для вызывающего источника.

Основные API:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

Исходная спецификация CM API определяет два типа учетных данных:

• PasswordCredential
• FederatedCredential

PasswordCredential — это учетные данные, содержащие идентификатор и пароль пользователя. FederatedCredential — это учетные данные, содержащие идентификатор пользователя и строку, представляющую поставщика удостоверений.

С помощью этих двух учетных данных веб-сайты могут:

• Разрешить пользователю войти в систему с использованием ранее сохраненных учетных данных на основе пароля или федеративных учетных данных сразу после приземления (автоматический вход).
• Сохраните учетные данные на основе пароля или федеративные учетные данные, с которыми пользователь вошел в систему,
• Поддерживайте актуальность учетных данных пользователя для входа (например, после смены пароля).

Что такое WebAuthn

WebAuthn (веб-аутентификация) добавляет учетные данные открытого ключа в API CM. Например, он предоставляет веб-сайтам стандартизированный способ реализации двухфакторной аутентификации с использованием устройств аутентификации, совместимых с FIDO 2.0 .

На техническом уровне WebAuthn расширяет API CM интерфейсом PublicKeyCredential .

В чем проблема?

Ранее мы советовали разработчикам обнаруживать API CM с помощью следующего кода:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

В качестве примера см. фактические изменения, внесенные в пример кода.

Для справки, вот как обнаружить PublicKeyCredential добавленный в WebAuthn:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Хронология

Самой ранней доступной реализацией WebAuthn является Firefox, и планируется, что ее стабильная версия выйдет примерно в начале мая 2018 года .

Окончательно

Если у вас есть вопросы, отправьте их по адресу @agektmr или [e-mail].