Capacidades do Cliente WebAuthn

WebAuthn é o padrão moderno por trás das passkeys. Em vez de depender de senhas tradicionais, ele utiliza criptografia de chave pública, permitindo que os usuários se autentiquem com passkeys, que podem incluir biometria (como impressões digitais ou reconhecimento facial) ou chaves de segurança físicas. Essa mudança não apenas aumenta a segurança, mas também melhora a experiência do usuário, eliminando a necessidade de gerenciar senhas.

O padrão WebAuthn Nível 3 introduz novas capacidades do cliente (que podem ser recuperadas através da API do navegador getClientCapabilities()), com o objetivo de fornecer aos desenvolvedores e plataformas mais controle e flexibilidade ao implementar passkeys. Essas atualizações trazem melhorias que simplificam o processo de integração de passkeys em dispositivos, navegadores e plataformas, garantindo uma jornada do usuário mais fluida e consistente.

Neste post de blog, responderemos às seguintes perguntas:

1. O que são as capacidades do cliente WebAuthn?
2. Quais capacidades do cliente WebAuthn existem?
3. Como as capacidades do cliente WebAuthn melhoram as implementações de passkeys?
4. Por que as capacidades do cliente WebAuthn são importantes tanto para desenvolvedores quanto para gerentes de produto?

Ao final, você entenderá como esses recursos podem ajudar a criar fluxos de autenticação fluidos e seguros que se alinham com as expectativas modernas dos usuários.

As capacidades do cliente WebAuthn são um conjunto de recursos que permitem que navegadores e plataformas comuniquem quais tipos de funcionalidades WebAuthn eles suportam. Em termos simples, elas agem como uma "lista de verificação de funcionalidades" que informa aos sites quais métodos e configurações de autenticação estão disponíveis no dispositivo de um usuário. Isso permite que os desenvolvedores personalizem os fluxos de autenticação com base nas capacidades do cliente, garantindo uma experiência do usuário mais fluida e segura.

Por exemplo, se um navegador sinaliza que suporta autenticação biométrica (como o Touch ID), os desenvolvedores podem projetar seus fluxos de login para oferecer aos usuários a opção de entrar com uma impressão digital. Por outro lado, se o navegador não suportar certos recursos, os desenvolvedores podem fornecer opções de fallback, como uma senha ou um SMS OTP.

O padrão WebAuthn Nível 3 introduz várias novas capacidades do cliente que tornam as implementações de passkeys mais versáteis e fáceis de usar. O primeiro suporte para a chamada de API getClientCapabilities() foi introduzido no Safari 17.4.

Para detectar o suporte no navegador, o seguinte trecho de código pode ser útil:

// Check if PublicKeyCredential is supported in the current browser
if (typeof PublicKeyCredential === "undefined") {
    console.log("PublicKeyCredential is not supported in this browser.");
}
 
// Check if getClientCapabilities method exists on PublicKeyCredential
if (typeof PublicKeyCredential.getClientCapabilities === "function") {
    try {
        let capabilities = await PublicKeyCredential.getClientCapabilities();
        console.log(capabilities);
    } catch (error) {
        console.error("Error getting client capabilities:", error);
    }
} else {
    console.log("getClientCapabilities is not supported in this browser");
}

getClientCapabilities() permite que sites e aplicativos consultem o cliente (por exemplo, navegador ou dispositivo) para determinar quais recursos WebAuthn ele suporta. Ao entender as capacidades do cliente, os desenvolvedores podem otimizar os fluxos de autenticação para aproveitar os recursos disponíveis, como a autenticação biométrica, e fornecer métodos alternativos se certas capacidades estiverem ausentes.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

Aqui está uma análise mais detalhada das capacidades do cliente WebAuthn e como elas impactam a integração de passkeys:

conditionalCreate permite a criação automática de passkeys com base em condições específicas. Uma aplicação pode usar essa capacidade para criar automaticamente uma passkey durante o preenchimento automático de senha se o gerenciador de senhas tiver suporte correspondente. Esse recurso ajuda a impulsionar a adoção de passkeys e o uso subsequente, fazendo a transição automática dos usuários de senhas para passkeys.

Semelhante ao conditionalCreate, conditionalGet aciona logins com passkey automaticamente. Isso é útil em cenários onde a melhor experiência de usuário com passkey deve ser ativada, tornando o login não apenas sem senha, mas também sem nome de usuário (os usuários apenas clicam na passkey selecionada em um modal/menu suspenso e podem se autenticar). Usando essa capacidade, os desenvolvedores podem garantir que a autenticação com passkey ocorra apenas quando apropriado, minimizando prompts desnecessários e melhorando a experiência do usuário.

