As versões 128 e 129 do Chrome apresentam novos recursos incríveis para a WebAuthn, a para criar sistemas de autenticação baseados em chaves de acesso.
- Dicas: com as dicas, as partes confiáveis (RPs) têm mais controle sobre a WebAuthn. no navegador. Eles são especialmente úteis para usuários corporativos que querem para usar chaves de segurança.
- Solicitações de origem relacionadas: com origem relacionada solicitações, as RPs podem tornar as chaves de acesso válidas em vários domínios. Se você tem vários agora é possível permitir que os usuários reutilizem as chaves de acesso nos seus sites o que elimina o atrito no login.
- Serialização JSON: as APIs de serialização JSON permitem simplificar o código de front-end de uma RP codificando e decodificando opções e passadas de e para a API WebAuthn.
Dicas
Com hints
, as partes confiáveis (RP) agora podem especificar preferências de interface para criar um
chave de acesso ou autenticação com uma chave de acesso.
Anteriormente, quando uma RP queria restringir o autenticador que o usuário poderia usar para
criar uma chave de acesso ou para autenticação, eles podem usar
authenticatorSelection.authenticatorAttachment
para especificar "platform"
ou
"cross-platform"
Cada um deles limita o autenticador a uma plataforma
autenticador
ou de roaming
autenticador.
Com hints
, essa especificação pode ser mais flexível.
O RP pode usar hints
opcionais no PublicKeyCredentialCreationOptions
ou
PublicKeyCredentialRequestOptions
para especificar "security-key"
;
"client-device"
e "hybrid"
em uma ordem de preferência em uma matriz.
Confira a seguir um exemplo de solicitação de criação de credencial que prefere
Autenticadores "cross-platform"
com "security-key"
como uma dica. Isso diz
O Chrome vai mostrar uma interface focada em chaves de segurança para usuários corporativos.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
hints: ['security-key'],
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![Especificando "security-key" Como dica, o navegador mostra uma caixa de diálogo com foco na chave de segurança.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=pt-br)
Quando uma parte restrita quer priorizar um cenário de verificação entre dispositivos, ela pode
enviar uma solicitação de autenticação que prefere autenticar "cross-platform"
com "hybrid"
como uma dica.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
residentKey: true,
hints: ['hybrid']
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![Especificando "híbrido" como dica, o navegador mostra uma caixa de diálogo focada em login em dispositivos diferentes.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=pt-br)
Solicitações de origem relacionadas
Com origem relacionada solicitações, os RPs podem tornar as chaves de acesso de vários domínios utilizáveis. Como criar um login centralizado e o uso de protocolos de federação continua sendo a solução recomendada para para a maioria dos sites. Mas, se você tiver múltiplos domínios e a federação não for possível, origens relacionadas pode ser uma solução.
Todas as solicitações da WebAuthn precisam especificar um ID de parte confiável (ID da RP) e todas as chaves de acesso
estão associados a um
único ID da parte restrita. Tradicionalmente, uma origem só podia especificar
um ID da RP com base no domínio. Nesse caso, www.example.co.uk
poderia especificar
um ID da RP de example.co.uk
, mas não example.com
. Com origem relacionada
Solicitações, um ID da RP reivindicado pode ser validado buscando um arquivo JSON conhecido
localizado em /.well-known/webauthn
do domínio de destino. Então, example.co.uk
(e example.in
, example.de
e assim por diante) poderiam usar um ID da RP de
example.com
, se example.com
as especificar neste formato:
URL: https://example.com/.well-known/webauthn
{
"origins": [
"https://example.co.uk",
"https://example.de",
"https://example.sg",
"https://example.net",
"https://exampledelivery.com",
"https://exampledelivery.co.uk",
"https://exampledelivery.de",
"https://exampledelivery.sg",
"https://myexamplerewards.com",
"https://examplecars.com"
]
}
Saiba como configurar solicitações de origem relacionadas em Permitir a reutilização de chaves de acesso no seu sites com origem relacionada Solicitações.
Serialização JSON
Os objetos de solicitação e resposta do WebAuthn têm vários campos que contêm dados dados binários em um ArrayBuffer, como o ID da credencial, o ID do usuário ou o desafio. Se um site quiser usar JSON para trocar esses dados com o servidor, o binário os dados devem ser codificados primeiro, por exemplo, com Base64URL. Isso agrega valor para desenvolvedores que querem começar a usar chaves de acesso nos sites.
O WebAuthn agora oferece APIs para analisar
PublicKeyCredentialCreationOptions
e
PublicKeyCredentialRequestOptions
objetos de solicitação do WebAuthn diretamente do JSON e serializam o
PublicKeyCredential
a resposta pode ser enviada diretamente para JSON. Todos os campos com valor de ArrayBuffer que carregam binário bruto
os dados são automaticamente convertidos de ou para seus valores codificados Base64URL.
Essas APIs estão disponíveis a partir do Chrome 129.
Antes de criar uma chave de acesso, busque uma chave de acesso codificada
PublicKeyCredentialCreationOptions
do servidor e decodifique-o usando
PublicKeyCredential.parseCreationOptionsFromJSON()
.
export async function registerCredential() {
// Fetch encoded `PublicKeyCredentialCreationOptions`
// and JSON decode it.
const options = await fetch('/auth/registerRequest').json();
// Decode `PublicKeyCredentialCreationOptions` JSON object
const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);
// Invoke the WebAuthn create() function.
const cred = await navigator.credentials.create({
publicKey: decodedOptions,
});
...
Depois de criar uma chave de acesso, codifique a credencial resultante usando toJSON()
para que
para que ele seja enviado ao servidor.
...
const cred = await navigator.credentials.create({
publicKey: options,
});
// Encode the credential to JSON and stringify
const credential = JSON.stringify(cred.toJSON());
// Send the encoded credential to the server
await fetch('/auth/registerResponse', credential);
...
Antes de autenticar com uma chave de acesso, busque um JSON codificado
PublicKeyRequestCreationOptions
do servidor e decodifique-o usando
PublicKeyCredential.parseRequestOptionsFromJSON()
.
export async function authenticate() {
// Fetch encoded `PublicKeyCredentialRequestOptions`
// and JSON decode it.
const options = await fetch('/auth/signinRequest').json();
// Decode `PublicKeyCredentialRequestOptions` JSON object
const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);
// Invoke the WebAuthn get() function.
const cred = await navigator.credentials.get({
publicKey: options
});
...
Depois de autenticar com uma chave de acesso, codifique a credencial resultante usando:
toJSON()
para que ele possa ser enviado ao servidor.
...
const cred = await navigator.credentials.get({
publicKey: options
});
// Encode the credential to JSON and stringify
const credential = JSON.stringify(cred.toJSON());
// Send the encoded credential to the server
await fetch(`/auth/signinResponse`, credential);
...
Saiba mais
Para saber mais sobre a WebAuthn e as chaves de acesso, confira os seguintes recursos: