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, você personaliza o formulário existente do aplicativo Configurar autenticador para fornecer um código QR que contém a chave de registro.

Geração de códigos QR

Existem múltiplas 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 num elemento marcador de posição HTML como uma cadeia com codificação base-64.

Adicionar um serviço de código QR

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

No painel de terminal, instale o QRCoder pacote NuGet:
```
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 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:
- Utiliza injeção de construtor para obter acesso a uma instância da classe QRCodeGenerator da biblioteca.
- Expõe o método GetQRCodeAsBase64 para devolver a cadeia 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á registrado como um serviço singleton no contêiner 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 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 à EnableAuthenticatorModel classe:

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 processador 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 processador de página anterior, a injeção de parâmetro dá uma referência ao serviço singleton QRCodeService.

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

Incorpore a alteração realçada GenerateQrCodeUri ao método.

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.

Em 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 markup 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 Configurar aplicativo 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 runo .
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, em seguida, selecione Autenticação de dois fatores.
Selecione o botão Add authenticator app (Adicionar aplicação de autenticador).
Siga as instruções no ecrã para registar e verificar a sua aplicação de autenticador para este utilizador.

Por exemplo, usando o Microsoft Authenticator no Android, siga estas etapas para adicionar a conta ao aplicativo:
1. Abra a aplicação Microsoft Authenticator.
2. Selecione as reticências verticais no canto superior direito.
3. Selecione Adicionar conta.
4. Selecione Outra conta (Google, Facebook, etc.).
5. Leia o código QR conforme indicado.
Introduza o código de verificação fornecido pela sua aplicação TOTP na caixa de texto Código de Verificação.
Selecione Verificar.

Após uma verificação bem-sucedida, a página apresenta uma faixa A sua aplicação de autenticador foi verificada 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. 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 TwoFactorEnabled coluna é 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ão e, em seguida, inicie sessão novamente com o mesmo utilizador.
Introduza o código de verificação da aplicação de autenticador TOTP na caixa de texto Código de autenticador. Selecione o botão Iniciar sessão.
Selecione a ligação Hello, [Nome próprio] [Apelido]!. Em seguida, selecione o separador Two-factor authentication (Autenticação de dois fatores).

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

Resumo