hybridTransport garante que as passkeys possam ser usadas em diferentes dispositivos, permitindo uma autenticação entre dispositivos fluida (via códigos QR e Bluetooth). Por exemplo, um usuário pode usar uma passkey armazenada em seu smartphone para fazer login em um serviço em seu desktop. Essa capacidade permite que os usuários se autentiquem com segurança sem a necessidade de transferir manualmente as passkeys ou depender de métodos de login convencionais para cada dispositivo, promovendo uma experiência de autenticação unificada.

Autenticadores de plataforma, como Windows Hello, Face ID ou Touch ID, são integrados diretamente nos dispositivos e oferecem uma experiência de passkey mais rápida, fluida e segura, permitindo que os usuários se autentiquem com biometria ou outro método nativo do dispositivo (por exemplo, padrão de PIN).

Become part of our Passkeys Community for updates & support.

Join

userVerifyingPlatformAuthenticator garante que a autenticação com passkey envolva a verificação do usuário, como uma varredura ativa de impressão digital ou reconhecimento facial, fornecendo uma camada extra de segurança.

A capacidade relatedOrigins permite a autenticação fluida entre diferentes domínios pertencentes à mesma organização (por exemplo, amazon.com e amazon.de). Por exemplo, se uma empresa gerencia vários domínios ou tem diferentes subdomínios, os usuários podem fazer login uma vez e acessar todas as propriedades sem se autenticar novamente em cada uma. Essa capacidade otimiza a experiência do usuário, reduzindo o atrito, e é especialmente valiosa para empresas em ambientes internacionais ou com plataformas de múltiplos serviços.

O método signalAllAcceptedCredentials(options) fornece a lista completa de IDs de credencial WebAuthn para um determinado usuário. As Relying Parties do WebAuthn devem usar este método em vez de signalUnknownCredential() quando o usuário está autenticado, pois não há risco de vazamento de privacidade. Este método oferece uma visão abrangente das credenciais de chave pública de um usuário, incluindo quaisquer alterações recentes que possam não ter sido atualizadas nos autenticadores atualmente conectados.

Vejamos um exemplo. Um usuário (userId: A) tem 2 passkeys com IDs de Credencial que, codificados em Base64URL, são X e Y. Em seguida, o usuário exclui a passkey X nas configurações de conta do serviço web (example.com) (então a chave pública é excluída). Agora, execute o seguinte trecho de código:

PublicKeyCredential.signalAllAcceptedCredentials({
    rpId: "example.com",
    userId: "A", // WebAuthn User Handle, Base64URL.
    allAcceptedCredentialIds: ["Y"],
});

Se o autenticador estiver disponível no momento da execução do código acima, ele excluirá ou ocultará a passkey X de futuras cerimônias de autenticação. No entanto, o autenticador pode não estar conectado no momento da execução, então é recomendado que as relying parties executem este código periodicamente, por exemplo, a cada login.

Passkeys não presentes em allAcceptedCredentialIds serão removidas ou ocultadas, potencialmente de forma irreversível. Portanto, é importante que as relying parties prestem atenção para que IDs de credencial WebAuthn válidos nunca sejam removidos da lista. Se um ID de credencial válido foi acidentalmente removido, a relying party deve incluí-lo imediatamente em outra chamada signalAllAcceptedCredentials(options) o mais rápido possível para "reexibir" a passkey. Se a passkey não for ocultada, mas sim removida, não há muito o que fazer para consertar as coisas.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

O método signalCurrentUserDetails(options) sinaliza o nome atual do usuário e o Nome de Exibição WebAuthn. Quando signalCurrentUserDetails(options) é chamado, o cliente segue um conjunto de etapas definidas para executar esta ação.

Vejamos um exemplo. Um usuário com ID de Usuário WebAuthn A atualiza seu nome nas configurações de conta de um site (example.com). Então, a relying party pode executar o seguinte código:

PublicKeyCredential.signalCurrentUserDetails({
    rpId: "example.com",
    userId: "A", // user ID, Base64URL.
    name: "New user name",
    displayName: "New display name",
});

O autenticador então atualizaria os metadados da passkey salva localmente. O grande benefício é que em futuras solicitações de UI Condicional / preenchimento automático de passkey, o menu de seleção / suspenso da UI Condicional mostra o nome e o Nome de Exibição WebAuthn atualizados.

O método signalUnknownCredential(options) sinaliza que um ID de Credencial WebAuthn não é reconhecido pela Relying Party do WebAuthn, por exemplo, se a passkey foi excluída pelo usuário. Ao contrário de signalAllAcceptedCredentials(options), este método não exige o fornecimento da lista completa de IDs de credencial aceitos e do User Handle WebAuthn, evitando assim possíveis vazamentos de privacidade para chamadores não autenticados.

