Blazor WASM Derlemelerini Düz HTML Oturum Açma Sayfasına Önceden Yükleme

Sorunsuz Oturum Açma Entegrasyonu ile Blazor WASM'yi Geliştirme

Giriş sayfasının ışık hızında, hafif ve basit olduğu ancak yine de tam özellikli bir Blazor WASM uygulamasına yönlendirdiği bir web uygulaması açtığınızı hayal edin. 🚀 Bu tür kurulum, Blazor gibi modern çerçeveleri HTML ve JavaScript'in zamansız sadeliğiyle birleştirir. Ancak kullanıcınız hâlâ kimlik bilgilerini yazarken Blazor'un ağır WASM derlemelerini önceden yükleyebilir misiniz?

Geliştiriciler, özellikle ilk yükleme aşamasında sıklıkla kullanıcı deneyimini optimize etme zorluğuyla karşı karşıya kalır. Sade bir HTML giriş sayfası hızlı erişime izin verir, ancak onu Blazor ile entegre etmek karmaşıklıkları beraberinde getirir. Pek çok kişi, giriş sayfası hala aktifken Blazor uygulamasını "kullanıma hazır" hale getirip getiremeyeceklerini merak ediyor. İşte bu konu tam da bu noktada ilgi çekici hale geliyor.

Buradaki fikir, oturum açma sayfasının yaşam döngüsü sırasında Blazor WASM derlemelerini indirmek için eşzamansız işlemlerden yararlanmaktır. Kullanıcı oturum açtığında uygulama zaten önceden yüklenmiştir ve neredeyse anında başlayabilir. Bu yaklaşım yalnızca algılanan performansı artırmakla kalmaz, aynı zamanda kullanıcı dostu bir tasarımı da korur. 🌟

Bu makalede, bu kurulumun mümkün olup olmadığını inceleyeceğiz, potansiyel tehlikelerini tartışacağız ve bunu başarmak için pratik adımlar sunacağız. Sonunda, kusursuz bir kullanıcı deneyimi için düz HTML giriş sayfalarını gelişmiş Blazor WASM uygulamalarıyla nasıl birleştireceğinizi öğreneceksiniz.

Basit HTML ile Blazor WASM Ön Yüklemesini Optimize Etme

Önceki örneklerde sağlanan komut dosyaları, hafif, hızlı yüklenen HTML oturum açma sayfası ile daha yoğun kaynak kullanan Blazor WASM uygulaması arasındaki boşluğu kapatmak üzere tasarlanmıştır. İlk komut dosyası, Blazor'un WebAssembly derlemelerinin oturum açma sayfası yaşam döngüsü sırasında eşzamansız olarak önceden yüklenmesini sağlar. Bu, ana uygulamanın kimlik doğrulama sonrasında neredeyse anında yüklenmesine izin vererek kullanıcı deneyimini geliştirir. Örneğin, "blazor.boot.json" dosyasının getirilmesi kritik bir adımdır çünkü bu dosya, Blazor uygulamasını başlatmak için gereken tüm meta verileri ve kaynakları içerir. Bu sayede kullanıcılar, giriş bilgilerini gönderdikten sonra gecikme yaşamazlar. 🌐

Ön uç komut dosyasının bir diğer önemli kısmı, birden fazla eşzamansız görevi aynı anda gerçekleştirmek için JavaScript vaatlerinin kullanılmasıdır. Derlemeler getirilirken oturum açma işlevi tamamen çalışır durumdadır. Bu, arka plan görevlerini gerçekleştirirken bile uygulamanın duyarlı olmasını sağlar. Bunun harika bir örneği, 'Promise.all()' yönteminin derleme indirme işlemlerini nasıl birleştirerek onu verimli ve arıza korumalı hale getirdiğidir. Bu yaklaşım, ön yükleme sırasında olası hata noktalarını en aza indirerek kullanıcıların bozuk veya eksik uygulama yüklemeleriyle karşılaşma riskini azaltır.

Arka uç tarafında, kullanıcıların kimliğini güvenli bir şekilde doğrulamak ve bir JSON Web Token (JWT) döndürmek için ASP.NET API kullanılır. Bu belirteç yalnızca kullanıcı oturumunu doğrulamakla kalmaz, aynı zamanda Blazor uygulamasının oturum açtıktan sonra güvenli bir ortamda çalışmasını da sağlar. Sunucu kodunda "JwtSecurityTokenHandler" kullanılması, belirteçlerin endüstri standardı şifreleme yöntemlerine göre oluşturulmasını sağlayarak güvenliği artırır. Örneğin, geçerli kimlik bilgileriyle oturum açan bir kullanıcı, sonraki istekler için tarayıcının yerel deposunda saklanabilen imzalı bir JWT alır. 🔒

Bu komut dosyalarının dahil edilmesi sorunsuz, kullanıcı dostu bir iş akışı sağlar. Oturum açma sayfası yüklendiğinde, ön yükleme komut dosyası Blazor dosyalarını indirmeye başlar. Kullanıcı "Oturum Aç"ı tıklayıp kimliği doğrulandıktan sonra Blazor uygulaması yalnızca derlemeler hazırsa başlatılır. Aksi halde uygulama başlatılmadan önce indirme işleminin tamamlanmasını bekler. Bu yaklaşım yalnızca performansı optimize etmekle kalmaz, aynı zamanda kusursuz bir deneyim sağlar. Bir geliştirici, bu düzeni, bir motorun temel görevler için, ikincisinin ise ağır kaldırma için kullanıldığı "çift motorlu" bir arabaya benzetebilir. Bu denge, hem geliştiricilerin hem de kullanıcıların daha iyi, daha duyarlı bir uygulamadan yararlanmasını sağlar.

