A autenticação biométrica, que permite a autenticação em um sistema de software com uma impressão digital ou reconhecimento facial, já existe há algum tempo. Em 2003, os IBM Thinkpads tinham um leitor de impressão digital que permitia que você fizesse login no seu computador. Em 2013, a Apple incluiu um leitor de impressão digital no iPhone 5S, embora houvesse outros telefones que o tivessem primeiro (olá, Motorola Atrix!). 

Mas a autenticação biométrica não estava facilmente disponível para aplicativos da web até recentemente.

As novas APIs do navegador da web facilitam a adição de autenticação biométrica forte ao seu aplicativo da web.

O que é autenticação biométrica

Primeiro, vamos falar sobre autenticação em geral. Autenticação biométrica é o termo geral para qualquer método de autenticação que dependa dos atributos físicos de um usuário, como impressão digital, face ou voz.

Existem três categorias de autenticação:

• Algo que você sabe, como uma senha
• Algo que você tem, como um dispositivo
• Algo que você é, como uma impressão digital

A autenticação biométrica tem vantagens significativas sobre outras opções:

• É difícil perder
• É difícil roubar
• Não pode ser compartilhado
• Você não pode esquecê-lo

Permitir que seus usuários se autentiquem usando sua biometria oferece vantagens significativas de segurança e conveniência. De acordo com “ Autenticação biométrica no iPhone e Android:

Usabilidade, Percepções e Influências na Adoção ”, um artigo publicado em 2015, “… os participantes acharam o desbloqueio facial do Android e o desbloqueio da impressão digital do iPhone fáceis de usar em vários cenários de uso comuns”. Por sua própria natureza, os métodos biométricos são mais difíceis de obter pelos invasores do que os métodos de autenticação baseados em conhecimento, como senhas.

Você também não precisa usar apenas a autenticação biométrica. Quando combinada com outros métodos de autenticação, como senha ou link mágico, a autenticação biométrica pode fornecer segurança adicional sem adicionar atrito à experiência do usuário.

Como adicionar funcionalidade biométrica ao seu webapp

A maneira mais fácil de adicionar autenticação biométrica ao seu aplicativo da Web é usar um padrão chamado WebAuthn . Isso é suportado por todos os principais navegadores (exceto IE, desculpe usuários do IE!) e vincula uma API JavaScript amigável a uma variedade de métodos de autenticação baseados em hardware, incluindo opções biométricas suportadas por sistemas operacionais móveis e de desktop.

Para adicionar autenticação forte baseada em WebAuthn, incluindo opções biométricas, execute as seguintes etapas de alto nível:

• Verifique se o WebAuthn é suportado usando uma API JavaScript para testar o navegador atual.
• Solicitar ao usuário que adicione um método de autenticação biométrica
• Associar o método à conta
• No próximo login, identifique o usuário de alguma forma
  • Defina um cookie quando eles adicionam o método
  • Peça o nome de usuário
• Quando você souber quem eles são, solicite um login WebAuthn
• O autenticador biométrico (o telefone ou sistema operacional) emitirá um desafio de autenticação
• O usuário responde fornecendo sua impressão digital ou qualquer prova biométrica necessária
• Seu JavaScript recebe e interpreta uma mensagem do navegador
• Se a mensagem indicar autenticação bem-sucedida, faça login do usuário

O código real é bastante direto. 

Para confirmar que o navegador suporta WebAuthn, execute este código:

