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

O ASP.NET Core é fornecido com suporte para aplicativos autenticadores para autenticação individual. Aplicativos autenticadores de autenticação de dois fatores (2FA), usando um algoritmo de senha de uso único baseada em tempo (TOTP), são a abordagem recomendada pelo setor para 2FA. 2FA usando TOTP é preferencial para SMS 2FA. 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.

Os modelos de aplicativo Web ASP.NET Core dão suporte a autenticadores, mas não dão suporte à geração de código QR. Os geradores de código QR facilitam a configuração da 2FA. Este documento fornece diretrizes para aplicativos MVC e páginas do Razor sobre como adicionar a geração de código QR à página de configuração da 2FA. Para obter diretrizes que se aplicam aos Aplicativos Web Blazor, consulte Habilitar a geração de código QR para aplicativos autenticadores TOTP em um aplicativo Web do Blazor do ASP.NET Core.

A autenticação de dois fatores não acontece usando um provedor de autenticação externa, como Google ou Facebook. Os logons externos são protegidos por qualquer mecanismo que o provedor de logon externo forneça. Considere, por exemplo, que o provedor de autenticação da Microsoft requer uma chave de hardware ou outra abordagem de 2FA. Se os modelos padrão tiverem imposto 2FA "local", os usuários serão obrigados a atender a duas abordagens de 2FA, o que não é um cenário comumente usado.

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

Essas instruções usam qrcode.js do repositório https://davidshimjs.github.io/qrcodejs/.

• Baixe a biblioteca qrcode.js JavaScript para a pasta wwwroot\lib em seu projeto.
• Siga as instruções em 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 em wwwroot/js e adicione o seguinte código para gerar 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
    });
});

• Atualize a seção Scripts para adicionar uma referência à biblioteca 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>
}

• Exclua o parágrafo que vincula você a essas instruções.

Execute seu aplicativo e verifique se você pode verificar o código QR e validar o código que o autenticador comprova.

Alterar o nome do site no código QR

O nome do site no código QR é obtido do nome do projeto escolhido 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 site, extraído do nome da solução. Ele pode ser alterado para qualquer valor, mas sempre deve ser codificado em URL.

Usando uma biblioteca de código QR diferente

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

A URL formatada corretamente para o código QR está disponível em:

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

Distorção de tempo do cliente e do servidor TOTP

A autenticação com senha de uso único baseada em tempo (TOTP) depende do servidor e do dispositivo autenticador terem um tempo preciso. Os tokens duram apenas 30 segundos. Se os logons de 2FA TOTP estiverem falhando, verifique se a hora do servidor é precisa e, preferencialmente, se está sincronizada com um serviço NTP preciso.