Exercício - Configurar a autenticação multifator

10 minutos

Na unidade anterior, você aprendeu como o ASP.NET Core Identity implementa a senha única baseada no tempo (TOTP) para autenticação multifator (MFA). Nesta unidade, o/a utilizador/a personaliza o formulário do aplicativo autenticador existente para fornecer um código QR que contém a chave de registo.

Geração de 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 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 o que é necessário 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 do Explorer, clique com o botão direito do mouse na pasta Serviços e adicione um novo arquivo chamado QRCodeService.cs. Adicione o seguinte código:
```
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 passado para GetGraphic determina as dimensões do código QR. Neste caso, o código QR gerado é composto por blocos de quatro pixels quadrados.

No 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 está registado como um serviço singleton no contentor IoC dentro de Program.cs.

Personalizar a autenticação multifator

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

Abra o 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âmetros fornece uma referência ao serviço singleton QRCodeService.

Para resolver a referência a QRCodeService, adicione a seguinte instrução using à parte superior do arquivo. Salve suas alterações.
```
using RazorPagesPizza.Services;
```

Incorpore a alteração realçada 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 para exibição da chave em seu aplicativo TOTP.

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

<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 para um código QR no formulário aplicativo configurar autenticador. Agora você pode testar facilmente a funcionalidade MFA.

Certifique-se de que guardou todas as alterações.
Crie e execute o aplicativo com dotnet run.
Navegue até ao site e inicie sessão com qualquer utilizador registado, se ainda não tiver sessão iniciada. Selecione Olá, [Nome] [Sobrenome]! link para navegar até a página de gerenciamento de perfil e selecione Autenticação de dois fatores.
Selecione o botão Adicionar aplicação autenticadora.
Siga as instruções na tela para registrar e verificar seu aplicativo autenticador para esse usuário.

Por exemplo, usando o Microsoft Authenticator no Android, siga estas etapas para adicionar a conta ao aplicativo:
1. Abra o aplicativo Microsoft Authenticator.
2. Selecione o menu de 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 seu aplicativo TOTP na caixa de texto Código de verificação .
Selecione Verificar.

Após a verificação bem-sucedida, a página exibe um banner seu aplicativo autenticador foi verificado e alguns códigos de recuperação.
Na tab SQL Server no VS Code, clicar com o botão direito na base de dados RazorPagesPizza e selecionar Nova consulta. Digite a seguinte consulta e pressione Ctrl+Shift+E para executá-la.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Para o usuário conectado, a saída 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 aplicação Web, selecione Terminar sessãoe, em seguida, inicie sessão novamente com o mesmo utilizador.
Insira o código de verificação da aplicação autenticadora TOTP na caixa de texto Código autenticador. Selecione o botão Iniciar sessão.
Selecione Olá, [Nome] [Sobrenome]!. Em seguida, selecione o separador Autenticação de dois fatores.

Como o Microsoft Authenticator está configurado, os seguintes botões aparecem:
- Desativar 2FA
- Redefinir códigos de recuperação
- Configurar o aplicativo autenticador
- Redefinir o aplicativo autenticador
No painel de terminais do VS Code, pressione Ctrl+C para parar o aplicativo.

Resumo