Blazor WASM -kokoonpanojen esilataus tavalliselle HTML-kirjautumissivulle

Blazor WASM:n tehostaminen saumattomalla sisäänkirjautumisintegraatiolla

Kuvittele, että avaat verkkosovelluksen, jossa kirjautumissivu on salamannopea, kevyt ja yksinkertainen, mutta johtaa silti täysin varusteluun Blazor WASM -sovellukseen. 🚀 Tällaisessa asetelmassa yhdistyvät modernit puitteet, kuten Blazor, ajaton HTML:n ja JavaScriptin yksinkertaisuus. Mutta voitko esiladata Blazorin raskaat WASM-kokoonpanot, kun käyttäjä vielä kirjoittaa valtuustietojaan?

Kehittäjät kohtaavat usein haasteen optimoida käyttökokemusta, etenkin latausvaiheessa. Tavallinen HTML-kirjautumissivu mahdollistaa nopean pääsyn, mutta sen integroiminen Blazoriin tuo monimutkaisuutta. Monet ihmettelevät, voivatko he tehdä Blazor-sovelluksen "valmis käyttöön", kun kirjautumissivu on vielä aktiivinen. Juuri tästä aiheesta tulee kiehtova.

Ajatuksena on hyödyntää asynkronisia toimintoja Blazor WASM -kokoonpanojen lataamiseen kirjautumissivun elinkaaren aikana. Kun käyttäjä kirjautuu sisään, sovellus on jo esiladattu ja voi käynnistyä lähes välittömästi. Tämä lähestymistapa ei vain paranna havaittua suorituskykyä, vaan myös säilyttää käyttäjäystävällisen suunnittelun. 🌟

Tässä artikkelissa tutkimme, onko tämä asennus toteutettavissa, keskustelemme sen mahdollisista sudenkuopat ja tarjoamme käytännön toimenpiteitä sen saavuttamiseksi. Loppujen lopuksi tiedät kuinka yhdistää yksinkertaiset HTML-kirjautumissivut kehittyneillä Blazor WASM -sovelluksilla saumattoman käyttökokemuksen saavuttamiseksi.

Blazor WASM -esilatauksen optimointi yksinkertaisella HTML:llä

Aiemmissa esimerkeissä esitetyt komentosarjat on suunniteltu kuromaan umpeen kevyen, nopeasti latautuvan HTML-kirjautumissivun ja resurssiintensiivisemmän Blazor WASM -sovelluksen välinen kuilu. Ensimmäinen komentosarja varmistaa, että Blazorin WebAssembly-kokoonpanot esiladataan asynkronisesti kirjautumissivun elinkaaren aikana. Tämä parantaa käyttökokemusta sallimalla pääsovelluksen latautua lähes välittömästi todennuksen jälkeen. Esimerkiksi tiedoston "blazor.boot.json" hakeminen on kriittinen vaihe, koska se sisältää kaikki Blazor-sovelluksen käynnistämiseen tarvittavat metatiedot ja resurssit. Tällä tavalla käyttäjät eivät koe viiveitä kirjautumistietojensa lähettämisen jälkeen. 🌐

Toinen käyttöliittymän komentosarjan tärkeä osa on JavaScript-lupausten käyttö useiden asynkronisten tehtävien käsittelemiseksi samanaikaisesti. Kun kokoonpanoja noudetaan, kirjautumistoiminto on täysin toiminnassa. Tämä varmistaa, että sovellus reagoi myös taustatehtäviä suoritettaessa. Hyvä esimerkki on, kuinka Promise.all()-menetelmä yhdistää kokoonpanon latausprosessit tehden siitä tehokkaan ja virheettömän. Tämä lähestymistapa minimoi mahdolliset vikakohdat esilatauksen aikana, mikä vähentää riskiä siitä, että käyttäjät kohtaavat rikkinäisiä tai epätäydellisiä sovelluslatauksia.

