Simplificar a detecção de recursos da WebAuthn para chaves de acesso

Descubra como detectar os recursos do WebAuthn com getClientCapabilities() e personalizar fluxos de trabalho de autenticação para seus usuários.

Publicado em 22 de janeiro de 2025

Como garantir que seus fluxos de trabalho de autenticação se adaptem perfeitamente aos navegadores e dispositivos dos usuários?

A partir do Chrome 133, a API getClientCapabilities() WebAuthn está aqui para ajudar você a determinar quais recursos de autenticação são compatíveis com um navegador. Ao chamar PublicKeyCredential.getClientCapabilities(), os desenvolvedores podem extrair uma lista de recursos com suporte e adaptar os fluxos de trabalho de autenticação de acordo com isso.

Essa melhoria permite que os desenvolvedores criem fluxos de autenticação mais robustos e fáceis de usar, personalizados para os ambientes dos usuários.

Confira como implementar isso:

if (window.PublicKeyCredential &&
    PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and conditional mediation.
  }
}

Esse método ajuda a personalizar as experiências de autenticação para os usuários, identificando os recursos compatíveis, como chaves de acesso, mediação condicional (preenchimento automático de chaves de acesso em caixas de diálogo), transporte híbrido (autenticação entre dispositivos usando Bluetooth) e até extensões.

Por que a detecção de recursos é importante

Compreender os recursos do cliente permite que você:

  • Crie experiências de usuário mais suaves e melhore a confiabilidade da autenticação adaptando sua implementação aos recursos compatíveis do cliente.
  • Reduza os erros causados por recursos da WebAuthn sem suporte.

Ao usar getClientCapabilites(), você pode criar experiências de autenticação que funcionam em vários dispositivos e navegadores.

Comece a explorar

Se você estiver pronto para começar, confira a Detecção de recursos da WebAuthn mais simples com getClientCapabilities() para conferir uma lista completa de recursos, instruções detalhadas e algumas práticas recomendadas.

Para saber mais sobre chaves de acesso e login sem senha, acesse a página de chaves de acesso do Chrome.