Ativar a geração de códigos QR para aplicações autenticadoras TOTP no ASP.NET Core

ASP.NET Core inclui suporte para aplicações autenticadoras para autenticação de utilizadores. As aplicações autenticadoras de autenticação de dois fatores (2FA) utilizam um Algoritmo de Palavra-passe de uso único baseado no tempo (TOTP), a abordagem recomendada pela indústria para a 2FA. (A 2FA baseada em TOTP é preferida em vez da 2FA por SMS.) Os utilizadores normalmente instalam a aplicação autenticadora num smartphone. A aplicação fornece um código de 6 a 8 dígitos que o utilizador insere após confirmar o nome de utilizador e a palavra-passe.

A autenticação de dois fatores não acontece usando um fornecedor externo de autenticação, como a Google ou o Facebook. Os logins externos são protegidos pelo mecanismo que o fornecedor de autenticação externo suporta. Por exemplo, o fornecedor de autenticação Microsoft requer uma chave de hardware ou outra abordagem de 2FA. Quando os modelos predefinidos requerem 2FA tanto para a aplicação web como para o fornecedor externo de autenticação, os utilizadores precisam de satisfazer duas abordagens de 2FA. Exigir duas abordagens 2FA desvia-se das práticas de segurança estabelecidas, que normalmente dependem de um único e forte método 2FA para autenticação.

Se estiver a trabalhar com Blazor em ASP.NET Core 8.0 ou posterior, pode encontrar orientações semelhantes nos seguintes artigos:

• Habilite a geração de código QR para aplicativos autenticadores TOTP em um ASP.NET Core Blazor Web App
• Ative a geração de códigos QR para aplicações autenticadoras TOTP em ASP.NET Core Blazor WebAssembly com ASP.NET Core Identity

Adicionar códigos QR à página de configuração da 2FA

As instruções seguintes utilizam o ficheiroqrcode.js do https://davidshimjs.github.io/qrcodejs/ repositório.

1. Descarregue a biblioteca JavaScript 'qrcode.js' para a pasta wwwroot\lib do seu projeto.

2. Siga as instruções no Andaime Identity para gerar o ficheiro /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml .

3. No ficheiro /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml , localize a Scripts secção no final do ficheiro:

   @section Scripts {
      <partial name="_ValidationScriptsPartial" />
   }
   

4. Crie um novo ficheiro JavaScript chamado qr.js na pasta wwwroot/js e adicione o seguinte código que gera o código QR:

   window.addEventListener("load", () => {
   const uri = document.getElementById("qrCodeData").getAttribute('data-url');
   new QRCode(document.getElementById("qrCode"),
      {
         text: uri,
         width: 150,
         height: 150
      });
   });
   

5. Atualize a Scripts secção para adicionar uma referência à qrcode.js biblioteca que descarregou anteriormente.

6. Adicione o ficheiro qr.js com a chamada que gera o código QR:

   @section Scripts {
      <partial name="_ValidationScriptsPartial" />
      <script type="text/javascript" src="~/lib/qrcode.js"></script>
      <script type="text/javascript" src="~/js/qr.js"></script>
   }
   

7. Apaga o parágrafo que te liga a estas instruções.

8. Execute seu aplicativo. Confirma que consegues digitalizar o código QR e validar o código fornecido pelo autenticador.

Alterar o nome do site no código QR

O nome do site no código QR vem do nome do projeto que seleciona ao criar o seu projeto. Podes alterar isso procurando o GenerateQrCodeUri(string email, string unformattedKey) método no ficheiro /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs .

Aqui está o código padrão do modelo:

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

O segundo parâmetro na chamada para string.Format é o nome do seu site, que é obtido a partir do nome da sua solução. Podes alterá-lo para qualquer valor, mas deve estar sempre codificado por URL.

Usa uma biblioteca diferente de códigos QR

Pode substituir a biblioteca de códigos QR pela sua biblioteca preferida. O HTML contém um qrCode elemento no qual pode inserir um código QR pelo mecanismo que a sua biblioteca fornecer.

Pode encontrar o URL corretamente formatado para o código QR nas seguintes localizações:

• AuthenticatorUri Propriedade do modelo
• data-url Propriedade no qrCodeData elemento

Verifique os horários do cliente e servidor do TOTP

A autenticação TOTP (Time-based One-Time Password) depende de o servidor e o dispositivo autenticador terem um tempo preciso. Os tokens duram apenas 30 segundos. Se o início de sessão com TOTP 2FA falhar, confirme que a hora do servidor está correta e, de preferência, sincronizada com um serviço NTP com hora exata.

Conteúdo relacionado

• Habilite a geração de código QR para aplicativos autenticadores TOTP em um ASP.NET Core Blazor Web App
• Ative a geração de códigos QR para aplicações autenticadoras TOTP em ASP.NET Core Blazor WebAssembly com ASP.NET Core Identity