Habilite a geração de código QR para aplicativos autenticadores TOTP no ASP.NET Core

ASP.NET Core vem com suporte para aplicativos autenticadores para autenticação individual. Os aplicativos autenticadores de autenticação de dois fatores (2FA), usando um algoritmo de senha única (TOTP) baseado em tempo, são a abordagem recomendada pelo setor para o 2FA. A autenticação de dois fatores (2FA) usando Protocolo de Senhas Temporárias (TOTP) é preferível à autenticação de dois fatores via SMS. Um aplicativo autenticador fornece um código de 6 a 8 dígitos que os usuários devem inserir depois de confirmar seu nome de usuário e senha. Normalmente, um aplicativo autenticador é instalado em um smartphone.

Advertência

Um código TOTP ASP.NET Core deve ser mantido em segredo porque pode ser usado para autenticar com êxito várias vezes antes de expirar.

Os modelos de aplicativo Web ASP.NET Core suportam autenticadores, mas não fornecem suporte para geração de código QR. Os geradores de código QR facilitam a configuração do 2FA. Este documento fornece orientações para Razor Pages e aplicativos MVC sobre como adicionar geração de de código QR à página de configuração 2FA. Para obter orientações que se aplicam a Blazor Web Apps, consulte Habilitar a geração de código QR para aplicações autenticadoras TOTP num ASP.NET Core Blazor Web App. Para obter orientações que se aplicam a aplicativos Blazor WebAssembly, consulte Habilitar a geração de código QR para aplicativos autenticadores TOTP no ASP.NET Core Blazor WebAssembly com ASP.NET Core Identity.

A autenticação de dois fatores não acontece usando um provedor de autenticação externo, como Google ou Facebook. Os logins externos são protegidos por qualquer mecanismo fornecido pelo provedor de login externo. Considere, por exemplo, o Microsoft provedor de autenticação requer uma chave de hardware ou outra abordagem 2FA. Se os modelos padrão exigissem 2FA para o aplicativo Web e o provedor de autenticação externo, os usuários seriam obrigados a satisfazer duas abordagens 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.

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

Estas instruções usam qrcode.js do https://davidshimjs.github.io/qrcodejs/ repo.

• Transfira a biblioteca JavaScript qrcode.js para a pasta wwwroot\lib do seu projeto.
• Siga as instruções no Scaffold Identity para gerar /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
• No /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, localize a seção Scripts no final do arquivo:

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

• Crie um novo arquivo JavaScript chamado qr.js no wwwroot/js e adicione o seguinte código para gerar o QR Code:

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

• Atualize a seção Scripts para adicionar uma referência à biblioteca de qrcode.js baixada anteriormente.
• Adicione o arquivo qr.js com a chamada para gerar o código QR:

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}

• Elimine o parágrafo que o liga a estas instruções.

Execute seu aplicativo e certifique-se de que você pode digitalizar o código QR e validar o código que o autenticador prova.

Alterar o nome do site no código QR

O nome do site no código QR é retirado do nome do projeto que você escolher ao criar inicialmente seu projeto. Você pode alterá-lo procurando o método GenerateQrCodeUri(string email, string unformattedKey) no /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

O código padrão do modelo tem a seguinte aparência:

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 é derivado do nome da sua solução. Ele pode ser alterado para qualquer valor, mas sempre deve ser codificado por URL.

Usando uma biblioteca de QR Code diferente

Pode substituir a biblioteca de QR Code pela sua biblioteca preferida. O HTML contém um elemento qrCode no qual você pode colocar um QR Code por qualquer mecanismo que sua biblioteca forneça.

O URL formatado corretamente para o QR Code está disponível em:

• AuthenticatorUri propriedade do modelo.
• data-url propriedade no elemento qrCodeData.

Desvio de tempo entre cliente e servidor 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 os logins TOTP 2FA estiverem falhando, verifique se o tempo do servidor está correto e, de preferência, sincronizado com um serviço NTP preciso.