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

Eiji Kitamura

Resumo

O WebAuthn ajuda a aumentar a segurança trazendo a autenticação baseada em credenciais de chave pública para a Web. Em breve, ele será compatível com o Chrome, o Firefox e o Edge (com a especificação atualizada). Ela adiciona um novo tipo de objeto Credential, que pode corromper sites que usam a API Credential Management sem detectar os recursos específicos que estão sendo usados.

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

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

Em vez disso, 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 alterações feitas no código de amostra como 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 inscrição com um toque e login automático criada na API Credential Management. Ele combina o login do Google e o login baseado em senha em uma chamada de API e adiciona suporte para a criação de contas com um toque.

O que é a API Credential Management

A API Credential Management (API CM) oferece aos sites acesso programático ao armazenamento de credenciais do user agent para armazenar/recuperar credenciais do usuário para a origem da 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 credenciais:

• 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 baseada em senha ou federada salva, assim que ele chegar (login automático).
• Armazenar a credencial baseada em senha ou federada com a qual 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 é WebAuthn

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

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

Qual é o problema?

Anteriormente, orientamos os desenvolvedores a detectar recursos da API CM com o seguinte código:

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 alterações reais feitas no código de amostra como exemplo.

Para referência, confira como detectar o PublicKeyCredential adicionado ao WebAuthn:

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

Cronograma

A primeira implementação disponível do WebAuthn é o Firefox. Planejamos manter a estabilidade por volta do início de maio de 2018.

Por fim,

Em caso de dúvidas, envie uma mensagem para @agektmr ou [e-mail].