Verificação de detecção de recursos da API Credential Management

Eiji Kitamura

Resumo

O WebAuthn ajuda a aumentar a segurança ao trazer a autenticação baseada em chave pública para a Web e em breve será compatível com o Chrome, o Firefox e o Edge (com a especificação atualizada). Ele adiciona um novo tipo de objeto Credential, que pode quebrar sites que usam a API de gerenciamento de credenciais sem detectar o recurso dos tipos de credencial específicos que eles estão usando.

Se você estiver fazendo isso para a detecção de recursos

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

Faça o seguinte

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()
}

Confira as mudanças feitas no código de exemplo.

Continue lendo para saber mais.

Observação : se você estiver usando a identidade do Google como a principal forma de login dos seus usuários, use a biblioteca JavaScript de inscrição com um toque e de login automático criada com base na API Credential Management. Ele combina o login do Google e o login com senha em uma chamada de API e adiciona suporte à criação de conta com um toque.

O que é a API Credential Management

A API Credential Management (API CM) concede aos sites acesso programático à loja de credenciais do agente do usuário para armazenar/extrair credenciais do usuário para a origem de chamada.

As APIs básicas são:

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

A especificação original da API CM define dois tipos de credencial:

• PasswordCredential
• FederatedCredential

O PasswordCredential é uma credencial que contém o ID e a senha do usuário. O FederatedCredential é uma credencial que contém o ID do usuário e uma string que representa um provedor de identidade.

Com essas duas credenciais, os sites podem:

• Permitir que o usuário faça login com uma credencial federada ou baseada em senha salva anteriormente assim que ele chegar (login automático);
• Armazenar a credencial federada ou baseada em senha com que o usuário fez login,
• Manter as credenciais de login do usuário atualizadas (por exemplo, após uma alteração de senha)

O que é o WebAuthn

A WebAuthn (autenticação da Web) adiciona credenciais de chave pública à API CM. Por exemplo, ele oferece aos sites uma maneira padronizada de implementar a autenticação de dois fatores usando dispositivos de autenticação compatíveis com o FIDO 2.0.

Em um nível técnico, a WebAuthn estende a API CM com a interface PublicKeyCredential.

Qual é o problema?

Anteriormente, orientávamos os desenvolvedores a detectar a API CM com o código abaixo:

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()
}

Confira as mudanças reais feitas no código de exemplo.

Para referência, veja como detectar PublicKeyCredential adicionado no WebAuthn:

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

Cronograma

A primeira implementação disponível da WebAuthn é o Firefox, e está planejado que ela seja estável por volta do início de maio de 2018.

Por fim,

Se você tiver dúvidas, envie para @agektmr ou [e-mail].