Taustapuolella ASP.NET APIa käytetään todentamaan käyttäjät turvallisesti ja palauttamaan JSON Web Token (JWT). Tämä tunnus ei ainoastaan ​​vahvista käyttäjän istuntoa, vaan mahdollistaa myös Blazor-sovelluksen toiminnan suojatussa ympäristössä sisäänkirjautumisen jälkeen. "JwtSecurityTokenHandler"-tunnisteen käyttö palvelinkoodissa varmistaa, että tunnukset luodaan alan standardien salausmenetelmien mukaisesti, mikä parantaa turvallisuutta. Esimerkiksi kelvollisilla tunnistetiedoilla sisäänkirjautuva käyttäjä saa allekirjoitetun JWT:n, joka voidaan tallentaa selaimen paikalliseen tallennustilaan myöhempiä pyyntöjä varten. 🔒

Näiden komentosarjojen sisällyttäminen mahdollistaa sujuvan ja käyttäjäystävällisen työnkulun. Kun kirjautumissivu on ladattu, esilatausskripti alkaa ladata Blazor-tiedostoja. Kun käyttäjä napsauttaa "Kirjaudu" ja on todennettu, Blazor-sovellus alustetaan vain, jos kokoonpanot ovat valmiita. Muussa tapauksessa sovellus odottaa latauksen valmistumista ennen käynnistystä. Tämä lähestymistapa ei ainoastaan ​​optimoi suorituskykyä vaan tarjoaa myös saumattoman kokemuksen. Kehittäjä voisi verrata tätä asetusta "kaksimoottoriseen" autoon, jossa yhtä moottoria käytetään perustehtäviin ja toista raskaiden nostoihin. Tämä tasapaino varmistaa, että sekä kehittäjät että käyttäjät nauttivat paremmasta ja reagoivammasta sovelluksesta.

// 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 -latauksen virtaviivaistaminen kirjautumissivuille

Yksi Blazor WebAssembly -sovelluksen optimoinnin usein huomiotta jäänyt näkökohta on selaimen välimuistimekanismien hyödyntäminen. Kun esiladat kokoonpanoja, nämä resurssit voidaan tallentaa paikallisesti selaimen välimuistiin myöhempiä vierailuja varten, mikä lyhentää latausaikoja merkittävästi. Käyttämällä "Cache-Control"-otsikkoa palvelinpuolella kehittäjät voivat varmistaa, että staattiset resurssit, kuten kokoonpanot, tallennetaan välimuistiin oikein. Voit esimerkiksi määrittää "max-age=31536000" tallentamaan kokoonpanot välimuistiin vuodeksi, mikä on ihanteellinen resursseille, jotka muuttuvat harvoin. Tämä lähestymistapa toimii saumattomasti esilatausmekanismin kanssa, mikä parantaa sekä nopeutta että luotettavuutta. 🚀

Toinen näkökohta on se, kuinka Blazor hallitsee sovelluksen päivityksiä. Esiladatun kirjautumissivun käyttäminen tarkoittaa, että kokoonpanopäivitykset on käsiteltävä huolellisesti vanhentuneiden tiedostojen käytön estämiseksi. Versiontarkistusjärjestelmän käyttöönotto blazor.boot.json-hakulogiikassa voi korjata tämän. Lisäämällä versiotiivisteen kokoonpano-URL-osoitteisiin varmistat, että selain hakee päivitetyt resurssit aina, kun sovellus asennetaan uudelleen. Esimerkiksi aikaleiman tai Git commit -hajautusarvon lisääminen varmistaa, että käyttäjät saavat aina sovelluksen uusimman version välttäen turhat lataukset. 🌐

Lopuksi käyttökokemuksen optimointi kokoonpanolatausten aikana on ratkaisevan tärkeää. Visuaalisen edistymisilmaisimen tai "latausanimaatio" sisällyttäminen kirjautumissivulle voi antaa käyttäjille palautetta siitä, että jotain tapahtuu taustalla. Tämä vähentää käyttäjien turhautumista ja tekee kokemuksesta interaktiivisemman. Yhdistämällä tekniikoita, kuten välimuistin, versiotarkistuksia ja visuaalisia vihjeitä, kehittäjät voivat varmistaa sujuvamman ja ammattimaisemman Blazor WASM -sovellusten käyttöönoton.