// Front-End: HTML + JavaScript solution for preloading Blazor WASM assemblies
document.addEventListener("DOMContentLoaded", async () => {
  // Step 1: Define the Blazor assemblies URL
  const wasmBasePath = "/_framework/blazor.boot.json";
  const preloadAssemblies = async () => {
    try {
      const response = await fetch(wasmBasePath);
      if (response.ok) {
        const data = await response.json();
        const assemblyPromises = data.resources.assembly.map((asm) => fetch(asm));
        await Promise.all(assemblyPromises);
        console.log("Blazor assemblies preloaded successfully.");
      }
    } catch (error) {
      console.error("Failed to preload Blazor assemblies:", error);
    }
  };
  preloadAssemblies();
});
// Login button handler
document.getElementById("login-btn").addEventListener("click", async () => {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  try {
    const response = await fetch("/api/authenticate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password })
    });
    if (response.ok) {
      const token = await response.json();
      localStorage.setItem("jwtToken", token);
      console.log("Authentication successful.");
      // Optionally, trigger Blazor WASM now
      if (typeof Blazor !== "undefined") Blazor.start();
    } else {
      alert("Invalid credentials.");
    }
  } catch (error) {
    console.error("Error during login:", error);
  }
});

using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
[ApiController]
[Route("api/[controller]")]
public class AuthenticateController : ControllerBase
{
    private readonly string key = "Your_Secret_Key_Here";

    [HttpPost]
    public IActionResult Authenticate([FromBody] LoginRequest request)
    {
        if (request.Username == "user" && request.Password == "password")
        {
            var tokenHandler = new JwtSecurityTokenHandler();
            var tokenKey = Encoding.ASCII.GetBytes(key);
            var tokenDescriptor = new SecurityTokenDescriptor
            {
                Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, request.Username) }),
                Expires = DateTime.UtcNow.AddHours(1),
                SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(tokenKey), SecurityAlgorithms.HmacSha256Signature)
            };
            var token = tokenHandler.CreateToken(tokenDescriptor);
            return Ok(tokenHandler.WriteToken(token));
        }
        return Unauthorized();
    }
}
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

Oturum Açma Sayfaları için Blazor WASM Yüklemesini Kolaylaştırma

Blazor WebAssembly uygulamasını optimize etmenin sıklıkla gözden kaçırılan yönlerinden biri, tarayıcının önbelleğe alma mekanizmalarından yararlanmaktır. Derlemeleri önceden yüklerken, bu kaynaklar sonraki ziyaretler için tarayıcı önbelleğinde yerel olarak depolanabilir, bu da yükleme sürelerini önemli ölçüde azaltır. Geliştiriciler, sunucu tarafındaki 'Önbellek Kontrolü' başlığını kullanarak, derlemeler gibi statik kaynakların düzgün bir şekilde önbelleğe alınmasını sağlayabilirler. Örneğin, derlemeleri bir yıl boyunca önbelleğe almak için "max-age=31536000" ayarını yapabilirsiniz; bu, nadiren değişen kaynaklar için idealdir. Bu yaklaşım, ön yükleme mekanizmasıyla sorunsuz bir şekilde çalışarak hem hızı hem de güvenilirliği artırır. 🚀

Dikkat edilmesi gereken bir diğer husus da Blazor'un uygulamadaki güncellemeleri nasıl yönettiğidir. Önceden yüklenmiş bir oturum açma sayfasının kullanılması, eski dosyaların kullanılmasını önlemek için derleme güncellemelerinin dikkatli bir şekilde ele alınması gerektiği anlamına gelir. 'blazor.boot.json' getirme mantığınıza bir sürüm kontrol sistemi uygulamak bu sorunu çözebilir. Derleme URL'lerine bir sürüm karması ekleyerek, uygulama yeniden dağıtıldığında tarayıcının güncellenmiş kaynakları getirmesini sağlarsınız. Örneğin, bir zaman damgası veya Git taahhüt karması eklemek, kullanıcıların gereksiz indirmelerden kaçınırken her zaman uygulamanın en son sürümünü almasını sağlar. 🌐

Son olarak, montaj indirmeleri sırasında kullanıcı deneyimini optimize etmek kritik öneme sahiptir. Giriş sayfasına görsel bir ilerleme göstergesi veya bir "yükleniyor" animasyonu eklemek, kullanıcılara arka planda bir şeyler olduğu konusunda geri bildirim sağlayabilir. Bu, kullanıcının hayal kırıklığını azaltır ve deneyimi daha etkileşimli hale getirir. Geliştiriciler, önbelleğe alma, sürüm kontrolleri ve görsel ipuçları gibi teknikleri birleştirerek Blazor WASM uygulamasının daha sorunsuz ve daha profesyonel bir şekilde konuşlandırılmasını sağlayabilirler.