Vejamos um exemplo. Um usuário exclui uma passkey com ID de credencial X nas configurações de conta de um site (example.com) (então a chave pública é excluída). No entanto, a chave privada ainda está disponível no dispositivo do usuário. Isso significa que em futuras solicitações de login com UI Condicional / preenchimento automático de passkey (com uma lista allowCredentials vazia), a passkey ainda pode ser selecionada. A tentativa de login falhará, no entanto, pois a chave pública já foi excluída, então a relying party deve executar:

PublicKeyCredential.signalUnknownCredential({
    rpId: "example.com",
    credentialId: "X", // credential ID the user just tried, Base64URL
});

O autenticador então excluiria ou ocultaria a passkey com ID de credencial X de futuras cerimônias de autenticação.

Como o padrão WebAuthn Nível 3 ainda está em status de rascunho, a adoção dessas novas capacidades do cliente ainda não está totalmente difundida. Diferentes navegadores têm implementado gradualmente esses recursos, mas o suporte varia. Abaixo está uma visão geral atualizada da disponibilidade nos principais navegadores mencionados acima:

O ritmo de adoção provavelmente se acelerará à medida que o Nível 3 amadurecer e mais navegadores lançarem esses recursos. Se você quiser ver quantos usuários podem aproveitar o getClientCapabilities() agora, pode verificar dados do mundo real usando o Passkeys Analyzer gratuito. Fique de olho nas notas de lançamento dos navegadores e na documentação relevante para planejar uma compatibilidade mais ampla à medida que ela evolui.

Are your users passkey-ready?

Test Passkey-Readiness

Como desenvolvedor, você pode se perguntar o que essa nova detecção de capacidade do cliente WebAuthn significa para você e como deve usá-la em seu aplicativo. A seguir, você encontrará recomendações para usá-las.

No entanto, esteja ciente de que nem todos os navegadores ainda suportam a chamada de API getClientCapabilities() (em novembro de 2024). Existe um polyfill disponível aqui, que pode ser usado até que todos os navegadores se atualizem.

Use getClientCapabilities() no início do seu código para detectar os recursos suportados pelo cliente no início do carregamento da página / fluxo de autenticação. Isso permitirá que você personalize a experiência dinamicamente, fornecendo os recursos de passkey que funcionam no dispositivo / navegador, por exemplo, incentivando a autenticação de plataforma quando suportada ou oferecendo métodos alternativos (por exemplo, SMS OTPs ou chaves de segurança de hardware) se não.

Se você adicionar passkeys a um site / aplicativo que atualmente usa senhas, o recurso conditionalCreate pode ser um verdadeiro impulsionador para a sua adoção de passkeys. Em segundo plano, durante um preenchimento automático de senha com um gerenciador de credenciais adequado (apenas o Apple Passwords em outubro de 2024), uma passkey é gerada automaticamente e será preferida em preenchimentos futuros.

Para não apenas ter uma alta adoção de passkeys, mas também um alto uso de login com passkey, tente verificar se o dispositivo / navegador pode usar a UI Condicional / Preenchimento Automático de Passkey verificando por conditionalGet. Dessa forma, você incentivará os usuários a usar a passkey criada para logins, pois ela é sugerida proativamente pelo sistema operacional / navegador e requer ainda menos esforço do que o preenchimento automático de uma senha.

Utilize hybridTransport para permitir a autenticação entre dispositivos (via código QR e Bluetooth), permitindo que os usuários façam login de forma fluida a partir de seus smartphones, mesmo que estejam acessando seu serviço em um desktop.

As capacidades do cliente WebAuthn representam um passo significativo para resolver as lacunas existentes das passkeys. Neste post de blog, abordamos questões-chave sobre as capacidades do cliente WebAuthn:

1. O que são as capacidades do cliente WebAuthn? Explicamos como esses recursos permitem que navegadores e plataformas sinalizem seu suporte para funcionalidades específicas, dando aos desenvolvedores mais controle sobre os fluxos de autenticação.
2. Quais capacidades do cliente WebAuthn existem? Fornecemos uma visão geral das novas capacidades introduzidas no padrão Nível 3, incluindo getClientCapabilities, conditionalCreate, hybridTransport e mais.
3. Como as capacidades do cliente WebAuthn melhoram as implementações de passkeys? Discutimos como essas capacidades otimizam a integração, aprimoram o uso entre dispositivos e melhoram a segurança.
4. Por que as capacidades do cliente WebAuthn são importantes para os desenvolvedores? Esses recursos ajudam a criar experiências de autenticação fluidas e seguras que se alinham com as expectativas modernas dos usuários, tornando a implementação mais fácil e eficaz.

Incentivamos você a explorar os novos recursos do WebAuthn Nível 3 e a se manter atualizado sobre sua adoção nos navegadores. Se você está pensando em implementar passkeys и aproveitar essas capacidades avançadas, entre em contato conosco para orientação e suporte especializado.