if (window.PublicKeyCredential) {  // do your webauthn stuff} else {  // wah-wah, back to passwords for you}

  Em seguida, para adicionar um método de autenticação biométrica, chame este método JavaScript:

navigator.credentials.create(options);

Para solicitar um login biométrico, use este JavaScript:

navigator.credentials.get(options);

O optionsobjeto é crítico e inclui informações sobre o tipo de credencial que você está solicitando, um nonce que evita ataques de repetição e informações sobre o site solicitante. Detalhes completos são abordados na especificação , mas também abordaremos o optionsobjeto em detalhes abaixo.

Nós temos padrões 

Vale a pena entender os padrões que permitem que um aplicativo da Web aproveite algo como o sistema TouchID do telefone de um usuário para login. Existem três padrões principais que você deve conhecer:

• WebAuthn, como já mencionado
• CTAP2
• FIDO2

WebAuthn também é conhecido como API de autenticação da Web. Esse é o padrão mencionado acima e, como desenvolvedor web, o principal com o qual você interagirá. Essa API permite que você se comunique com navegadores, como Chrome ou Safari, para solicitar biometria e outros meios de autenticação.

O segundo é CTAP2 , que determina como o navegador interage com o que é chamado de autenticador. Um autenticador é a peça de hardware que autentica um usuário com segurança criptográfica. Em um cenário biométrico, pode ser um dispositivo iOS ou Windows Hello. Em geral, como desenvolvedor web, você não se preocupará com esse padrão, pois o navegador o isola dele, mas vale a pena saber que ele está no meio.

Se você está confuso sobre como WebAuthn e CTAP2 interagem, aqui está um diagrama. Neste diagrama, o usuário é o rosto sorridente, a caixa laranja é um autenticador como TouchID ou Android Fingerprint Sensor, o globo branco é o navegador e a caixa azul é um site.

Por último, mas não menos importante, o FIDO2 é o padrão guarda-chuva . FIDO2 inclui CTAP2 e WebAuthn. (CTAP1, a primeira versão do CTAP, é compatível com versões anteriores.)

O que é um autenticador?

Os autenticadores são o que realmente executam a autenticação biométrica ou outra forma de autenticação. Embora este artigo se concentre na autenticação biométrica, os autenticadores oferecem outros métodos para autenticar o usuário. No coração de cada autenticador está uma maneira de gerar e armazenar pares de chaves públicas/privadas. A chave pública é compartilhada com o aplicativo da web e a chave privada é mantida de forma segura pelo autenticador.

Um autenticador pode ser implementado em hardware ou software, mas autenticadores de software como o disponível no Chrome DevTools são recomendados apenas para teste, não para uso em produção.

Existem duas categorias principais de autenticadores, plataforma cruzada e plataforma. Os autenticadores multiplataforma podem ser usados ​​em mais de um dispositivo. Os autenticadores de plataforma estão vinculados a um dispositivo específico, como um telefone. A maioria dos autenticadores biométricos voltados para o consumidor é integrada a um sistema operacional como iOS, Android ou Windows. Isso significa que eles estão vinculados a um determinado dispositivo e, portanto, são autenticadores de plataforma.

O outro aspecto importante de um autenticador é se ele testa a presença do usuário ou a verificação do usuário. A presença do usuário simplesmente indica que alguém interagiu com o autenticador (essa interação é chamada de “gesto de autorização”), talvez clicando em um botão. Esse teste de presença é útil se você estiver usando um autenticador como parte de um processo de autenticação multifator.

A verificação do usuário, por outro lado, oferece garantias de que o usuário autenticado é realmente quem pensamos que ele é. Isso pode ser feito fornecendo algo que eles saibam ou, no caso biométrico, usando um atributo do usuário, como as dimensões de seu rosto. Na maioria dos casos, você estará interessado na verificação do usuário, que é o que os autenticadores biométricos comuns fornecem.

Escolhas, escolhas

Devido à abstração da API WebAuthn, você não pode ter certeza de que o usuário está autenticando por biometria. Você pode tomar certas medidas para incentivá-lo, mas não pode forçá-lo.

No entanto, a autenticação biométrica vinculada a sistemas operacionais populares é uma forma bastante comum de hardware compatível com WebAuthn, portanto, é provável que, se você incentivar seus usuários a configurar logins WebAuthn, eles usarão biometria. Você também pode incentivar isso por meio de mensagens em seu site.

Mesmo que eles não estejam usando biometria, se você usar o WebAuthn, pode ter certeza de que eles usarão uma solução de hardware segura para suas necessidades de autenticação.

Se a autenticação WebAuthn for bem-sucedida, você não saberá qual método foi usado. O que você pode controlar:

• Se você preferir usar uma plataforma cruzada ou um autenticador de plataforma.
• Solicitando a presença do usuário ou a verificação do usuário.

Em seguida, vamos nos aprofundar no fluxo de um usuário que está usando o método biométrico habilitado para WebAuthn para efetuar login.

O que são “cerimônias”?

Se você ler sobre WebAuhn, poderá ouvir a palavra “cerimônia”. As cerimônias, no contexto do WebAuthn, são interações prescritas entre software, hardware e entidades físicas, como seres humanos ou dispositivos. Você pode pensar em cerimônias como protocolos de rede estendidos ao mundo físico.

Existem dois tipos de cerimônias definidas no WebAuthn e ambas são necessárias para que a autenticação biométrica funcione com seu aplicativo da web.

Cadastro

A primeira cerimônia é o registro, onde o autenticador é, enfim, registrado no seu site. Da mesma forma, seu site é registrado com o autenticador. O resultado final de um registro é uma credencial, que é usada em cerimônias posteriores.

Para registrar um autenticador, use este código:

navigator.credentials.create(options);

Como prometido acima, vamos nos aprofundar nisso com mais detalhes. O optionsobjeto se parece com isso:

options =  {  publicKey: {	rp: { id: "cosmosclownstore.com",      	name: "Cosmo’s Clown Store" },	user: { id: "1234",        	name: "krusty@example.com",        	displayName: "Krusty The Clown" },	challenge: "...",	pubKeyCredParams: [ { type: "public-key", alg: -7 }],            authenticatorSelection: {}	//...  }}

 Vejamos este optionsobjeto com mais detalhes.

Primeiro, o rpcampo contém dados sobre seu aplicativo da web. O WebAuthn inclui restrições de segurança integradas, como:

• Exigir que todas as chamadas de API ocorram a partir de uma página fornecida por HTTPS.
• Forçando o identificador do site no registro para corresponder ao nome do host atual.

Ao se registrar, você, como desenvolvedor do aplicativo da web, pode especificar um domínio mais amplo se quiser aceitar a nova credencial em vários subdomínios.

Por exemplo, se eu me registrar com um rp.idde cosmosclownstore.com, mas depois solicitar um login biométrico de um webapp hospedado em app.cosmosclownstore.com, isso será permitido.

No entanto, se eu me registrar em rp.idapp.cosmosclownstore.com e tentar iniciar uma sessão de autenticação biométrica a partir de um aplicativo hospedado em store.cosmosclownstore.com, isso não funcionará.

Em segundo lugar, você tem o usercampo, que contém informações sobre esse usuário. Isso vincula a credencial criada no autenticador à conta no site. Você pode perceber que isso implica que o usuário já possui uma conta no site e que as novas credenciais do WebAuthn são apenas outro meio de autenticação, não o principal. Isso geralmente é verdade, embora existam autenticadores que oferecem suporte a algo chamado “credenciais detectáveis”, que contornam essa limitação.

Em terceiro lugar, há um challengecampo, que é um nonce para evitar ataques de repetição. É uma string exclusiva de alta entropia que você, como desenvolvedor de aplicativos da web, deve fornecer. Este desafio será retornado na resposta e você deve verificar se são iguais.

Em quarto lugar, há o pubKeyCredParamscampo, que indica que tipo de algoritmo de chave privada pública você está interessado em oferecer suporte. Os valores dos objetos na matriz são definidos neste documento da IANA , mas -7, indicando ECDSA com SHA-256, tem suporte garantido — é exigido pela especificação.

Por último, existe o authenticatorSelectioncampo, que permite indicar determinados atributos dos autenticadores para esta cerimónia. Isso inclui a categoria multiplataforma/plataforma mencionada acima.

Depois de construir o optionsobjeto e chamar navigator.credentials.create(options);, o usuário será solicitado pelo autenticador a adicionar uma credencial para seu site. Eles verão informações sobre seu site no rpobjeto, bem como informações sobre a conta deles no userobjeto. Se eles optarem por se registrar, você receberá uma resposta. Aqui está um exemplo de resposta:

{  response: {    clientDataJSON: {       type: “webauthn.create”,      challenge: ... // should match initial challenge      origin: ... //    },    attestationObject: {      authData: {        attestedCredentialData: {          credentialId: ...,           credentialPublicKey: ...,        }      }, // other stuff about attestation     }  }}

 As partes interessantes são o clientDataJSONobjeto, que possui alguns campos que você deve validar, incluindo type, challengee origin. Certifique-se de que sejam os esperados.

A confirmação do registro bem-sucedido ocorre no attestationObject.authData.attestedCredentialDataobjeto, que inclui o credentialIde o credentialPublicKey. Esses valores devem estar associados à conta do usuário; eles serão usados ​​pela próxima cerimônia - autenticação - que será discutida em detalhes abaixo.

Assim como uma credencial de nome de usuário/senha, vários usuários podem se registrar usando autenticação biométrica em um determinado site. Abaixo, o site da Cosmo's Clown Store contém as chaves públicas dos autenticadores de vários usuários:

Mas, crucialmente, cada site diferente obtém um registro e uma credencial diferentes (também chamados de “chave de acesso”) no mesmo autenticador. Abaixo, vários sites possuem uma chave pública que corresponde a uma das muitas chaves privadas no autenticador de um único usuário:

Autenticação

Depois que o usuário registrar um método de autenticação biométrica, ele poderá fazer login com o rosto ou a impressão digital. Para solicitar um login biométrico, use este JavaScript:

navigator.credentials.get(options);

Mais uma vez, o optionsobjeto é crítico. Aqui está um optionsobjeto de amostra:

credentialId = // value pulled from data stored at registration options = {  publicKey: {	rpId: "cosmosclownstore.com",	challenge: "...",	userVerification: "preferred",	allowCredentials: [{ type: "public-key", id: credentialId }]	//...  }}

Aqui, o rpIdé o identificador do site previamente cadastrado. O desafio novamente é uma string aleatória. userVerificationespecifica se queremos que o usuário seja verificado ou apenas teste a presença do usuário. 

O allowCredentialscampo inclui a lista de credenciais permitidas para este login. O valor de credentialIdfoi armazenado pelo servidor durante o processo de registro. Portanto, você deve ter alguma outra maneira de identificar o usuário antes de fazer a navigator.credentials.get(options);solicitação para que possa recuperar o id de credencial correto do armazenamento de dados do lado do servidor. 

As opções incluem:

• Defina um cookie quando eles se registrarem
• Peça o nome de usuário

Depois de criar o optionsobjeto e fazer a getsolicitação, você receberá uma resposta. Isso pode parecer algo assim: 

{  authenticatorData: {	rpIdHash : ..., // hash of the requesting party Id	flags : ..., // bit array including authentication results	// other info  },  clientDataJSON: {	type: "webauthn.get",	challenge: ... // should match initial challenge  }}

 Da mesma forma que na cerimônia de registro, verifique os valores, como the challengee the type, no clientDataJSONobjeto para garantir que sejam os esperados.

Além disso, examine o authenticatorData.rpIdHashpara certificar-se de que o valor corresponde a um hash SHA256 do rpIdapresentado na solicitação. Esse valor é o hash rpIdque o navegador viu. Se for diferente do que o webapp apresentou, você pode ter um ataque man-in-the-middle.

Finalmente, o authenticatorData.flagscampo é um campo de bits que contém os resultados da autenticação. O bit 0 é definido se o usuário estiver presente e o bit 2 é definido se o usuário foi verificado. 

Além das cerimônias

Integrar a autenticação biométrica em seu aplicativo da web sem trabalho de integração extensivo é muito legal, especialmente porque quase todo mundo com um smartphone agora tem um autenticador no bolso.

No entanto, há outro trabalho a ser feito para criar um sistema de login biométrico completo. Itens adicionais a serem observados:

• A menos que você faça certas coisas além da especificação (“senhas” gerenciadas por um servidor central), cada credencial está vinculada a um autenticador específico. Isso significa que, embora a autenticação biométrica seja ótima como método alternativo de autenticação, ela não deve ser a única, a menos que você tenha um processo robusto de recuperação de conta. Caso contrário, um telefone perdido significará uma conta abandonada.
• Embora o código JavaScript para registrar e fazer login de um usuário seja bastante direto, há algum trabalho para determinar se o usuário possui um autenticador biométrico válido, armazenar as credenciais com segurança após o registro e solicitar que o usuário faça login usando suas credenciais biométricas. Esse andaime é necessário, mas não vi bibliotecas que o ajudem; esteja preparado para escrever sua própria lógica.
• Você pode usar o WebAuthn como uma segunda parte de um processo MFA, conforme mencionado acima. É notavelmente resistente a phishing, pois você deve possuir o autenticador para concluir a cerimônia de autenticação.