Latihan - Mengonfigurasikan autentikasi multifaktor

8 menit

Di unit sebelumnya, Anda mempelajari bagaimana ASP.NET Core Identity menerapkan kata sandi satu kali berbasis waktu (TOTP) untuk autentikasi multifaktor (MFA). Di unit ini, Anda menyesuaikan formulir Konfigurasi aplikasi pengautentikasi yang ada untuk menyediakan kode QR yang berisi kunci pendaftaran.

Menghasilkan kode QR

Ada beberapa strategi untuk menghasilkan kode QR. Contoh dalam dokumentasi menggunakan pustaka JavaScript sisi klien. Namun, dalam unit ini, paket NuGet pihak ketiga digunakan untuk menghasilkan kode QR dengan C# di server. Gambar kode QR yang dihasilkan dimasukkan ke dalam elemen tempat penampung HTML sebagai string yang dikodekan base-64.

Menambahkan layanan kode QR

Mari membangun semua yang Anda perlukan untuk menghasilkan kode QR di formulir Konfigurasikan aplikasi pengautentikasi.

Di panel terminal, pasang paket NuGet QRCoder:
```
dotnet add package QRCoder --version 1.4.3
```

Di panel Penjelajah, klik kanan folder Layanan dan tambahkan file baru bernama QRCodeService.cs. Tambahkan kode berikut:

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));
    }
}

Kode sebelumnya:

Menggunakan injeksi konstruktor untuk mendapatkan akses ke instans kelas QRCodeGenerator pustaka.
Mengekspos metode GetQRCodeAsBase64 untuk mengembalikan string yang dikodekan base-64. Dimensi kode QR ditentukan oleh nilai bilangan bulat yang diteruskan ke GetGraphic. Dalam hal ini, kode QR yang dihasilkan terdiri dari blok berukuran empat piksel kuadrat.

Di Program.cs, tambahkan baris yang disorot:

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 terdaftar sebagai layanan database tunggal dalam kontainer IoC dalam Program.cs.

Mengkustomisasi autentikasi multifaktor

Sekarang setelah Anda dapat menghasilkan kode QR, Anda dapat menyematkan kode QR ke dalam formulir Konfigurasikan aplikasi pengautentikasi.

Buka Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs dan buat perubahan berikut:

Tambahkan properti berikut ke kelas EnableAuthenticatorModel untuk menyimpan representasi string base-64 kode QR:

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

    public string QrCodeAsBase64 { get; set; }

Gabungkan perubahan yang disorot dalam penanganan halaman 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();
}

Di penanganan halaman sebelumnya, injeksi parameter memberikan referensi ke layanan database tunggal QRCodeService.

Tambahkan pernyataan using berikut ke bagian atas file untuk menyelesaikan referensi ke QRCodeService. Simpan perubahan Anda.
```
using RazorPagesPizza.Services;
```

Gabungkan perubahan yang disorot ke metode GenerateQrCodeUri.

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

Ini menetapkan nama tampilan untuk kunci di aplikasi TOTP Anda.

Di Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, buat perubahan yang disorot berikut dan simpan:

<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>

Markup sebelumnya menyematkan gambar yang dikodekan base-64 di halaman.

Menguji autentikasi multifaktor

Anda telah membuat semua perubahan yang diperlukan untuk kode QR pada formulir Konfigurasikan aplikasi pengautentikasi. Sekarang Anda dapat dengan mudah menguji fungsionalitas MFA.

Pastikan Anda telah menyimpan semua perubahan Anda.
Bangun dan jalankan aplikasi dengan dotnet run.
Navigasi ke situs dan masuk dengan pengguna terdaftar, jika Anda belum masuk. Pilih tautan Halo, [Nama depan] [Nama belakang]! untuk membuka halaman manajemen profil, lalu pilih Otentikasi dua faktor.
Pilih tombol Tambahkan aplikasi pengautentikasi.
Ikuti petunjuk di layar guna mendaftar dan memverifikasi aplikasi pengautentikasi Anda untuk pengguna ini.

Misalnya, menggunakan Microsoft Authenticator di Android, ikuti langkah-langkah berikut untuk menambahkan akun ke aplikasi:
1. Buka aplikasi Microsoft Authenticator.
2. Pilih menu kebab (elipsis vertikal) di kanan atas.
3. Pilih Tambahkan akun.
4. Pilih Akun lain (Google, Facebook, dll.).
5. Pindai kode QR seperti yang ditunjukkan.
Masukkan kode verifikasi yang disediakan oleh aplikasi TOTP Anda di kotak teks Kode Verifikasi.
Pilih Verifikasi.

Setelah verifikasi berhasil, halaman akan menampilkan banner Aplikasi pengautentikasi Anda telah diverifikasi dan beberapa kode pemulihan.
Di tab SQL Server di Visual Studio Code, klik kanan database RazorPagesPizza dan pilih Kueri baru. Masukkan kueri berikut dan tekan Ctrl+Shift+E untuk menjalankannya.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Untuk pengguna yang masuk, output menunjukkan bahwa TwoFactorEnabled kolom sama dengan 1. Karena autentikasi multifaktor belum diaktifkan untuk pengguna terdaftar lainnya, nilai kolom rekaman adalah 0.
Di aplikasi web, pilih Keluar, lalu masuk lagi dengan pengguna yang sama.
Masukkan kode verifikasi dari aplikasi pengautentikasi TOTP di kotak teks Kode pengautentikasi. Pilih tombol Masuk.
Pilih Halo, [Nama depan] [Nama belakang]!. Kemudian, pilih tab Otentikasi dua faktor.

Karena Microsoft Authenticator telah disiapkan, tombol berikut akan muncul:
- Nonaktifkan 2FA
- Atur ulang kode pemulihan
- Siapkan aplikasi pengautentikasi
- Atur ulang aplikasi pengautentikasi
Di panel terminal di Visual Studio Code, tekan Ctrl+C untuk menghentikan aplikasi.

Ringkasan

Di unit ini, Anda menambahkan kemampuan untuk menghasilkan kode QR ke formulir Konfigurasikan aplikasi pengautentikasi. Di unit berikutnya, Anda dapat mempelajari tentang menggunakan Identitas untuk menyimpan klaim dan menerapkan kebijakan otorisasi.

Lanjutkan