Alıştırma - Çok faktörlü kimlik doğrulamasını yapılandırma

Tamamlandı

Önceki ünitede, ASP.NET Core Identity'nin çok faktörlü kimlik doğrulaması (MFA) için zamana dayalı tek seferlik parolayı (TOTP) nasıl uyguladığını öğrendinsiniz. Bu ünitede, kayıt anahtarını içeren bir QR kodu sağlamak için mevcut Kimlik doğrulayıcıyı yapılandır uygulamasını özelleştirin.

QR kodları oluşturma

QR kodunu oluşturmak için birden fazla strateji bulunur. Belgelerdeki bir örnek istemci tarafı JavaScript kitaplığını kullanır. Ancak bu ünitede, qr kodunu sunucuda C# ile oluşturmak için üçüncü taraf nuget paketi kullanılır. Elde edilen QR kodu görüntüsü, Base 64 ile kodlanmış bir dize olarak HTML yer tutucu öğesine eklenir.

QR kodu hizmeti ekleme

Şimdi Kimlik doğrulayıcı uygulamasını yapılandır formunda QR kodları oluşturmak için ihtiyacınız olan her şeyi oluşturalım.

  1. Terminal bölmesinde NuGet paketini yükleyin QRCoder :

    dotnet add package QRCoder --version 1.4.3
    
  2. Gezgin bölmesinde Hizmetler klasörüne sağ tıklayın ve QRCodeService.cs adlı yeni bir dosya ekleyin. Şu kodu ekleyin:

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

    Yukarıdaki kod:

    • Bir kitaplığa ait QRCodeGenerator sınıfının örneğine erişim elde etmek için oluşturucu eklemeyi kullanır.
    • Base 64 ile kodlanmış dizeyi döndürmek için GetQRCodeAsBase64 metodunu kullanıma sunar. QR kodunun boyutları, GetGraphic metoduna geçirilen tamsayı değeriyle belirlenir. Bu durumda, oluşturulan QR kodu dört piksel kare boyutunda bloklardan oluşur.
  3. Program.cs dosyasında vurgulanan satırları ekleyin:

    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, Program.cs içindeki IoC kapsayıcısında tekil hizmet olarak kaydedilir.

Çok faktörlü kimlik doğrulamasını özelleştirme

ARTıK QR kodları oluşturabileceğinize göre, Doğrulayıcıyı yapılandır uygulama formuna bir QR kodu ekleyebilirsiniz.

  1. Açın Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs ve aşağıdaki değişiklikleri yapın:

    1. QR kodunun Base 64 dizesi gösterimini depolamak için EnableAuthenticatorModel sınıfına aşağıdaki özelliği ekleyin:

      public class EnableAuthenticatorModel : PageModel
      {
          private readonly UserManager<RazorPagesPizzaUser> _userManager;
          private readonly ILogger<EnableAuthenticatorModel> _logger;
          private readonly UrlEncoder _urlEncoder;
      
          public string QrCodeAsBase64 { get; set; }    
      
    2. Vurgulanan değişiklikleri OnGetAsync sayfa işleyicisine ekleyin:

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

      Yukarıdaki sayfa işleyicisinde, parametre ekleme QRCodeService tekil hizmetine yönelik bir başvuru sağlar.

    3. QRCodeService başvurusunu çözümlemek için aşağıdaki using deyimini dosyanın en üstüne ekleyin. Yaptığınız değişiklikleri kaydedin.

      using RazorPagesPizza.Services;
      
    4. Vurgulanan değişikliği yöntemine ekleyin GenerateQrCodeUri .

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

      Bu, TOTP uygulamanızdaki anahtarın görünen adını ayarlar.

  2. Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml dosyasında, aşağıda vurgulanan değişiklikleri yapıp dosyayı kaydedin:

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

    Yukarıdaki işaretleme, Base 64 ile kodlanmış görüntüyü sayfaya ekler.

Çok faktörlü kimlik doğrulamasını test etme

Kimlik doğrulayıcı uygulamasını yapılandır formunda qr kodu için gereken tüm değişiklikleri yaptınız. Artık MFA işlevselliğini kolayca test edebilirsiniz.

  1. Tüm değişikliklerinizi kaydettiğinizden emin olun.

  2. ile dotnet runuygulamayı derleyin ve çalıştırın.

  3. Siteye gidin ve henüz oturum açmadıysanız kayıtlı kullanıcılardan biriyle oturum açın. Profil yönetimi sayfasına gitmek için Hello, [Ad] [Soyadı]! bağlantısı'nı seçin ve ardından İki öğeli kimlik doğrulaması'nı seçin.

  4. Kimlik doğrulayıcı uygulaması ekle düğmesini seçin.

  5. Bu kullanıcı için kimlik doğrulayıcı uygulamasını kaydedip doğrulamak için ekrandaki yönergeleri izleyin.

    Örneğin, Android'de Microsoft Authenticator'ı kullanarak hesabı uygulamaya eklemek için şu adımları izleyin:

    1. Microsoft Authenticator uygulamasını açın.
    2. Sağ üst köşeden dikey üç nokta şeklindeki menüyü seçin.
    3. Hesap ekle’yi seçin.
    4. Diğer hesap (Google, Facebook vb.) seçeneğini belirleyin.
    5. QR kodunu belirtildiği gibi tarayın.
  6. TOTP uygulamanız tarafından sağlanan doğrulama kodunu Doğrulama Kodu metin kutusuna girin.

  7. Doğrula seçeneğini belirleyin.

    Doğrulama başarılı olduğunda, sayfada Kimlik doğrulayıcı uygulamanız doğrulandı başlığı ve bazı kurtarma kodları görüntülenir.

  8. VS Code'un SQL Server sekmesinde RazorPagesPizza veritabanına sağ tıklayın ve Yeni sorgu'yu seçin. Aşağıdaki sorguyu girin ve çalıştırmak için Ctrl+ ShiftEtuşlarına+ basın.

    SELECT FirstName, LastName, Email, TwoFactorEnabled
    FROM dbo.AspNetUsers
    

    Oturum açmış kullanıcı için çıkış, sütunun TwoFactorEnabled değerine eşit 1olduğunu gösterir. Kaydolan diğer kullanıcı için çok faktörlü kimlik doğrulaması etkinleştirilmediğinden kaydın sütun değeri 0 olur.

  9. Web uygulamasında Oturumu kapat'ı seçin ve aynı kullanıcıyla yeniden oturum açın.

  10. Kimlik doğrulayıcı kodu metin kutusuna TOTP kimlik doğrulayıcı uygulamasından alınan doğrulama kodunu girin. Oturum açın düğmesini seçin.

  11. Merhaba [Ad] [Soyadı]! bağlantısını seçin. Ardından, İki öğeli kimlik doğrulama sekmesini seçin.

    Microsoft Authenticator ayarlandığı için aşağıdaki düğmeler görüntülenir:

    • İki öğeli kimlik doğrulamayı devre dışı bırak
    • Kurtarma kodlarını sıfırla
    • Kimlik doğrulayıcısı uygulamasını ayarla
    • Kimlik doğrulayıcısı uygulamasını sıfırla
  12. VS Code'daki terminal bölmesinde, uygulamayı durdurmak için Ctrl+C tuşuna basın.

Özet

Bu ünitede, Kimlik doğrulayıcıyı yapılandır uygulama formuna QR kodu oluşturma özelliğini eklediniz. Sonraki ünitede, talepleri depolamak ve yetkilendirme ilkelerini uygulamak için Kimlik'i kullanma hakkında bilgi edinebilirsiniz.