Exercício: Configurar a autenticação multifator

10 minutos

Na unidade anterior, você aprendeu como a Identidade do ASP.NET Core implementa a Senha de Uso Único Baseadas em Tempo (TOTP) para a autenticação multifator (MFA). Nesta unidade, você personalizará o formulário Configurar aplicativo autenticador existente para fornecer um código QR contendo a chave de registro.

Como gerar códigos QR

Existem várias estratégias para gerar o código QR. Um exemplo na documentação usa uma biblioteca JavaScript do lado do cliente. Nesta unidade, no entanto, um pacote NuGet de terceiros é usado para gerar o código QR com o C# no servidor. A imagem de código QR resultante é injetada em um elemento de espaço reservado HTML como uma cadeia de caracteres codificada em Base 64.

Adicionar um serviço de código QR

Vamos criar tudo de que você precisa para gerar códigos QR no formulário Configurar aplicativo autenticador.

No painel do terminal, instale o pacote NuGet QRCoder:
```
dotnet add package QRCoder --version 1.6.0
```
No painel Explorer, clique com o botão direito do mouse na pasta Serviços e adicione um arquivo chamado QRCodeService.cs. Adicione os códigos a seguir:
```
using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}
```
O código anterior:
- Usa injeção de construtor para obter acesso a uma instância da classe QRCodeGenerator da biblioteca.
- Expõe o método GetQRCodeAsBase64 para retornar a cadeia de caracteres codificada em Base 64. O valor inteiro repassado para GetGraphic determina as dimensões do código QR. Nesse caso, o código QR gerado será composto por blocos com o tamanho de quatro pixels ao quadrado.

Em Program.cs, adicione as linhas realçadas:

using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

QRCodeService é registrado como um serviço singleton no contêiner IoC em Program.cs.

Personalizar a autenticação multifator

Agora que você pode gerar códigos QR, pode inserir um código QR no formulário Configurar aplicativo autenticador.

Abra Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs e faça as seguintes alterações:

Para armazenar a representação de cadeia de caracteres Base 64 do código QR, adicione a seguinte propriedade à classe EnableAuthenticatorModel:

public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

Incorpore as alterações realçadas no manipulador de página OnGetAsync:

public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

No manipulador de página anterior, a injeção de parâmetro fornece uma referência ao serviço singleton QRCodeService.

Para resolver a referência a QRCodeService, adicione a seguinte instrução using ao início do arquivo. Salve suas alterações.
```
using RazorPagesPizza.Services;
```

Incorpore as alterações realçadas ao método GenerateQrCodeUri.

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

Isso define o nome de exibição da chave em seu aplicativo TOTP.

Em Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, faça as seguintes alterações realçadas e salve:

<li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

A marcação anterior incorpora a imagem codificada em Base 64 na página.

Testar autenticação multifator

Você fez todas as alterações necessárias a um código QR no formulário Configurar aplicativo autenticador. Agora você pode testar facilmente a funcionalidade de MFA.

Verifique se você salvou todas as alterações.
Compile e execute o aplicativo com dotnet run.
Navegue até o site e entre com um dos usuários registrados, se você ainda não estiver conectado. Selecione o link Olá, [Nome] [Sobrenome]! para navegar até a página de gerenciamento de perfil e, em seguida, selecione Autenticação de dois fatores.
Selecione o botão Adicionar aplicativo autenticador.
Siga as instruções na tela para registrar e verificar o aplicativo autenticador para esse usuário.

Usando o Microsoft Authenticator no Android como exemplo, siga estas etapas para adicionar a conta ao aplicativo:
1. Abra o aplicativo Microsoft Authenticator.
2. Selecione o menu kebab (reticências verticais) no canto superior direito.
3. Selecione Adicionar conta.
4. Selecione Outra conta (Google, Facebook etc.).
5. Digitalize o código QR, conforme indicado.
Insira o código de verificação fornecido pelo aplicativo TOTP na caixa de texto Código de Verificação.
Selecione Verificar.

Após a verificação bem-sucedida, a página exibe uma faixa Seu aplicativo autenticador foi verificado e alguns códigos de recuperação.
Na guia SQL Server no VS Code, clique com o botão direito do mouse no banco de dados RazorPagesPizza e selecione Nova consulta. Insira a consulta a seguir e pressione Ctrl+Shift+E para executá-la.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Para o usuário conectado, o resultado mostra que a coluna TwoFactorEnabled é igual a 1. Como a autenticação multifator não está habilitada para o outro usuário registrado, o valor da coluna do registro é 0.
Na aplicativo Web, selecione Logoff e entre novamente com o mesmo usuário.
Insira o código de verificação do aplicativo autenticador TOTP na caixa de texto Código do autenticador. Selecione o botão Fazer logon.
Selecione Olá, [nome] [sobrenome]!. Em seguida, selecione a guia Autenticação de dois fatores.

Como o Microsoft Authenticator está configurado, os seguintes botões são exibidos:
- Desabilitar 2FA
- Redefinir códigos de recuperação
- Configurar o aplicativo autenticador
- Redefinir o aplicativo autenticador
No painel do terminal no VS Code, pressione Ctrl+C para interromper o aplicativo.

Resumo