„Blazor WASM“ rinkinių įkėlimas į paprastą HTML prisijungimo puslapį

Blazor WASM tobulinimas naudojant vientisą prisijungimo integraciją

Įsivaizduokite, kad atidarote žiniatinklio programą, kurioje prisijungimo puslapis yra žaibiškas, lengvas ir paprastas, bet vis tiek veda į visų funkcijų turinčią Blazor WASM programą. 🚀 Tokia sąranka sujungia modernias sistemas, tokias kaip Blazor, su nesenstančiu HTML ir JavaScript paprastumu. Bet ar galite iš anksto įkelti sunkius Blazor WASM rinkinius, kol vartotojas vis dar įveda savo kredencialus?

Kūrėjai dažnai susiduria su iššūkiu optimizuoti vartotojo patirtį, ypač pradiniame įkėlimo etape. Paprastas HTML prisijungimo puslapis leidžia greitai pasiekti, tačiau integruojant jį su Blazor atsiranda sudėtingumo. Daugeliui kyla klausimas, ar jie gali padaryti „Blazor“ programą „paruoštą naudoti“, kol prisijungimo puslapis vis dar yra aktyvus. Būtent čia ši tema tampa įdomi.

Idėja yra panaudoti asinchronines operacijas, norint atsisiųsti Blazor WASM rinkinius prisijungimo puslapio gyvavimo ciklo metu. Kai vartotojas prisijungia, programa jau yra iš anksto įkelta ir gali būti paleista beveik akimirksniu. Šis metodas ne tik pagerina suvokiamą našumą, bet ir palaiko vartotojui patogų dizainą. 🌟

Šiame straipsnyje išnagrinėsime, ar ši sąranka yra įmanoma, aptarsime galimus jos trūkumus ir pasiūlysime praktinius veiksmus, kaip tai pasiekti. Pabaigoje žinosite, kaip sujungti paprastus HTML prisijungimo puslapius su pažangiomis Blazor WASM programėlėmis, kad naudotojas veiktų sklandžiai.

„Blazor WASM“ išankstinio įkėlimo optimizavimas naudojant paprastą HTML

Ankstesniuose pavyzdžiuose pateikti scenarijai sukurti siekiant užpildyti atotrūkį tarp lengvo, greitai įkeliamo HTML prisijungimo puslapio ir daug išteklių reikalaujančios Blazor WASM programos. Pirmasis scenarijus užtikrina, kad „Blazor“ WebAssembly rinkiniai būtų iš anksto įkeliami asinchroniškai per prisijungimo puslapio gyvavimo ciklą. Tai pagerina vartotojo patirtį, nes leidžia pagrindinei programai įkelti beveik akimirksniu po autentifikavimo. Pavyzdžiui, failo „blazor.boot.json“ gavimas yra labai svarbus veiksmas, nes jame yra visi metaduomenys ir ištekliai, reikalingi „Blazor“ programai paleisti. Tokiu būdu vartotojai nepatirs vėlavimų pateikę savo prisijungimo duomenis. 🌐

Kita svarbi priekinio scenarijaus dalis yra JavaScript pažadų naudojimas, norint vienu metu atlikti kelias asinchronines užduotis. Kol rinkiniai gaunami, prisijungimo funkcija visiškai veikia. Tai užtikrina, kad programa reaguoja net atliekant fonines užduotis. Puikus pavyzdys yra tai, kaip metodas „Promise.all()“ sujungia surinkimo atsisiuntimo procesus, todėl jis yra efektyvus ir saugus. Šis metodas sumažina galimas gedimo vietas iš anksto įkeliant ir sumažina riziką, kad naudotojai susidurs su neveikiančiais arba neužbaigtais programos įkėlimais.

