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.