Exercício – configurar a autenticação multifator

8 minutos

Na unidade anterior, aprendeu como ASP.NET Core Identidade implementa a palavra-passe única (TOTP) baseada no tempo para autenticação multifator (MFA). Nesta unidade, vai personalizar o formulário de aplicação Configurar autenticador existente para fornecer um código QR que contém a chave de registo.

Gerar códigos QR

Existem múltiplas estratégias para gerar o código QR. Um exemplo na documentação utiliza uma biblioteca JavaScript do lado do cliente. Nesta unidade, no entanto, é utilizado um pacote NuGet de terceiros 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 precisa para gerar códigos QR no formulário Configurar aplicação de autenticação .

No painel de terminal, instale o QRCoder pacote NuGet:
```
dotnet add package QRCoder --version 1.4.3
```
No painel Explorador , clique com o botão direito do rato na pasta Serviços e adicione um novo ficheiro com o nome 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. As dimensões do código QR são determinadas pelo valor de número inteiro transmitido a GetGraphic. Neste caso, o código QR gerado é composto por blocos com um tamanho de quatro píxeis 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 está registado como um serviço singleton no contentor IoC em Program.cs.

Personalizar autenticação multifator

Agora que pode gerar códigos QR, pode incorporar um código QR no formulário Configurar aplicação de autenticação .

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

Adicione a seguinte propriedade à classe EnableAuthenticatorModel para armazenar a representação de cadeia base 64 do código QR:

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)
    {
        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.

Adicione a seguinte instrução using na parte superior do ficheiro para resolver a referência a QRCodeService. Guarde as alterações.
```
using RazorPagesPizza.Services;
```

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

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

Isto define o nome a apresentar da chave na sua aplicação 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 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

Efetuou todas as alterações necessárias para um código QR no formulário Configurar aplicação de autenticação . Agora, pode testar facilmente a funcionalidade MFA.

Certifique-se de que guardou todas as alterações.
Crie e execute a aplicação com dotnet run.
Navegue para o site e inicie sessão com qualquer um dos utilizadores registados, se ainda não tiver sessão iniciada. Selecione Olá, [Nome próprio] [Apelido]! ligação para navegar para a página de gestão de perfis 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, ao utilizar o Microsoft Authenticator no Android, siga estes passos para adicionar a conta à aplicação:
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.
No separador SQL Server no VS Code, clique com o botão direito do rato na base de dados razorPagesPizza e selecione Nova consulta. Introduza a seguinte consulta e prima Ctrl+Shift+E para a executar.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Para o utilizador com sessão iniciada, o resultado mostra que a TwoFactorEnabled coluna é igual a 1. Uma vez que a autenticação multifator não foi ativada para o outro utilizador registado, o valor de coluna do registo é 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).

Uma vez que o Microsoft Authenticator foi configurado, são apresentados os seguintes botões:
- 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, prima Ctrl+C para parar a aplicação.

Resumo

Nesta unidade, adicionou a capacidade de gerar um código QR para o formulário Configurar aplicação de autenticação . Na unidade seguinte, pode aprender a utilizar a Identidade para armazenar afirmações e aplicar políticas de autorização.

Continuar