Užpakalinėje pusėje ASP.NET API naudojama saugiai autentifikuoti vartotojus ir grąžinti JSON žiniatinklio prieigos raktą (JWT). Šis prieigos raktas ne tik patvirtina vartotojo seansą, bet ir leidžia „Blazor“ programai veikti saugioje aplinkoje po prisijungimo. „JwtSecurityTokenHandler“ naudojimas serverio kode užtikrina, kad žetonai būtų generuojami taikant pramonės standartus šifravimo metodus, o tai padidina saugumą. Pavyzdžiui, vartotojas, prisijungęs naudodamas galiojančius kredencialus, gauna pasirašytą JWT, kuris gali būti saugomas vietinėje naršyklės saugykloje, kad būtų galima pateikti vėlesnes užklausas. 🔒

Įtraukus šiuos scenarijus pasiekiama sklandi ir patogi darbo eiga. Kai prisijungimo puslapis įkeliamas, išankstinio įkėlimo scenarijus pradeda atsisiųsti Blazor failus. Kai vartotojas spustelėja „Prisijungti“ ir yra autentifikuotas, „Blazor“ programa inicijuojama tik tada, kai rinkiniai yra paruošti. Priešingu atveju programa laukia, kol atsisiuntimas bus baigtas, prieš paleisdama. Šis metodas ne tik optimizuoja našumą, bet ir užtikrina sklandžią patirtį. Kūrėjas galėtų palyginti šią sąranką su „dviejų variklių“ automobiliu, kuriame vienas variklis naudojamas pagrindinėms užduotims, o antrasis – sunkiems kėlimams. Šis balansas užtikrina, kad tiek kūrėjai, tiek vartotojai galėtų mėgautis geresne, labiau reaguojančia programa.

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

Blazor WASM įkėlimo supaprastinimas prisijungimo puslapiams

Vienas dažnai nepastebimas „Blazor WebAssembly“ programos optimizavimo aspektas yra naršyklės talpyklos mechanizmų panaudojimas. Iš anksto įkeliant rinkinius, šie ištekliai gali būti saugomi lokaliai naršyklės talpykloje, kad būtų galima atlikti tolesnius apsilankymus, o tai žymiai sumažina įkėlimo laiką. Naudodami antraštę „Cache-Control“ serverio pusėje, kūrėjai gali užtikrinti, kad statiniai ištekliai, pvz., rinkiniai, būtų tinkamai saugomi talpykloje. Pavyzdžiui, galite nustatyti „max-age=31536000“, kad talpykloje būtų saugomi rinkiniai metams, o tai idealiai tinka retai keičiamiems ištekliams. Šis metodas sklandžiai veikia su išankstinio įkėlimo mechanizmu, padidindamas greitį ir patikimumą. 🚀

Kitas aspektas yra tai, kaip Blazor tvarko programos naujinimus. Iš anksto įkelto prisijungimo puslapio naudojimas reiškia, kad surinkimo naujinimai turi būti kruopščiai tvarkomi, kad nebūtų naudojami pasenę failai. Tai gali išspręsti įdiegus versijos tikrinimo sistemą „blazor.boot.json“ gavimo logikoje. Pridėdami versijos maišą prie surinkimo URL, užtikrinate, kad naršyklė gautų atnaujintus išteklius, kai programa bus perskirstyta. Pavyzdžiui, pridėjus laiko žymą arba „Git commit“ maišą užtikrinama, kad vartotojai visada gaus naujausią programos versiją ir išvengs nereikalingų atsisiuntimų. 🌐

Galiausiai, labai svarbu optimizuoti vartotojo patirtį atsisiunčiant surinkimą. Prisijungimo puslapyje įtraukus vaizdinį progreso indikatorių arba „įkėlimo“ animaciją, naudotojai gali pateikti atsiliepimų, kad kažkas vyksta fone. Tai sumažina vartotojų nusivylimą ir daro patirtį interaktyvesnę. Derindami tokius metodus kaip talpyklos kaupimas, versijų tikrinimas ir vaizdiniai ženklai, kūrėjai gali užtikrinti sklandesnį ir profesionalesnį Blazor WASM programos diegimą.