Проверка обнаружения функции 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()

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

• 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].